Page Content:
Overview
The Cards Block component is like a series of squareish post-it notes on the page. if there are too many cards to fit in one row, they start wrapping onto the next row. on mobile they all show in one column.
Config
card style: the style of the cards. unset is plain.
card size: set the width of the cards. default is 27
card columns: set a fixed number of columns. cards show in exactly N columns when there is space, then collapse directly to 1 column. works with card size.
accent color (per card): hex color for the card border (rounded) or top accent bar (square, needs accent size). unset cards use the default palette.
divider color (per card): hex color for the card's divider (hr) lines. independent from accent color.
background color: hex background color for cards. text color auto-adjusts for contrast.
border size: outer border width in pixels, all sides (default: 1px). 0 removes the border.
accent size: top accent bar height in pixels for square cards, independent of the border. color comes from each card's accent color.
Styles
these
are
rounded
these
are
square
these
are
plain
Fixed Columns
Using card_columns: 3 with rounded style. These cards show in exactly 3 columns when there is space, then collapse directly to 1 column with no intermediate sizes.
Column 1
This layout uses card_columns to fix the column count.
Column 2
It skips intermediate breakpoints like 2 columns.
Column 3
Resize the browser to see 3 columns collapse directly to 1.
Custom Accent and Divider Colors
Rounded cards, each with its own accent color (#d4006a, #2b73c1, #009688) and a shared divider color (#ffa000), set per card.
Pink accent
This card sets its own accent color.
Blue accent
Each card can pick a different accent.
Teal accent
Dividers share one color here, also set per card.
Default palette
No accent color set, so this card falls back to the default palette.
Square cards with a per-card accent (#d4006a) on the top bar (accent_size: 6).
one
two
three
Custom Background Color
Rounded cards with a dark background (#1a1a2e). Text color auto-adjusts to white for contrast.
Dark card
This card has a dark background with light text.
Dark card
Text color is automatically derived.
Dark card
No need to set text color manually.
Light custom background (#e8f5e9) with default dark text.
Light green card
Light backgrounds keep dark text.
Light green card
Accent colors work with custom backgrounds too.
Light green card
Everything composes together.
Custom Border Size
Rounded cards with border_size: 3 for a thicker 3px border.
Thick border
This rounded card has a 3px border instead of the default thin.
Thick border
The border size applies to all cards in the block.
Thick border
Works with accent colors too.
In a hero
Card blocks can go in a hero too
i
need
a
hero!
the plain style looks cool with full-width images and some text
the plain style looks cool with full-width images and some text
the plain style looks cool with full-width images and some text
this section has text align set to "center", it affects the text of the cards too.
some heading
the plain style also has support for using a "horizontal line" in the text editor, which looks cool with headings and some text
some heading
the plain style also has support for using a "horizontal line" in the text editor, which looks cool with headings and some text
some heading
the plain style also has support for using a "horizontal line" in the text editor, which looks cool with headings and some text
short text
If you have a short block of text, that would look weird in the full content width, you can use a cards block with one card and a card-size defined to make a smaller content width for that text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet faucibus quam, sed mollis quam imperdiet nec.
cards can have calls to action configured
you can also put links in the text, but the configured cta will always make sure the links line up at the bottom of the card area, which looks a little cleaner. is this text long enough yet?
the cta can also be a button, if you're into that kind of thing.