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

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

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

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

    <div class="grid">
  <div class="col-3">
    <div class="o-callout o-callout--color-primary o-callout--action">
      <div class="o-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="o-callout o-callout--color-primary o-callout--action">
      <div class="o-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="o-callout o-callout--color-primary o-callout--action">
      <div class="o-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>
  

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