> 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.md).

# Image cards

**Image cards** are designed to visually highlight categories, promotions, features, or links to internal pages. Each card functions as a navigational or promotional element and is fully responsive, adapting to different screen sizes.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FKQl5grRTw3cpTiB84aGl%2FScreenshot%202025-05-07%20164158.png?alt=media&amp;token=e93d0e3a-5a1f-4118-9c19-2a59c5746c44" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FDswuZS8bY3R40tJuQnfE%2Fimage.png?alt=media&amp;token=e7386876-2f8d-4472-ac70-a96340846847" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr></tbody></table>

#### Section header settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FJwQBQ3taKNHgXLO0mi4c%2Fimage.png?alt=media&amp;token=1592bd0e-4e0d-411a-b605-e6adaa38f669" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>The subheading of the section</td></tr><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Enable heading underline animation</strong></td><td>Turn on an animated underline effect for headings. Switch off to keep a static look.</td></tr><tr><td><strong>Underline style</strong></td><td><p>Choose the underline’s look. Include:</p><ul><li><strong>Include</strong>: Simple underline – Clean straight line beneath the text.</li><li><strong>Curve stroke:</strong> Soft, hand-drawn curved stroke for a casual feel.</li><li><strong>Squiggle underline:</strong> Wavy line for a lively, attention-grabbing look.</li></ul><p><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></p></td></tr><tr><td><strong>Underline color</strong></td><td>Pick the color used for the underline.<br><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Heading size</strong></td><td><p>The size of the title:</p><ul><li><strong>Heading 1</strong></li><li><strong>Heading 2</strong></li><li><strong>Heading 3</strong></li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Card settings <a href="#blog-posts" id="blog-posts"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fkmv2o1rhrYq4jOspG2eZ%2Fimage.png?alt=media&amp;token=95feeb05-a0fc-456f-93a7-fa17db9c0b4e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td><strong>Desktop image position</strong></td><td><p>3 options for desktop image position</p><ul><li><strong>Top</strong></li><li><strong>Left</strong></li><li><strong>Right</strong></li></ul><p><em>* Note: Image will be shown above text on mobile.</em></p></td></tr></tbody></table>

#### Content settings <a href="#blog-posts" id="blog-posts"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fb1qQ71Cn3e3JIWB17cB8%2Fimage.png?alt=media&amp;token=08a162bf-26ca-46de-a49e-89e7607b273a" alt="" width="266"><figcaption></figcaption></figure>

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Background color</strong></td><td>Setting the background color of the content block</td></tr><tr><td><strong>Desktop vertical alignment</strong></td><td><p>3 options for the desktop content position</p><ul><li><strong>Top</strong></li><li><strong>Middle</strong></li><li><strong>Bottom</strong></li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Gap</strong></td><td><p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Padding inline</strong></td><td>Adjust the horizontal spacing (left and right) inside the section. This value is automatically optimized for mobile devices.</td></tr><tr><td><strong>Padding block</strong></td><td>Adjust the vertical spacing (top and bottom) inside the section. This value is automatically optimized for mobile devices.</td></tr></tbody></table>

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FZda2CvePtCJFhkdO3VUP%2Fimage.png?alt=media&amp;token=6473a6c4-7dd7-43aa-92e6-921c28c801f4" alt="" width="267"><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Items per row on desktop</strong></td><td>Number of columns to display on desktop</td></tr><tr><td><strong>Column gap</strong></td><td><p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Show navigation</strong></td><td>Display the next and back controls for the carousel<br><em>* Note: Pagination will automatically show on mobile if you display the number of items on mobile as 1 or 2</em></td></tr><tr><td><strong>Show pagination</strong></td><td>Display the pagination for the carousel</td></tr><tr><td><strong>Auto-change slide</strong></td><td>Enable or disable automatic slide transition.</td></tr><tr><td><strong>Change slides every</strong></td><td>Set the time interval (in seconds) between automatic slide transitions.</td></tr><tr><td><strong>Reveal next slide</strong></td><td>Display a part of the upcoming slide.</td></tr></tbody></table>

#### Mobile options <a href="#settings-for-carousel" id="settings-for-carousel"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F8Lllr98QA6QSgOd7pS26%2Fimage.png?alt=media&amp;token=02745e37-dd71-475c-8250-9520565fa3c9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Items per row on mobile</strong></td><td>Number of columns to display on mobile devices</td></tr><tr><td><strong>Content alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FDwAbovdLLxoqNeE4eKbE%2Fimage.png?alt=media&amp;token=3ae368e9-9dbc-4d12-82b3-d88608210a01" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>

#### Section divider

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FdPwtykkdgwlmnsv23zKz%2Fimage.png?alt=media&amp;token=abba5a9c-0fba-4745-8aa1-53011e45a577" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214.77780151367188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section.</td></tr></tbody></table>