Card Layout (card_layout)

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

🔗 External documentation.

            id: card_layout
label: 'Card Layout'
description: 'In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive. '
homepage: 'https://getbootstrap.com/docs/4.6/components/card/#card-layout'
variants:
    default:
        id: default
        label: 'Card group (default)'
        description: 'Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing. https://getbootstrap.com/docs/4.6/components/card/#card-groups'
    deck:
        id: deck
        label: 'Card deck'
        description: 'Need a set of equal width and height cards that aren’t attached to one another? Use card decks. https://getbootstrap.com/docs/4.6/components/card/#card-decks'
    columns:
        id: columns
        label: 'Card columns'
        description: 'Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. https://getbootstrap.com/docs/4.6/components/card/#card-columns'
slots:
    cards:
        id: cards
        label: Cards
        description: 'An array of card patterns.'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': card_layout
            cards:
                -
                    '@component': card
                    title: 'Card title'
                    text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
                    footer: 'Last updated 3 mins ago'
                -
                    '@component': card
                    title: 'Card title'
                    text: 'This card has supporting text below as a natural lead-in to additional content.'
                    footer: 'Last updated 3 mins ago'
                -
                    '@component': card
                    title: 'Card title'
                    text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
                    footer: 'Last updated 3 mins ago'