> For the complete documentation index, see [llms.txt](https://broadcast.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://broadcast.presidiocreative.com/sections/sections/storytelling/dynamic-content/grid-item-blocks.md).
# Grid item blocks
## Blocks
These content blocks are modular elements designed to build a flexible section. Each block can be added, arranged, and styled independently to create rich storytelling experiences or drive user actions.
### Image
Displays an image with adjustable width and padding.
| Settings | Type | Description |
| ----------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Image | `image_picker` | Select an image from the media library.
Recommended size: 2000 × 1400px (.jpg).
Includes a help link for image guidelines.
|
| Image link | `url` | Optional URL. When set, the image becomes clickable and links to the specified destination. |
| Width | `range` | Controls the image width relative to its container.
Range: 20%–100%, step: 5%. Default: 100%.
|
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the image.
Range: 0–50px, step: 2px. Default: 0px.
|
### Video
Embeds a video with configurable width and padding.
| Settings | Type | Description |
| ----------- | -------------- | ------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Video | `video` | Upload or select a video from the media library to display inside the grid item. |
| Image | `image_picker` | Fallback image displayed if the video isn't loaded or supported. |
| Width | `range` | Controls the video width relative to its container.
Range: 50%–100%, step: 5%. Default: 100%.
|
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the video.
Range: 0–50px, step: 2px. Default: 0px.
|
### Icon
Shows a built-in or uploaded icon with customizable size, color, heading, and supporting text.
| Settings | Type | Description |
| ---------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Icon | `select` | Select a predefined icon from the theme icon library.
Default: icon-award
Available options include: Award, Box, Chat, Check, Check circle, Cloud, Discount, Donation, Droplet, Email, Fast shipment, Gift, Heart, Leaf, Lightning, Location, Phone, Recycle, Shield, Star, Truck, Vegan, Washing machine, and more.
|
| Alternative icon/image | `image_picker` | Upload a custom SVG icon instead of using the predefined icon set.
Recommended size: 160 × 160px (.svg).
Includes a help link for image guidelines.
|
| Size | `range` | Controls the icon size.
Range: 20–120px, step: 5px. Default: 40px.
|
| Icon color | `color` | Sets the icon color.
Alpha channel supported (RGBA transparency).
|
| Text | `richtext` | Optional text displayed below or next to the icon. |
| Text size | `select` | Controls the size of the icon text.
Default: body-medium
Options:
body-x-small — Extra smallbody-small — Smallbody-medium — Mediumbody-large — Largebody-x-large — Extra large
|
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the icon block.
Range: 0–50px, step: 2px. Default: 0px.
|
### Heading
Displays a large headline or title within a slide or section.
| Settings | Type | Description |
| --------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Text | `textarea` | Main heading text content.
Default: Image slide
|
| Heading size | `select` | Controls the visual size of the heading text. Options: `Mini`,`Extra small`, `Small`, `Medium`, `Large`, or `Extra large`. |
| **Colors** | | |
| Text | `color` | Sets the heading text color.
Alpha channel supported (RGBA transparency).
|
| **Advanced** | | |
| Heading SEO tag | `select` | Sets the semantic HTML tag `H1`-`H6`, or `Automatic` for SEO purposes. |
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the heading.
Range: 0–50px, step: 2px. Default: 8px.
|
### Subheading
Displays a subheading text with bottom padding settings.
| Settings | Type | Description |
| ----------- | ------- | ------------------------------------------------------------------------------------------------------ |
| **Content** | | |
| Subheading | `text` | Subheading text displayed above or below the main heading.
Default: Introducing
|
| **Colors** | | |
| Text | `color` | Sets the subheading text color.
Alpha channel supported (RGBA transparency).
|
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the subheading.
Range: 0–50px, step: 2px. Default: 0px.
|
### Rich text
Adds supporting or descriptive text beneath a heading.
| Settings | Type | Description |
| ----------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Text | `richtext` | Main rich text content area supporting formatted text (paragraphs, bold, links, etc.).
Default: \Use this text area to tell your customers about your brand and vision. You can change it in the theme editor, and position it easily onto the grid.\
|
| Text size | `select` | Controls paragraph text size.
Applies only when the content in the Text field is set to Paragraph.
Automatically generated by the base size.
Default: body-large
Options:
body-x-small — Extra smallbody-small — Smallbody-medium — Mediumbody-large — Largebody-x-large — Extra large
|
| **Colors** | | |
| Text | `color` | Sets the rich text color.
Alpha channel supported (RGBA transparency).
|
### Single button
Inserts a single call-to-action (CTA) button.
| Settings | Type | Description |
|---|
| Text | text | The label that appears on the button. |
| Link | url | Destination URL the button will link to. |
| Color | select | Visual style of the button: Primary, Secondary, Black, or White. |
| Size | select | Button size options: Small, Medium, or Large. |
| Style | select | Button appearance: Solid (filled), Outline (border only), or Text (no border). |
| Show arrow | checkbox | If checked, a right-pointing arrow icon appears next to the text. |
| Full-width | checkbox | Makes the button span the full width of its container. |
| Padding | | |
| Bottom | range | Padding below the section. |
### Side by side buttons
Adds two CTAs side by side, usually **Primary** and **Secondary** actions.
| Settings | Type | Description |
|---|
| Primary/Secondary buttons | | |
| Text | text | Label displayed on the primary/secondary buttons. |
| Link | url | URL the primary/secondary buttons links to. |
| Color | select | Button color: Primary, Secondary, Black, or White. |
| Size | select | Button size: Small, Medium, or Large. |
| Style | select | Visual style: Solid, Outline, or Text. |
| Show arrow | checkbox | If checked, a right-arrow icon is shown on the buttons. |
| Padding | | |
| Bottom | range | Padding below the section. |
### Liquid
Insert custom Liquid code or HTML for advanced layouts or embeds.
| Settings | Type | Description |
| ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Content** | | |
| Custom code | `liquid` | Allows insertion of custom Liquid, HTML, CSS, or JavaScript code.
The code renders directly inside the grid item.
Default: \Once you write some custom code, it will render right here.\
|
| **Padding** | | |
| Bottom | `range` | Controls bottom spacing below the Liquid block.
Range: 0–50px, step: 2px. Default: 0px.
|
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://broadcast.presidiocreative.com/sections/sections/storytelling/dynamic-content/grid-item-blocks.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.