ux-alert

Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

Read Foundation's alert docs for more details.


Use Cases Manifest Alert round classInfo radius classSecondary classDefaultSuccess radius classWarning round class
    {{#events.uxAlert_3}}
  • {{this}}
  • {{/}}

	{
    "text": "This is an alert - alert that is rounded.",
    "class": "alert round"
}
    {{#events.uxAlert_4}}
  • {{this}}
  • {{/}}

	{
    "text": "This is an info alert with a radius.",
    "class": "info radius"
}
    {{#events.uxAlert_5}}
  • {{this}}
  • {{/}}

	{
    "text": "This is a secondary alert.",
    "class": "secondary"
}
    {{#events.uxAlert_6}}
  • {{this}}
  • {{/}}

	{
    "text": "This is a standard alert."
}
    {{#events.uxAlert_7}}
  • {{this}}
  • {{/}}

	{
    "text": "This is a success alert with a radius.",
    "class": "success radius"
}
    {{#events.uxAlert_8}}
  • {{this}}
  • {{/}}

	{
    "text": "This is a warning alert that is rounded.",
    "class": "warning round"
}

Semantic Data Model
text - The text to display on the alert
class - [success warning info alert secondary] [round radius]