Flex cards section

Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 6.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.

The Flex cards section shows promotion cards in rows. Each card has an image or a video on top, theme blocks such as a heading, a text and a button below it, and a width you set on a 12-column grid. Kingdom 6.0.0 added it, with the Flex grid section and the theme blocks.

Where to find it: select Add section in the theme editor, then choose Flex cards (Add section category Promotions).

Adding cardsCopy Anchor Link

The section is built from Card blocks; the editor calls each one Card, and these docs call it the Flex card. A new Flex cards section starts with four cards in two rows, 7 + 5 and 5 + 7 columns wide, each with a caption and a heading.

• Select Add block → Card to add a card. There is no limit on the number of cards.
• Inside a card, select Add block to add theme blocks: Button, Caption, Content group, Custom Liquid, Divider, Empty space, Heading, Image, Text, Star rating, or an app block. See Blocks.
• Heading shows a title above the cards (default "Promotion cards"). Heading tag sets its HTML tag, see General section settings.

A Flex cards section with no cards shows nothing on the page.

Setting up card widthsCopy Anchor Link

On screens 768 px wide or more, the section is a grid of 12 columns. Each card's Desktop columns (2 to 12) sets how many of them it takes.

On screens narrower than 768 px, every card takes the full width, one card per row. Turn on Hide on mobile in a card to leave it out on phones.

Media size and textCopy Anchor Link

These section settings apply to every card:

• Desktop media height sets the height of the image or video area, 100 to 600 px (default 300). The media is cropped to fill it.
• Preserve media height on mobile (default on) shows each image at its own proportions on screens 768 px wide or less. Turn it off to use Mobile media height instead, 100 to 500 px (default 200).
• Don't show media hides the image and video area of every card, for text-only cards.
• Gap between cards sets the space between the cards: None, Small (Theme settings → Layout → Columns margin) or Large (Theme settings → Layout → Horizontal padding).
• Text alignment places the blocks of each card on the left, in the center or on the right.
• Hide border removes the thin border around each card.
• Text padding sets the space between the card edge and its blocks, from None to Extra large.
• Text spacing sets the space between the blocks inside a card, from Small to Extra large.

Each card also has its own colors, see Flex card.

Why do my cards wrap onto a new row?Copy Anchor Link

Because the Desktop columns of the cards add up to more than 12. A card that does not fit in what is left of a row moves to the next row, and the first row ends with an empty space. Lower Desktop columns on one of the cards so the row adds up to 12.

Why are all my cards the same width on my phone?Copy Anchor Link

Because on screens narrower than 768 px, Kingdom shows every card at full width, one per row. Desktop columns applies only to wider screens. Kingdom does not have a mobile width setting for flex cards; use Flex grid when you need two cards side by side on phones.

Can I use theme blocks in other sections?Copy Anchor Link

No. Theme blocks work only inside the cards of the Flex cards and Flex grid sections. The other Kingdom sections have their own blocks, listed on each section's page.

All Flex cards settingsCopy Anchor Link

Every setting in this group, with its type and default.

Related pagesCopy Anchor Link

• Flex card: the Card block and its colors.
• Flex grid section: cards that span columns and rows, for collages.
• Blocks: the theme blocks you add inside a card.
• How Kingdom is built: sections, cards and theme blocks.