# Banners

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><strong>Image with badges</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FIR86MRH1G2hHMgJF0xBy%2FFox-BG%20Light%20-%202025-11-17T174606.936.jpg?alt=media&#x26;token=1dfa21c9-742d-459d-8ed3-60de56ecf7d9">Fox-BG Light - 2025-11-17T174606.936.jpg</a></td><td><a href="#image-with-badges">#image-with-badges</a></td></tr><tr><td align="center"><strong>Marquee</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FIpi60fGHNafTNE1A7BJm%2FFox-BG%20Light%20-%202025-11-18T095639.304.jpg?alt=media&#x26;token=370009f1-b3d6-431a-b7c6-388f25256eaa">Fox-BG Light - 2025-11-18T095639.304.jpg</a></td><td><a href="#marquee">#marquee</a></td></tr></tbody></table>

<details>

<summary>Image with badges</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FX47wxH5XPhoMRT7cwPeY%2Fimage.png?alt=media&#x26;token=89b75bff-5ae4-4f5b-b419-96b1cb558007" alt=""><figcaption><p>An example of an Image with badges block and a Group of Text block</p></figcaption></figure>

The **Image with badges** block allows you to display an image along with customizable badges. The badges can be used to highlight key information, such as promotional tags, offers, or product features.

#### **⚙️ Block settings**

<table><thead><tr><th width="275.333251953125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload the image that you want to display in the block. </td></tr><tr><td><strong>Image ratio</strong></td><td>Choose the aspect ratio of the image on desktop and mobile view separately.</td></tr><tr><td><strong>Rounded image</strong></td><td>Enable to make the image corners rounded.</td></tr><tr><td><strong>Border</strong></td><td>Choose whether to apply borders around the image.</td></tr></tbody></table>

#### **🏷️ Badge settings**

This block includes **multiple badges** that can be added to the image.&#x20;

<table><thead><tr><th width="275.333251953125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Shape</strong></td><td><p>Choose the shape of the badge. Options include:</p><ul><li>None</li><li>Petal star</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FDExWOrXs31UiOvetVQuw%2Fimage.png?alt=media&#x26;token=577f0396-f3cf-4f31-bc93-36b515318cfa" alt=""><figcaption></figcaption></figure></div><ul><li>Multi-point star</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F9eirKOusGzkCdu33PMpO%2Fimage.png?alt=media&#x26;token=45bfb27c-6178-4159-b4ba-ce1f93f28798" alt=""><figcaption></figcaption></figure></div><ul><li>Circle</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6Ymb8UsAn62wzBgEk9oV%2Fimage.png?alt=media&#x26;token=ea348429-ddb8-4947-baca-d22f49d472a0" alt=""><figcaption></figcaption></figure></div><ul><li>Scalloped circle</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fw3lOJbxIWVkczHvneqT7%2Fimage.png?alt=media&#x26;token=cf1a5830-b9a5-4c09-b72c-0bdbaaee71e8" alt=""><figcaption></figcaption></figure></div><ul><li>Custom: Upload a custom image to use as the badge shape.</li></ul></td></tr><tr><td><strong>Background color</strong></td><td>Choose a background color for the badge.</td></tr><tr><td><strong>Rotate</strong></td><td>Set the rotation angle of the badge for a tilted effect.</td></tr><tr><td><strong>Width</strong></td><td>Set the width of the badge. Adjust this depending on how prominent you want the badge to be.</td></tr><tr><td><strong>Offset (Left)</strong></td><td>Adjust the badge’s left position relative to the image.</td></tr><tr><td><strong>Offset (Top)</strong></td><td>Adjust the badge’s top position relative to the image.</td></tr><tr><td><strong>Text</strong></td><td>Set the text for the badge. This can be a tag, a price, a label like "New", or any other text you want to feature.</td></tr><tr><td><strong>Text preset</strong></td><td>Choose the font style for the text in the badge. <br><em>Learn more:</em> <a data-mention href="../../theme-settings/typography#text-presets">#text-presets</a></td></tr></tbody></table>

#### **💡 Best practices**

* Use **1:1 (square)** for logos or any content where equal height and width are needed. The **16:9 (landscape)** ratio is ideal for promotional banners or hero images.
* Badges can be used to highlight limited-time offers, product features, or special tags. Make sure the **text** is short and impactful.
* Adjust the **offset** to ensure badges don’t overlap with the key visual elements of the image. Try to position badges near the corners or areas that are less busy.

</details>

<details>

<summary>Marquee</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F4edltr2VmrHd2Z9jT7mm%2Fimage.png?alt=media&#x26;token=9dc38697-76dc-44e9-9ed9-05ce654643c6" alt=""><figcaption></figcaption></figure>

The **Marquee** block is a dynamic feature that allows you to create a scrolling or moving content effect across your webpage. It’s perfect for highlighting important messages, announcements, or product features in an attention-grabbing way.

{% hint style="warning" %}
The Marquee block is a [private block](https://docs.foxecom.com/pebble-theme/overview#private-blocks), meaning it is restricted to certain sections.
{% endhint %}

#### **⚙️ Block settings**

<table><thead><tr><th width="275.3333740234375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td><p>Set the direction of the marquee. Choose between:</p><ul><li>Forward</li><li>Reverse</li></ul></td></tr><tr><td><strong>Speed</strong></td><td>Adjust the scrolling speed of the marquee.</td></tr><tr><td><strong>Rotate (Angle)</strong></td><td>Set the rotation angle of the marquee content (from -5° to 5°). This adds a slight tilt to the marquee items.</td></tr><tr><td><strong>Pause on hover</strong></td><td>Enable this setting to make the marquee content stop scrolling when the user hovers over it.</td></tr><tr><td><strong>Show edge fade</strong></td><td>Enable this setting to add a fading effect at the edges of the marquee content.</td></tr><tr><td><strong>Enable parallax</strong></td><td>Enable this setting to apply a parallax effect to the marquee content.</td></tr></tbody></table>

{% hint style="success" %}
Within the Marquee block, you can add nested blocks, including:

* [#text](https://docs.foxecom.com/pebble-theme/basic#text "mention")
* [#button](https://docs.foxecom.com/pebble-theme/basic#button "mention")
* [#icon](https://docs.foxecom.com/pebble-theme/basic#icon "mention")
* Icon with text
  {% endhint %}

#### **💡 Best practices**

* Since the marquee moves continuously, keep the text short so it doesn’t overwhelm the user. A short call to action, like "Hurry, limited time offer!" or "Check out our latest collection!" works best.
* Enabling **Parallax** adds depth, but overuse can make the effect too distracting. Similarly, use **Pause on Hover** when you want to keep the content static for better visibility on hover.

</details>