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 colors: comma-separated hex colors for card borders (rounded) or top shadows (square). cycles through the colors.
divider colors: comma-separated hex colors for card divider (hr) lines. independent from accent colors.
background color: hex background color for cards. text color auto-adjusts for contrast.
border size: border thickness in pixels. for rounded cards this controls the border width (default: 1px). for square cards this controls the top accent bar height (default: 10px).
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 with custom border colors (#d4006a, #2b73c1, #009688) and a separate divider color (#ffa000). Each cycles independently.
Pink accent
This card gets the first custom accent color.
Blue accent
This card gets the second custom accent color.
Teal accent
This card gets the third custom accent color.
Pink again
The colors cycle, so this card is back to the first color.
Square cards with a single custom accent (#d4006a).
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.
Square cards with border_size: 8 for a shorter 8px accent bar.
shorter
accent
bar
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.