Icons with text
Icons with text shows a row of cards, each with an icon and short text. Each card is a block. On mobile, the cards can become a carousel.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Icons with text.
The package uses this section on the product page templates and in the footer group.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Show border | Draws divider lines between the cards on larger screens. | |
| Height | • Fit | Fit sizes each divider to its card. Fill sets each divider to the height of the window, so it can run taller than its card. Shown when Show border is on. |
| Card heading size | • Small | Text size of each card's heading: small, medium or large. |
| Show border on mobile | Draws a divider between stacked cards on mobile. Shown when Enable carousel on mobile is off and Columns on desktop is 1. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Heading alignment | • Left | Aligns the section's subheading, heading and description to the left, center or right. |
| Content alignment | • Left | Aligns the icon, heading and text inside each card to the left, center or right. |
| Subheading | Short text shown above the heading. | |
| Heading | Main title of the section. | |
| Description | Text shown under the heading. | |
| Heading size | • Small | Size of the section heading. Large uses the biggest heading style and Small the smallest. |
Icon settings
| Setting | Options | Description |
|---|---|---|
| Icon size | Width and height of each icon in pixels. | |
| Icon position | • Top | Places the icon above or below the card text. |
Icon size sets the size of each icon. Icon position places the icon above or below the card text.
Layout
| Setting | Options | Description |
|---|---|---|
| Horizontal content padding | Padding inline is automatically optimized for mobile. | |
| Vertical content padding | Padding block is automatically optimized for mobile. | |
| Column gap | • No gap | Space between the cards: no gap, small, medium or large. |
| Columns on desktop | • 1 | Number of cards per row on small screens, 1 or 2. On wide screens the theme places all cards in one row. |
Height sets whether each divider fits its card or uses the window height. Show border on mobile applies only when Columns on desktop is 1.
Carousel
| Setting | Options | Description |
|---|---|---|
| Enable carousel on mobile | On mobile, shows the cards in one swipeable row with dots underneath instead of stacking them. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Width of the section content: standard page width, a wider container, or the full screen width. |
| Top padding | Space above the section in pixels. | |
| Bottom padding | Space below the section in pixels. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Icon with text (_icon-with-text)
One card in the row, with an icon, heading and description. A built-in icon chosen in Icon type replaces the icon image.
| Setting | Options | Description |
|---|---|---|
| Icon image | Image shown in the card when Icon type is None. 32px x 32px .png recommended | |
| Icon type | • None | Built-in icon shown in the card. It overrides the icon image. Default: None. |
| Heading | Heading of the card. Default: This is heading text. | |
| Description | Text shown under the card heading, with rich text formatting. Default: Add a short description for this section. |
Notes
The section accepts up to five cards.
No comments yet