> 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/icon-box.md).

# Icon box

**Icon box** is a modular content element that displays an icon alongside a title and optional description. It is commonly used to communicate key features, services, or benefits in a compact and visually structured layout. This component supports icon selection, text alignment, and responsive display settings to ensure consistent presentation across devices.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FmtR2Bv5bwQ9EHMRO7c2U%2Fimage.png?alt=media&amp;token=a90c5dda-e097-45c8-b18f-80085b315a63" 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%2F6RB5gwupcHFFz0FSUYy2%2Fimage.png?alt=media&amp;token=6de27d65-dab3-4a09-8629-c621206c072d" 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>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</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><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></tbody></table>

#### Icon 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%2Fs1qJc4gnXdAadhQMDrHj%2Fimage.png?alt=media&amp;token=48e20870-4edb-4faf-bfcf-de8111bc0891" alt="" width="265"><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td>Setting icon's width</td></tr><tr><td><strong>Position</strong></td><td>Determine logo's position on desktop</td></tr><tr><td><strong>Rounded image</strong></td><td>Change the shape of the icon into circle</td></tr></tbody></table>

#### Content 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%2FOAcSfJUwpDLKB9bX8XZK%2Fimage.png?alt=media&amp;token=311df957-1458-4e70-8e69-2e019051b4d9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Setting the text alignment</td></tr><tr><td><strong>Size</strong></td><td>Setting text size</td></tr></tbody></table>

#### Mobile 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%2FYVcFlDyJtwDhlyGPn5i1%2Fimage.png?alt=media&amp;token=411a5e83-09f9-4235-85ec-0066f32912e1" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel on mobile</strong></td><td>The setting that enable the carousel layout on mobile</td></tr><tr><td><strong>Items per row</strong></td><td>Determine the number of items per row</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%2Fn9cR8LZT3CAfv4J7h3u8%2Fimage.png?alt=media&amp;token=1c708185-72d4-4c92-ba1e-89e5704517bd" 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>

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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F0NiSCLFNJsSG8QF240Rm%2Fimage.png?alt=media&amp;token=056b6488-301d-456f-aa8d-1e64b48fa603" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Select your desired image to display</td></tr><tr><td><strong>Svg icon</strong></td><td>You can use one of our svg icons instead</td></tr><tr><td><strong>Heading, Description</strong></td><td>Customize block content</td></tr></tbody></table>