Estilos para los mensajes de feedback: alerta, error e informativos. Los mensajes de error propios de los formularios se encuentran en la sección de formularios.
Los mensajes informativos permiten destacar información temporal sobre la que no se requiere ninguna acción. Para añadir un mensaje informativo, se añadirá la clase .alert.
<div class="alert" role="alert" aria-atomic="true">
Texto de un mensaje informativo, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>
Los mensajes de error indican que algún procedimiento, sea por parte del usuario o del servidor, ha tenido un resultado inesperado o erróneo. Para añadir una alerta de error, se añadirán las clases .alert y .alert--error.
<div class="alert alert--error" role="alert" aria-atomic="true">
Texto de un mensaje de error, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>
Los mensajes informativos permiten destacar información temporal sobre la que no se requiere ninguna acción. Para añadir un mensaje informativo, se añadirá la clase .alert y .alert--info-alternative.
<div class="alert alert--alternative" role="alert" aria-atomic="true">
Texto de un mensaje de información alternativo, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>
Los mensajes de confirmación alternativos indican que algún procedimiento, sea por parte del usuario o del servidor, ha tenido un resultado esperado. Para añadir una alerta de confirmación alternativa, se añadirán las clases .alert y .alert--success-alternative.
<div class="alert alert--success-alternative" role="alert" aria-atomic="true">
Texto de un mensaje de confirmación alternativo, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>
Los mensajes de advertencia alternativos indican que algún procedimiento, sea por parte del usuario o del servidor, ha tenido un resultado inesperado. Para añadir una alerta de advertencia alternativa, se añadirán las clases .alert y .alert--warning-alternative.
<div class="alert alert--warning-alternative" role="alert" aria-atomic="true">
Texto de un mensaje de advertencia alternativo, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>
Los mensajes de error alternativos indican que algún procedimiento, sea por parte del usuario o del servidor, ha tenido un resultado erroneo. Para añadir una alerta de error alternativa, se añadirán las clases .alert y .alert--error-alternative.
<div class="alert alert--error-alternative" role="alert" aria-atomic="true">
Texto de un mensaje de error alternativo, con <a href="#" title="Texto descriptivo">enlace</a>.
</div>Para añadir un mensaje informativo con icono, se añadirá la clase .alert y .alert--with--icon.
<div class="alert alert--info-alternative alert--with--icon" role="alert" aria-atomic="true">
<span class="icon icon--alert" aria-hidden="true"></span>
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur magnis sodales luctus, sociis eleifend tempor himenaeos torquent vel class quisque <a href="#" title="Texto descriptivo">arcu</a>.
</div>
<div class="alert alert--with--icon" role="alert" aria-atomic="true">
<span class="icon icon--info" aria-hidden="true"></span>
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur magnis sodales luctus, sociis eleifend tempor himenaeos torquent vel class quisque <a href="#" title="Texto descriptivo">arcu</a>.
</div>
<div class="alert alert--with--icon" role="alert" aria-atomic="true">
<span class="icon icon--exclaim" aria-hidden="true"></span>
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur magnis sodales luctus, sociis eleifend tempor himenaeos torquent vel class quisque <a href="#" title="Texto descriptivo">arcu</a>.
</div>
<div class="alert alert--with--icon" role="alert" aria-atomic="true">
<span class="icon icon--alert" aria-hidden="true"></span>
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur magnis sodales luctus, sociis eleifend tempor himenaeos torquent vel class quisque <a href="#" title="Texto descriptivo">arcu</a>.
</div>
Para añadir un mensaje informativo con icono grande, se añadirá la clase .alert y .alert--with--icon-big.
<div class="alert alert--info-alternative alert--with--icon-big" role="alert" aria-atomic="true">
<span class="icon icon--info" aria-hidden="true"></span>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nec ut natoque ultricies posuere est, montes mollis pretium.</p>
<ul>
<li>Neque suscipit habitant aptent integer, nostra fusce suspendisse.</li>
<li>Mi tortor duis id non, consequat fames.</li>
</ul>
</div>
<div class="alert alert--with--icon-big" role="alert" aria-atomic="true">
<span class="icon icon--info" aria-hidden="true"></span>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nec ut natoque ultricies posuere est, montes mollis pretium.</p>
<ul>
<li>Neque suscipit habitant aptent integer, nostra fusce suspendisse.</li>
<li>Mi tortor duis id non, consequat fames.</li>
</ul>
</div>
<div class="alert alert--with--icon-big" role="alert" aria-atomic="true">
<span class="icon icon--info" aria-hidden="true"></span>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nec ut natoque ultricies posuere est, montes mollis pretium.</p>
<ul>
<li>Neque suscipit habitant aptent integer, nostra fusce suspendisse.</li>
<li>Mi tortor duis id non, consequat fames.</li>
</ul>
</div>
<div class="alert alert--with--icon-big" role="alert" aria-atomic="true">
<span class="icon icon--info" aria-hidden="true"></span>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nec ut natoque ultricies posuere est, montes mollis pretium.</p>
<ul>
<li>Neque suscipit habitant aptent integer, nostra fusce suspendisse.</li>
<li>Mi tortor duis id non, consequat fames.</li>
</ul>
</div>