--- title: Alerts layout: component.html ---

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.

*** {{> examples_alert_basic}} ***

Basic

You can create an alert box using minimal markup.

HTML

{{> examples_alert_basic_rendered}}

Rendered HTML

{{> examples_alert_basic}}

Advanced

You can add more classes to your alert box to change its appearance.

HTML

{{#markdown}} ```html
This is a success alert with a radius. ×
This is a warning alert that is rounded. ×
This is an info alert with a radius. ×
This is an alert - alert that is rounded. ×
This is a secondary alert. ×
``` {{/markdown}}

Rendered HTML

This is a success alert with a radius. ×
This is a warning alert that is rounded. ×
This is an info alert with a radius. ×
This is an alert - alert that is rounded. ×
This is a secondary alert. ×
*** ## Accessibility To make your alerts conform to accessibility standards, use the markup below, which adds a handful of ARIA attributes to the alert container, and uses the `