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

All variables that can be used in a template text

Modified May 26 - 17:20

This page describes which variables you can use in a template text

ComboStrap Styling - Text Align Attribute

Modified May 24 - 07:35

text-align is a typographic attribute that sets the alignment of the lines of text inside a block co "...

Date Component: display a date in any format you wish

Modified May 23 - 15:51

With the date component, you can print a date in any format (from today's date to page date)

Pipeline

Modified May 10 - 12:56

A pipeline is a element that contains a list of function (called a pipeline) that transforms success "...

ComboStrap UI - Grid (Row and Cell)

Modified Apr 26 - 10:18

The grid component permits to create a grid layout based on cells inside a row. It will layout the c "...

Page KeyWords

Modified Apr 04 - 07:59

keywords are a couple of words that are relevant to the content of your page. They are added to the "...

Strap Template - Sidekick Slot

Modified Apr 01 - 12:11

The sidekick slot is a slot that is shown at the right side of the main content. How it works This i "...

ComboStrap SEO - Sitemap

Modified Mar 24 - 08:11

A sitemap is a file that search:enginesearch engine will read in order to get a list of all your pag "...

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.