> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Callout banner

> Highlight promotional campaigns and time-sensitive offers with countdown timers

The Callout banner section creates attention-grabbing banners for promotional campaigns, product launches, or time-sensitive announcements. It combines compelling visuals with countdown timers to create urgency and drive conversions. Use this section when you need to spotlight a single offer or campaign with maximum visual impact.

## What this section controls

This section controls promotional banners with the following capabilities:

* Optional background images for desktop and mobile
* Countdown timer with customizable end date and timezone
* Dual action options (button or newsletter form)
* Section heading and text with customizable sizes
* Image layout toggle (with/without images)
* Button with three style options (Filled, Outlined, Text)
* Color scheme, width, and spacing controls

## Section settings

<AccordionGroup>
  <Accordion title="Layout">
    Choose how the banner displays images:

    * **Image** — Display the banner with a background image or featured image
    * **Image none** (default) — Display banner without images, text-only layout
  </Accordion>

  <Accordion title="Banner images">
    **Image** — Upload the main banner image displayed on desktop devices

    **Mobile image** — Upload a separate image optimized for mobile devices. When set, this image replaces the main image on mobile screens for better visual presentation.
  </Accordion>

  <Accordion title="Content">
    **Heading** — Add the main banner message with rich text support for bold, italic, and links. Default: "Spring sale"

    **Heading size** — Control the heading size with options from XS to XL (default: XL)

    **Text** — Add supporting descriptive text below the heading with rich text formatting. Default: "50% Off Everything for a limited time only"
  </Accordion>

  <Accordion title="Action preference">
    Choose the primary interaction type for the banner:

    **Button** (default) — Display a call-to-action button that links to a destination

    **Newsletter form** — Display an email signup form for collecting subscriber emails

    This setting determines which action element appears in the banner.
  </Accordion>

  <Accordion title="Button settings">
    Configure the call-to-action button when "Button" is selected as the action preference:

    **Button text** — The clickable button label (default: "Shop sale")

    **Button URL** — Destination link for the button (default: /collections)

    **Button style** — Choose the visual appearance:

    * **Filled** (default) — Solid background button
    * **Outlined** — Border-only button
    * **Link** — Text-style link button
  </Accordion>

  <Accordion title="Newsletter settings">
    Configure the email signup form when "Newsletter form" is selected as the action preference:

    **Newsletter button label** — Text for the submit button (default: "Submit")

    **Success message** — Message displayed after successful email submission (default: "Thanks for signing up!")
  </Accordion>
</AccordionGroup>

## Countdown timer

Create urgency with an integrated countdown timer for limited-time campaigns.

<AccordionGroup>
  <Accordion title="Timer end date">
    Set the exact date and time when the countdown ends:

    **Year** — Enter the target year (default: 2026)

    **Month** — Select from January to December (default: January)

    **Day** — Choose day 1-31 (default: 1)

    **Hour** — Set hour 0-23 in 24-hour format (default: 0)

    **Minute** — Set minute 0-59 (default: 0)
  </Accordion>

  <Accordion title="Timer extend">
    Automatically extend the timer by a specified number of days after it ends. Range: 0-30 days (default: 0).

    This is useful for evergreen campaigns that repeat on a rolling cycle. When set to a value greater than 0, the timer automatically resets to that many days in the future when it reaches zero.
  </Accordion>

  <Accordion title="Timer end message">
    Message displayed to users when the countdown reaches zero (default: "Sale has ended"). Supports rich text formatting.
  </Accordion>

  <Accordion title="Show borders">
    Enable decorative borders around the countdown timer segments for visual separation (disabled by default).
  </Accordion>
</AccordionGroup>

## Timer display settings

Control which time units appear in the countdown timer.

<AccordionGroup>
  <Accordion title="Time unit visibility">
    Toggle the display of individual time components:

    **Show timer days** — Display the days remaining (enabled by default)

    **Show timer hours** — Display the hours remaining (enabled by default)

    **Show timer minutes** — Display the minutes remaining (enabled by default)

    **Show timer seconds** — Display the seconds remaining (enabled by default)

    Disable units for shorter campaigns or cleaner presentations. For example, hide days for a flash sale lasting only hours.
  </Accordion>
</AccordionGroup>

## Section styling

<AccordionGroup>
  <Accordion title="Section width">
    Choose the container width:

    * **Page width** (default) — Standard container width
    * **Fluid** — Wider, edge-to-edge within padding
  </Accordion>

  <Accordion title="Color scheme">
    Select the color scheme for the banner section (default: scheme-1). The color scheme controls background, text, and button colors.
  </Accordion>

  <Accordion title="Spacing">
    Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL). Default is M for both top and bottom.
  </Accordion>

  <Accordion title="Section border">
    Add decorative borders:

    * **None** (default) — No borders
    * **Top** — Border above the section
    * **Bottom** — Border below the section
    * **Both** — Borders above and below
  </Accordion>
</AccordionGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Clear messaging" icon="message">
    Keep the heading concise and action-oriented. State the value proposition clearly within 5-8 words.
  </Card>

  <Card title="Appropriate timing" icon="clock">
    Set realistic countdown timers that align with actual campaign end dates. Avoid extending timers indefinitely as it erodes trust.
  </Card>

  <Card title="Mobile optimization" icon="mobile">
    Use the mobile image setting to provide appropriately-sized images that load quickly and look great on small screens.
  </Card>

  <Card title="Visual hierarchy" icon="layer-group">
    Use larger heading sizes and contrasting colors to ensure the banner stands out without overwhelming other content.
  </Card>

  <Card title="Action clarity" icon="hand-pointer">
    Choose one clear call-to-action. Use the button for direct linking or newsletter form for list building, not both.
  </Card>

  <Card title="Timer relevance" icon="hourglass">
    Only show timer units relevant to your campaign duration. Hide days for hourly flash sales, hide seconds for week-long campaigns.
  </Card>
</CardGroup>

## Use cases

* **Flash sales** — Promote limited-time discounts with countdown timers to create urgency
* **Product launches** — Build anticipation for upcoming product releases with countdown to launch date
* **Seasonal campaigns** — Highlight holiday sales, seasonal collections, or special events
* **Email list building** — Use newsletter form to grow subscriber lists during promotional periods
* **Collection promotions** — Drive traffic to specific collections with attractive visuals and clear CTAs
* **Limited inventory** — Communicate scarcity and urgency for high-demand products
* **Event announcements** — Promote webinars, sales events, or in-store happenings
* **Free shipping offers** — Highlight shipping promotions with clear end dates