ComboStrap UI - Masonry

Undraw Website Builder Re Ii6e


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.


   <!-- Component -->


With static element


        <heading 3>Teaser Title</heading>
        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. 
        <btn>[[:start|Go to this page !]]</btn>

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

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.

    <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>
            <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| ]]
Recent Articles Changed
Excluded By Noindex Tag Google Console
Release 1.25.2

Modified - Tuesday 23 May

This page is the details of the release 1.25.2 The syntax analytics does not show the component anymore...

Undraw My Documents
How ComboStrap analyzes and replicates data ?

Modified - Saturday 13 May

The analysis and replication of a webpage are the cornerstones of the quality and performance of a page....

Undraw Stepping Up
How to create a top menu bar?

Modified - Friday 12 May

The theme system supports the creation of a slot page called header slot in order to create a menu bar...

Extension Manager Dokuwiki Manual Install

Modified - Thursday 04 May

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

Undraw My Documents
syntax_count - Analyse the syntax of your page

Modified - Thursday 04 May

The syntax count statistic shows the number of occurrence of a component (syntax) on a page

Strap Toolbar
ComboStrap - Railbar

Modified - Wednesday 03 May

The railbar is a layout element that shows a navigation rail with all devel:menusmenus actions: the...

Undraw Growth Chart R99m
ComboStrap - SEO

Modified - Wednesday 03 May

seoSearch engine optimization (or SEO) is the process of making your website optimized for search/enginesearch...

Undraw Stepping Up
How to install Dokuwiki ?

Modified - Wednesday 03 May

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to install it. This page...


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