Text card
The Text card is the text card of Highlight's Flex grid section: your own blocks over an optional image or video, sized in the grid.
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 Text card is the text card of the Flex grid section: the theme blocks you add, such as a caption, a heading and a button, placed over an optional image, video or background color. It fills the grid area you give it.
Where to find it: Online Store → Themes → Customize → select a Flex grid section → Text card (or Add block → Text card).
Media and link
- Image fills the card behind the blocks, cropped to the card's shape.
- Video file plays a video uploaded to Shopify behind the blocks instead of the image, muted and in a loop.
- Link makes the whole card a link. The links inside the card then stop working (see below).
- Open link in a new window opens the link in a new browser tab. It shows when Link is set.
Text position
- Text alignment places the blocks in one of nine positions, from Left top to Right bottom. Default: Left bottom.
- Text container width limits the width of the blocks to Medium (60 % of the card) or Large (90 %, the default), on screens 640 px and wider.
- The section's Text padding and Text spacing set the space around and between the blocks.
Layout
The Flex grid has 12 columns on desktop and 2 on phones. All rows have the same height, set by the section's Desktop card height (minimum) and Mobile card height (minimum); a card with more content grows.
- Desktop columns sets the card's width, 2 to 12 columns. Default: 4.
- Desktop rows sets how many rows tall the card is, 1 to 4. Default: 1.
- Hide on mobile hides the card on screens narrower than 836 px.
- Mobile columns and Mobile rows set the card's size on phones: 1 or 2 columns, 1 or 2 rows.
Custom colors
Every color is transparent by default, which means the card uses the store colors from Colors theme settings.
- Background color fills the card. Over an image or video, it is laid on top as a 36 % overlay, which keeps light text readable.
- Text color colors the card's text and buttons.
- Accent colors the buttons inside the card when a customer hovers them.
- Border colors the card's border. It shows only when the section's Hide border is off.
Why do the buttons inside my text card not work?
The card's own Link is set. A link on the whole card covers everything inside it, so the Button blocks and text links cannot be clicked. Clear Link to use the buttons, or remove the buttons and keep the card link.
If entire card has a link, the inner links will not work.
Does the image show when the video cannot play?
No. When Video file is set, the Text card shows only the video. Use an image when the video may not play, for example on phones in low power mode.
All Text card settings
Every setting, with its type and default.
Accepts these blocks: app blocks and any theme block.
Image (image): Sets the image behind the card's blocks, cropped to the card's shape.
Video file (video): Plays a video uploaded to Shopify behind the blocks instead of the image, muted and in a loop. When a video is set, the image is not shown.
Link (link): Makes the whole card a link. The buttons and links inside the card then cannot be clicked.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Text alignment (dropdown, default: Left bottom): Places the card's blocks in one of nine positions inside the card. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text container width (dropdown, default: Large): Limits the width of the card's blocks to 60 percent (Medium) or 90 percent (Large) of the card, on screens 640 px and wider. Options: Medium, Large.
Text card: Layout
Where to find it: Flex grid → Text card → Layout
Desktop columns (slider 2 to 12, default: 4): Sets the card's width on desktop, in columns of the 12-column grid.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows tall the card is on desktop.
Hide on mobile (checkbox, default: off): Hides the card on screens narrower than 836 px.
Mobile columns (dropdown, default: 1 column): Sets the card's width on phones, where the grid has 2 columns: half width (1) or full width (2) Options: 1 column, 2 columns. Shown only when Hide on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows tall the card is on phones. Options: 1 row, 2 rows. Shown only when Hide on mobile is off.
Text card: Custom colors
Where to find it: Flex grid → Text card → Custom colors
Background color (color, default: transparent): Sets the card's background color. Over an image or video it is laid on top at 36 percent opacity. Transparent uses the store background color.
Text color (color, default: transparent): Sets the color of the card's text and buttons. Transparent uses the store text color.
Accent (color, default: transparent): Sets the hover color of the buttons inside the card. Transparent uses the store accent color.
Border (color, default: transparent): Sets the color of the card's border. Shown only when the section's Hide border is off.
Related pages
- Flex grid section: the grid that holds the cards.
- Blocks: the theme blocks a Text card holds.
- Media card: a card with media only.