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

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

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-verification .alert-trial .alert-danger
Optional Elements .step .all-steps .btn.btn-small
States .is-hidden

Hidden/Visible

Required .alert
Modifiers .alert-success .alert-warning .alert-danger .tiara-offset
States .is-hidden .is-visible