Columns (columns)

Columns are used to gather groups of cards into listings.

🔗 External documentation.

ID Label Description Schema
intro Intro
cards Cards 
            id: columns
label: Columns
description: 'Columns are used to gather groups of cards into listings.'
homepage: 'https://design-system.w3.org/components/columns.html'
variants:
    default:
        id: default
        label: Default
    images:
        id: images
        label: 'For cards with images'
    icons:
        id: icons
        label: 'For cards with icons'
slots:
    intro:
        id: intro
        label: Intro
    cards:
        id: cards
        label: Cards
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': columns
            intro:
                -
                    '@element': h2
                    '@content': 'Section heading for these teasers'
                -
                    '@element': p
                    '@content': 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
            cards:
                - '[Card markup...]'
                - '[Card markup...]'
                - '[Card markup...]'

Default ( default )

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div>

For cards with images ( images )

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="component--columns--images component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div>

For cards with icons ( icons )

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="component--columns--icons component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div>