> 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/scrolling-card.md).

# Scrolling card

**Scrolling text** on a website captures attention, highlights promotions, delivers breaking news, optimizes space, engages users, enhances aesthetics, and facilitates rapid information dissemination.

### Section settings

#### General settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FFYoCgZ7TpwUQhXMA8luP%2Fimage.png?alt=media&amp;token=11000bad-9e29-443e-a17f-8a97f98cdd3c" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><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

<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>

#### Content settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FyHuwJWAdpSXBZhYgzHx8%2Fimage.png?alt=media&amp;token=4a8261f4-9f9f-4f6a-b58a-96a0c8d9ac67" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td><p>Font size text customization</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Uppercase</strong></td><td>When you enable uppercase, text also be displayed in all uppercase letters.</td></tr><tr><td><strong>Image corner radius</strong></td><td>Adjust the roundness of the images.</td></tr></tbody></table>

#### Section padding settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FX7sx84nVxlIhbrHYPgdM%2Fimage.png?alt=media&amp;token=3d7edb18-b7e4-42fc-8661-7675d0ee93d7" 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>

### Block settings

#### Text

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FnqrS2HAa6tu2xYnuWaBs%2Fimage.png?alt=media&amp;token=d217d3e2-3cfa-4690-8d4f-dcff9adfe64c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="217">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td>Customize block content</td></tr><tr><td><strong>Link</strong></td><td>The link URL you want to add</td></tr></tbody></table>

#### Icon

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FKQTMnIDyIpwdfvq5E0Uw%2Fimage.png?alt=media&amp;token=2819addb-491f-4853-ab90-8ce925e00561" alt="" width="281"><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Link</strong></td><td>The link URL you want to add</td></tr><tr><td><strong>Open link in new tab</strong></td><td>Decide to open the URL in a new tab</td></tr><tr><td><strong>Image</strong></td><td>Upload desired image</td></tr><tr><td><strong>Svg icon</strong></td><td>Choose an icon to show along with the content</td></tr><tr><td><strong>Width</strong></td><td>Customize the size of the image</td></tr><tr><td><strong>Mobile - Width</strong></td><td>Controls the width of the element when viewed on mobile devices.</td></tr></tbody></table>