ComboStrap UI - Masonry

Undraw Website Builder Re Ii6e

About

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 do not have a uniform height (Ie to mix small and big cards for instance).

A masonry layout is generally used with cards or blockquotes.

Syntax

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

Example

With static element

<masonry>

    <card>
        {{:teaser_image_1.png|}}
        <heading 3>Teaser Title</heading>
        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 Image 1
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.

With a dynamic list of pages

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 align="text-center" spacing="mb-3"> Recent Articles Changed </heading>
    <masonry>
        <fragment>
            <card clickable>
            <page-image featured ratio="21:9" default="first|ancestor|vignette|logo" />
            <heading 3>$title</heading>
            <itext color="muted">//Modified - ${date_modified | format('EEEE dd MMMM')}//</itext>

            ${description | head(100, "...")}  [[$path| ]]
            </card>
        </fragment>
    </masonry>
</iterator>
Recent Articles Changed
Excluded By Noindex Tag Google Console
Release 1.25.2

Modified - Monday 12 February

This page is the details of the release 1.25.2. This release is a bug/improvement/compatibility release...

Release
ComboStap - Latest release

Modified - Wednesday 07 February

A synonym page to redirect to the latest release

Extension Manager Dokuwiki Manual Install
How to update Combo or a third party-plugin?

Modified - Wednesday 07 February

This page lists the standard steps that need to be taken in order to update your ComboStrap installation...

Combostrap Link Preview
The Link component

Modified - Thursday 21 December

The link component permits to create hyperlinks between pages.

Tooltip Illustration
ComboStrap UI - Tooltip

Modified - Thursday 21 December

A Tooltip displays informative text when users hover over, focus on, or tap an element.

Combostrap Default Theme File Explorer
How to create your own theme?

Modified - Thursday 21 December

This page shows you how to create your own theme. You can then apply advanced design and logic to your...

Undraw Building Websites I78t
What is a template ?

Modified - Thursday 21 December

This article talks about template and layout management and how it can be defined by page.

Undraw Icon Design Re 9web
How to get help with ComboStrap

Modified - Wednesday 20 December

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

Support

Bootstrap 5 support

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.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Card Illustration
ComboStrap UI - Creating a card

A card is a box composed of an image, a text and a call to action
Undraw Website Builder Re Ii6e
Layout components of Combostrap

A layout component is a component that laid out other components. This page lists the layout component of ComboStrap
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw Building Websites I78t
The iterator: Pages iteration made easy

With the fragment iterator, you can loop over a content fragment to create any list of page components such as the list of the last blog or recent pages
Undraw My Documents
What is a blockquote widget and how to use it

A blockquote is a extract from another source and is set appart with a citation.



Task Runner