Text card
The Text card of the Flex grid section holds theme blocks over an optional image or video, with its own position, size, link and colors.
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 Text card is the content card of the Flex grid section. It holds theme blocks, such as a heading, a text and a button, over an optional image or video, with its own position on the grid, text placement, link and colors.
Where to find it: select a Flex grid section in the theme editor, then select a Text card in it, or select Add block → Text card to add one.
Where you can use it
Only inside the Flex grid section, next to Media cards. Every Flex grid preset starts with at least one Text card. The section sets what all cards share: the row height, the gap, the border, the space inside the cards (Text padding) and between their blocks (Text spacing).
Text position and width
- Text alignment places the blocks in one of nine positions on the card (default Left bottom).
- Text container width limits how wide the blocks may run: Medium (60 percent of the card) or Large (90 percent, the default). Screens narrower than 640 px always use the full width.
- Image or Video file shows media behind the blocks, filling the card. A video plays muted and in a loop. When a video is set, the card shows only the video, not the image.
- Overlay sets the card background color. With an image or video, it is laid over the media at 36 percent opacity, so the text stays readable.
- Text sets the color of the text and the solid buttons.
Both colors are transparent by default: the card then uses the body background and text colors from Theme settings → Colors.
Setting up the card size
Set the desktop size
Under Size & alignment, set Desktop columns (2 to 12, default 4) and Desktop rows (1 to 4, default 1).
Set the mobile size
Set Mobile columns (1 or 2) and Mobile rows (1 or 2), or turn on Hide on mobile to leave the card out on screens 768 px wide or less.
Leave room for the blocks
If the blocks need more space than the rows give them, the card grows taller. Raise the section's Desktop card height (minimum), or give the card more rows, to keep the grid even.
Blocks you can add
Inside a Text card, select Add block to add theme blocks: Heading, Text, Caption, Button, Image, Star rating, Content group, Divider, Empty space, Custom Liquid, and app blocks from your installed apps.
Linking the whole card
Link makes the whole card clickable; Open link in a new window opens it in a new browser tab.
If entire card has a link, the inner links will not work. Buttons and links inside the card then open the card's link instead of their own.
Why do the buttons inside my card not work?
Because the Text card has a Link. The card link covers the whole card, so the buttons and the links in its text cannot be selected. Clear the card's Link to use the buttons, or remove the buttons and keep the card link.
All Text card settings
Every setting in this group, with its type and default.
Accepts these blocks: app blocks and any theme block.
Image (image): Shows an image behind the blocks, filling the card, cropped around its focal point.
Video file (video): Plays a video uploaded to Shopify behind the blocks, muted and in a loop. When a video is set the image is not shown, also if the video cannot play.
Link (link): Makes the whole card a link. If entire card has a link, the inner links will not work.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Text alignment (dropdown, default: Left bottom): Places the blocks on 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 how wide the blocks run: Medium is 60 and Large 90 percent of the card. Screens narrower than 640 px use the full width. Options: Medium, Large.
Text card: Size & alignment
Where to find it: Flex grid → Text card → Size & alignment
Desktop columns (slider 2 to 12, default: 4): Sets how many of the grid's 12 columns the card spans on screens wider than 768 px.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on screens wider than 768 px.
Hide on mobile (checkbox, default: off): Hides the card on screens 768 px wide or less.
Mobile columns (dropdown, default: 1 column): Sets whether the card spans one or both of the 2 mobile columns. Options: 1 column, 2 columns. Shown only when Hide on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows the card spans on screens 768 px wide or less. Options: 1 row, 2 rows. Shown only when Hide on mobile is off.
Text card: Colors
Where to find it: Flex grid → Text card → Colors
Overlay (color, default: transparent): Sets the card background color. Over an image or video it shows at 36 percent opacity. Transparent uses the body background color.
Text (color, default: transparent): Sets the text color of the card and the color of its solid buttons. Transparent uses the body text color.
Related pages
- Flex grid section: the grid that holds Text cards and Media cards.
- Media card: an image or video card without blocks.
- Blocks: every theme block you can add inside a card.
- Flex card: the card of the Flex cards section.