> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/storytelling/image-cards/theme-block-card.md).

# Theme block - Card

### General settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fg6F5E4eQRKvKA7MvAm7a%2Fimage.png?alt=media&amp;token=112763fd-ee30-4169-9eb4-e15ccae68c49" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Display a single image within a section, such as a banner, promotion, or brand visual. <em><strong>(451px x 453px recommended)</strong></em></td></tr><tr><td><strong>Mobile image</strong></td><td>Display an alternate image specifically optimized for mobile devices. <em><strong>(451px x 453px recommended)</strong></em></td></tr></tbody></table>

### Block settings

#### Subheading, Heading, Description

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FYC9UnLD4yuGJXdArxr0u%2Fimage.png?alt=media&amp;token=3ac33312-3e5b-494c-bc3f-95da73cc2c4b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading, Heading, Description</strong></td><td>Custom content block</td></tr><tr><td><strong>Width</strong></td><td><p>The width of text block:</p><ul><li><strong>Fit</strong>: adapts to the text length.</li><li><strong>Fill</strong>: stretches across the container width.</li></ul></td></tr><tr><td><strong>Typography</strong></td><td>Choose a preset style (font, size, weight) from <strong>Theme settings → Typography</strong>.</td></tr><tr><td><strong>Background</strong></td><td>Toggle ON to enable a background area behind the text.</td></tr><tr><td><strong>Background color</strong></td><td>Select the color for the text background.<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Corner radius</strong></td><td>Adjust the roundness of the background corners<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Padding top/bottom</strong></td><td>Adjust these values to control the amount of space between the section’s content and its outer edges.</td></tr></tbody></table>

#### Highlight text

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FMs9nrkj3Fz41G86YR2i9%2Fimage.png?alt=media&amp;token=41d5a144-4dc3-410d-bd5f-2f7b5e59882d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>Custom title block</td></tr><tr><td><strong>Size</strong></td><td>The size of highlighted content</td></tr><tr><td><strong>Select icon</strong></td><td>Choose the icon to show along with the highlighted content</td></tr><tr><td><strong>Background color</strong></td><td>Setting the background color</td></tr><tr><td><strong>Text color</strong></td><td>Setting the content color</td></tr><tr><td><strong>Uppercase</strong></td><td>Uppercasing the highlighted content</td></tr><tr><td><strong>Spacing bottom</strong></td><td>Spacing between the highlighted content and the next component</td></tr></tbody></table>

#### Button

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FJQRrdMAMnoURahi7bR38%2Fimage.png?alt=media&amp;token=b0ed9b39-03e0-4d1d-9f00-96f4656a4945" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Custom name button, if left empty, the button will be hidden</td></tr><tr><td><strong>Button link</strong></td><td>The link URL you want to add</td></tr><tr><td><strong>Type</strong></td><td><p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul></td></tr><tr><td><strong>Open link in new tab</strong></td><td>Open the link in a new browser tab</td></tr><tr><td><strong>Spacing bottom</strong></td><td>Spacing between the button and the next component</td></tr></tbody></table>