Docs
Sections

Flex cards section

The Flex cards section shows a row of cards with media and your own blocks in Highlight, each card with its own width and colors.

Applies to: Highlight 4.1.0 and later. Added in: Highlight 4.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.

The Flex cards section shows a row of cards, each with an image or video on top and your own blocks below, such as a caption, a heading and a button. Each card has its own width and colors. Use it for promotions, category teasers or a row of features.

Where to find it: Online Store → Themes → Customize → Add section → Flex cards (Promotions category).

The section holds Card blocks. Every Card holds theme blocks (Heading, Text, Button, Image and the others) and app blocks. The new section starts with four cards, each with a Caption and a Heading. See How Highlight is built for how theme blocks work.

Layout

The Layout settings apply to every card of the section. The width of each card is set in the card itself.

  • Desktop media height sets the height of the image or video of every card on desktop, 100 to 600 px. Default: 300 px.
  • Preserve media height on mobile shows each card's media in its own proportions on phones, so nothing is cropped. Turn it off to give all cards one height with Mobile media height.
  • Mobile media height sets the media height on tablets and phones, 100 to 500 px. Default: 200 px.
  • Grid gap size sets the space between cards, as a percentage of one grid column. Default: 25 %.
  • Text alignment aligns the blocks inside every card left, center or right.
  • Don't show media hides the image area of all cards, for text-only cards.
  • Hide border removes the thin border around every card.

Typography

  • Text padding sets the space between the card's edge and its blocks: None, Small, Regular or Large.
  • Text spacing sets the space between the blocks inside a card: Small, Medium, Large or Extra large.

Building a row of flex cards

Add the section

In the theme editor, select Add section and choose Flex cards. It starts with four cards.

Add or remove cards

Select Add block → Card in the section to add a card, or remove the cards you do not need. Drag them to change their order.

Set the width of each card

Select a card and set Desktop columns. A row has 12 columns: two cards of 6, three of 4, or one of 7 next to one of 5.

Add the media

Upload an Image or choose a Video file in each card. Set the media height for all cards in the section's Desktop media height.

Add blocks inside the card

Select Add block inside a card and choose a Caption, Heading, Text, Button or another theme block. Drag them into order.

Check mobile

Switch the editor preview to mobile. Cards stack one under the other; turn on Hide on mobile for cards that should not show on small screens.

How many cards fit in one row?

As many as fit in 12 columns. Each card takes its Desktop columns (2 to 12); when the next card does not fit, it starts a new row. On phones, every card is full width.

No. The Card has no link of its own. Add a Button block inside the card, or use the Flex grid section, whose Media card and Text card have a Link.

All Flex cards settings

Every setting, with its type and default.

Featured product

The Featured product section shows one product with its gallery, variant picker and buy buttons on any Highlight page.

Flex grid

The Flex grid section arranges media cards and text cards in a free grid in Highlight; four presets start it as a collage or a fullwidth banner.

On this page

LayoutTypographyBuilding a row of flex cardsHow many cards fit in one row?Can a whole card be a link?All Flex cards settingsRelated pages