ComboStrap UI - Masonry

masonry is a layout component. Its children are laid out like a mason fitting stones in a wall (placing elements based on available vertical space).

This layout is handy when you want to lay out a list of components that does not have an uniform height (Ie to mix small and big card for instance).

A masonry layout is generally used with cards or blockquotes.

<masonry>
   <!-- Component -->
</masonry>

<masonry>

    <card>
        {{:teaser_image_1.png|}}
        === Teaser Title  ===
        A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content. 
        
        <btn>[[:start|Go to this page !]]</btn>
    </card>


    <blockquote>
        Lorem ipsum [[:start|dolor]] sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        <cite>Someone famous in [[:start|Source Title]]</cite>
    </blockquote>

</masonry>

Teaser Title

A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.

Go to this page !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Example of a list of Recent Articles Changed with an iterator.

<iterator>
    <data>select where path != ':start' and is_low_quality = 0 order by date_modified desc limit 8</data>
    <heading d4 text-align="center" spacing="mb-3"> Recent Articles Changed </heading>
    <masonry>
        <template>
            <card clickable>
            <page-image path="$path" ratio="21:9" zoom=-6 />
            === $title ===
            <itext color="muted">//Modified <date format="%h %d - %H:%M">$date_modified</date>//</itext>

            <pipeline>"$description" | head(100, "...")</pipeline>  [[$path| ]]
            </card>
        </template>
    </masonry>
</iterator>

Recent Articles Changed

Creation of a top menu bar - ComboStrap Getting Started

Modified Jan 31 - 10:11

The strap template supports the creation of a slot page called header slot in order to create a menu "...

How to get help with ComboStrap

Modified Jan 31 - 09:56

We are here to help, don't hesitate to mail us. This page shows you also all other support channel o "...

Parsing performance

Modified Dec 21 - 15:36

When installing combo, people may see a degradation in performance during the initial rendering of a "...

A ComboStrap Component to render web code in a web page (javascript, html, ...)

Modified Nov 14 - 11:00

With the `web code` component, you can embedded snippet of Javascript, Html and Css script and rende "...

How to use a SVG in ComboStrap

Modified Nov 14 - 10:57

ComboStrap supports natively SVG and allows you to use them as image, illustration and background

How to create a sequence diagram with ComboStrap (UML)

Modified Oct 29 - 10:15

This article shows you how to create a UML sequence diagram.

If you use Bootstrap version 5, you may see that the output is slightly different than with Bootstrap version 4.

This is because Bootstrap version 5 does not support card-column anymore and we have implemented it manually.