Use the status message to inform users, give feedback, give advice, help them or confirm an action or a status.
Status messages are mostly used in the context of a form as a feedback mechanism, but they can also be used outside the context of forms.
There are four types of status messages:
A info status message is used to provide general information or help to the user. The message should have enough information to help the user understand the message, the purpose of the message and to be clear, but should be as short as possible.
A warning status message is used to show a warning to the user. The message should be clear and helpful. Give the user constructive advice on how to prevent problems.
An error status message is used to show an error to the user. The message should be clear and helpful. Give the user constructive advice on how to fix the problem. When used in the context of a form or a wizard, make it easy for users to correct the error by preserving as much of the content as possible.
A success status message is used to provide information about an action or a status that is positive, a success. The message should have enough information to help the user understand the message, the purpose of the message and to be clear, but should be as short as possible.
For more information about the usage of the status message component in the context of a form and form validation, see the form component documentation.
<div class="messages {{ modifier }}" role="alert" aria-atomic="true">
{% if modifier == 'messages--status' %}
<h2 class="visually-hidden">{{ 'Status' }}</h2>
{% endif %}
<p>{{ text }}</p>
</div>
<div class="messages messages--info" role="alert" aria-atomic="true">
<p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed <a href="#">vitae aliquet mauris</a>. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
</div>
{
"text": "Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed <a href=\"#\">vitae aliquet mauris</a>. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.",
"modifier": "messages--info"
}
%messages,
.messages {
@include icon('info-circle', before);
@include theme('color', 'color-zero', 'status-message-color');
@include theme('background-color', 'color-info-light', 'info-message-background');
@include theme('border-color', 'color-info', 'info-message-icon-color');
$status-message-icon-size: 40px;
position: relative;
flex-direction: column;
max-width: 970px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 20px;
padding: 100px 40px 40px;
border-bottom: 3px solid;
font-size: .9rem;
@include phablet {
flex-direction: row;
padding: 60px 60px 60px 125px;
}
&::before {
@include theme('color', 'color-info', 'info-message-icon-color');
position: absolute;
top: 40px;
left: 40px;
width: calc($status-message-icon-size + 20px);
padding-bottom: 20px;
font-size: $status-message-icon-size;
line-height: $status-message-icon-size;
text-align: left;
@include phablet {
top: 60px;
left: 60px;
padding-right: 20px;
}
}
&--status {
@include icon('checkmark-circle', before);
@include theme('background-color', 'color-success-light', 'success-message-background');
@include theme('border-color', 'color-success', 'success-message-icon-color');
&::before {
@include theme('color', 'color-success', 'success-message-icon-color');
}
a {
@include link-background('color-zero', 'color-success-light--darken-1');
}
}
&--error {
@include icon('cross-circle', before);
@include theme('background-color', 'color-error-light', 'error-message-background');
@include theme('border-color', 'color-error', 'error-message-icon-color');
&::before {
@include theme('color', 'color-error', 'error-message-icon-color');
}
a {
@include link-background('color-zero', 'color-error-light--darken-1');
}
}
&--warning {
@include icon('exclamation-circle', before);
@include theme('background-color', 'color-warning-light', 'warning-message-background');
@include theme('border-color', 'color-warning', 'warning-message-icon-color');
&::before {
@include theme('color', 'color-warning', 'warning-message-icon-color');
}
a {
@include link-background('color-zero', 'color-warning-light--darken-1');
}
}
> p {
&:last-child {
margin: 0;
}
}
a {
@include link-background('color-zero', 'color-info-light--darken-1');
@include theme('border-color', 'color-zero');
@include theme('color', 'color-zero');
&:hover {
@include theme('color', 'color-zero');
}
}
}