> 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/metric-banner.md).

# Metric banner

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FGOX13SnUWN61Bn7sAqfQ%2Fimage.png?alt=media&amp;token=961fa33f-b1c7-4335-b8ad-f8dad611942c" 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%2F0rXViJtR7pF9j17zz0yd%2Fimage.png?alt=media&amp;token=a66dadb9-3784-4328-b5e3-e42ade48aa29" 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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FXUBnRD8da7z7kpZz01uU%2Fimage.png?alt=media&amp;token=9efe9959-7169-4421-9a0b-fb379eec688e" 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>

#### Metric settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FhR31m2KyLQZzvqOMyXEM%2Fimage.png?alt=media&amp;token=b08e1368-4c5a-4c42-a082-40a0504f3116" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable metric animation</strong></td><td>Enable the counting animation while loading the metric.</td></tr><tr><td><strong>Metric font size</strong></td><td>Adjust the font size for the metric</td></tr></tbody></table>

#### Mobile settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F6ayBLmSPjzedpLYjUE7h%2Fimage.png?alt=media&amp;token=de3f92b1-4de9-4daf-b082-c1aac352a249" 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>Enable the carousel/grid layout on mobile</td></tr><tr><td><strong>Items per row</strong></td><td>Define the number of item per line on mobile</td></tr></tbody></table>

#### Section padding

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F8QQSUP9ItcszsI5HKq2w%2Fimage.png?alt=media&amp;token=ec33cbb9-3153-4aaa-8502-a90e5a71a7c0" 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%2FOeSTSSif7QqmYuR6BbgE%2Fimage.png?alt=media&amp;token=690bab2b-e935-401f-9de7-c15448c65f98" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Display a dividing line to separate from the previous section.</td></tr></tbody></table>

### Block settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FjDfmcN3SChyklTTFNDSo%2Fimage.png?alt=media&amp;token=2a74cc2b-2a64-4192-8e81-c3f02c61e067" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Metric end value</strong></td><td>Define the value you want to show</td></tr><tr><td><strong>Metric unit</strong></td><td>Define the metric unit</td></tr><tr><td><strong>Description</strong></td><td>The description of the block</td></tr></tbody></table>