Alerts

Alerts help inform the user of actions they have taken, or to warn them of potential issues within their account. Alert messages should be short in nature and a maximum of 140 characters. Our alerts come in several styles depending on the message they need to convey.

Standard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Required .alert
Modifiers .alert-success .alert-warning .alert-danger
States .is-hidden
<div class="alert alert-success">
<p><i class="sg-icon sg-icon-check-circle"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis.<i class="sg-icon sg-icon-x"></i></p>
</div>
<div class="alert alert-warning">
<p><i class="sg-icon sg-icon-warning"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis.<i class="sg-icon sg-icon-x"></i></p>
</div>
<div class="alert alert-danger">
<p><i class="sg-icon sg-icon-warning"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis.<i class="sg-icon sg-icon-x"></i></p>
</div>

Guidelines

  • Text should be complete, punctuated sentences and ≤ 140 characters.
  • Alert messages should be human-readable.
  • Alerts should always be visible regardless of where the user is on the page. See 'hidden/visible' interaction below.
  • If the message requires additional explanation, use inline links to direct the user to the relevant resource.
  • Alerts may be dismissed by the user, but should not disappear on their own.
Don't display machine errors.
Don't place alerts anywhere other than the top of the page.

Notifications

What happened to that email? Putting out fires 🔥 is fast with our new email activity feed!

Unverified accounts are limited to 100 emails per day. Verify your account to send more.

23 days left in your free trial.

Your trial expired. You may still send up to 100 emails per day for testing purposes.

Required .alert
Modifiers .alert-promo .alert-verification .alert-trial .alert-danger
Optional Elements .step .all-steps .btn.btn-small
States .is-hidden
<div class="alert alert-promo">
<p><strong>What happened to that email?</strong> Putting out fires 🔥 is fast with our new email activity feed! <button class="btn btn-small btn-primary">Check it Out</button><i class="sg-icon sg-icon-x"></i></p>
</div>
<div class="alert alert-verification">
<p><strong>Unverified accounts are limited to 100 emails per day. Verify your account to send more.</strong><button class="btn btn-small btn-primary">Verify My Account</button></p>
</div>
<div class="alert alert-verification">
<p class="step">Verify your account</p>
<p><a href="#">Next: Add Two-Factor Authentication</a></p>
<p class="all-steps"><a href="#">View all steps</a></p>
</div>
<div class="alert alert-trial">
<p><i class="sg-icon sg-icon-clock"></i><strong>23 days</strong> left in your free trial. <button class="btn btn-small btn-primary">View Plans &amp; Pricing</button></p>
</div>
<div class="alert alert-danger">
<p><i class="sg-icon sg-icon-warning"></i><strong>Your trial expired.</strong> You may still send up to 100 emails per day for testing purposes.<button class="btn btn-small btn-secondary">Upgrade</button></p>
</div>

Hidden/Visible

Required .alert
Modifiers .alert-success .alert-warning .alert-danger .tiara-offset
States .is-hidden .is-visible
<div class="alert alert-success is-hidden" id="alert-example">
<p><i class="sg-icon sg-icon-check-circle"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis. Lorem ipsum dolor sit amet, consectetur.<i class="sg-icon sg-icon-x"></i></p>
</div>

Beta

During BETA, Automations isn't connected to the Marketing Campaigns offering in your account. Learn more.

Required .alert .alert-beta
<div class="alert alert-beta">
<p>During BETA, Automations isn't connected to the Marketing Campaigns offering in your account. <a href="#">Learn more</a>.</p>
</div>