Callout

HTML

Description

Basic

Orange color lies between red and yellow on the light spectrum

HTML
    <div class="callout">
  <p>Orange color lies between red and yellow on the light spectrum</p>
</div>
  

With a shadow

Orange color lies between red and yellow on the light spectrum

HTML
    <div class="callout callout--color-white callout--shadow">
  <p>Orange color lies between red and yellow on the light spectrum</p>
</div>
  

With an action

Click here to claim a free hat

HTML
    <div class="callout callout--color-green callout--action">
  <p>Click here to claim a free hat</p>
</div>
  

As stats

28K

Impressions
Quantity of notifications shown

285

Clicks
Traffic from linked notifications

1106

Engagements
Mouse hovers, which pause the animation

$724

Sales
Goal completion value in dollars

HTML
    <div class="grid">
  <div class="col-3">
    <div class="callout">
      <h1>28K</h1>
      <p>
        <strong>Impressions</strong><br>
        Quantity of notifications shown
      </p>
    </div>
  </div>
  <div class="col-3">
    <div class="callout">
      <h1>285</h1>
      <p>
        <strong>Clicks</strong><br>
        Traffic from linked notifications
      </p>
    </div>
  </div>
  <div class="col-3">
    <div class="callout">
      <h1>1106</h1>
      <p>
        <strong>Engagements</strong><br>
        Mouse hovers, which pause the animation
      </p>
    </div>
  </div>
  <div class="col-3">
    <div class="callout">
      <h1>$724</h1>
      <p>
        <strong>Sales</strong><br>
        Goal completion value in dollars
      </p>
    </div>
  </div>
</div>
  

With an image

Callout #1

Conversion metrics
Connect Google Analytics to see Conversions & Sales metrics.

Callout #3

Achievements
Take note on your wins. Receive Badges for every milestone.

Callout #4

Real-time updates
Get informed by sending Fomo events to any #channel.

HTML
    <div class="grid">
  <div class="col-3">
    <div class="callout callout--color-primary callout--action">
      <div class="callout__image"><img src="https://fomo.com/static/images/app/dashboard/google-analytics.svg" alt="Callout #1"></div>
      <p><strong>Conversion metrics</strong><br>
        Connect Google Analytics to see Conversions &amp; Sales metrics.
      </p>
    </div>
  </div>
  <div class="col-3">
    <div class="callout callout callout--color-primary callout--action">
      <div class="callout__image"><img src="https://fomo.com/static/images/app/dashboard/badges.svg" alt="Callout #3"></div>
      <p><strong>Achievements</strong><br>
        Take note on your wins. Receive Badges for every milestone.
      </p>
    </div>
  </div>
  <div class="col-3">
    <div class="callout callout callout--color-primary callout--action">
      <div class="callout__image"><img src="https://fomo.com/static/images/app/dashboard/slack.svg" alt="Callout #4"></div>
      <p><strong>Real-time updates</strong><br>
        Get informed by sending Fomo events to any #channel.
      </p>
    </div>
  </div>
</div>
  

Colors

  • Click here to claim a free hat

  • Click here to claim a free hat

  • Click here to claim a free hat

  • Click here to claim a free hat

  • Click here to claim a free hat

HTML
    <div class="callout callout--color-{color} callout--shadow">
  <p>Click here to claim a free hat</p>
</div>
  

Usage

Attribute Description Possible values Type Required Default
color Set with .callout--color-{color} See Colors page String - -
shadow Throw a shadow .callout--shadow String - -
action Show hover effects .callout--action String - -