Skip to content

card — Cards

Image / title / text / button tiles laid out as a grid or list.

A repeatable set of cards, each combining an image, a title, some text and an optional button. Lay them out as a grid (capped by the max_columns option) or a vertical list. Great for feature rows and teaser sections.

When to use

Feature grids, service tiles, article teasers, pricing tiers.

Configuration

Configure under content_blocks_kit.blocks.card (see Configuring blocks for how the levers combine).

Options

Block-level knobs, set under options:.

OptionDefault
max_columns4

Choice fields

Selectable values. Restrict or reorder them per host with choices: (the default is shown in bold).

FieldValues
layoutgrid, list
columns2, 3, 4

Default data

Initial values for a new block. Override per host with defaults:.

FieldDefault
layoutgrid
columns3
items[{"src":"","title":"Card title","content":"Card text","buttonUrl":"","buttonLabel":""}]

Example

yaml
# config/packages/content_blocks_kit.yaml
content_blocks_kit:
    blocks:
        card:
            options: { max_columns: 4 }
            choices: { layout: [grid, list] }   # restrict / reorder the picker
            defaults: { layout: grid }

Front-end

Rendered markup: .cb-kit-card items inside .cb-kit-cards. Style it by overriding the --cb-kit-* custom properties (see the kit stylesheet).

Notes

  • The max_columns option caps the grid column choice for a given host.

The configuration tables above are generated from content-blocks-kit:blocks --format=json, read straight from the block's code — they never go stale.

Released under the MIT License.