Description
Orange color lies between red and yellow on the light spectrum
<div class="o-callout">
<p>Orange color lies between red and yellow on the light spectrum</p>
</div>
Orange color lies between red and yellow on the light spectrum
<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>
Click here to claim a free hat
<div class="o-callout o-callout--color-green o-callout--action">
<p>Click here to claim a free hat</p>
</div>
Impressions
Quantity of notifications shown
Clicks
Traffic from linked notifications
Engagements
Mouse hovers, which pause the animation
Sales
Goal completion value in dollars
<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>
Conversion metrics
Connect Google Analytics to see Conversions & Sales metrics.
Achievements
Take note on your wins. Receive Badges for every milestone.
Real-time updates
Get informed by sending Fomo events to any #channel.
<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 & 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>
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
<div class="o-callout o-callout--color-{color} o-callout--shadow">
<p>Click here to claim a free hat</p>
</div>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
color | Set with .o-callout--color-{color} | See Colors page | String | - | - |
shadow | Throw a shadow | .o-callout--shadow | String | - | - |
action | Show hover effects | .o-callout--action | String | - | - |