Message Strip
Message Strip provide messages within the application that are color-coded to emphasize the level of urgency.
For Message Strip placement guidelines within the application, see Application Layout page and Application Message Strip overlay Demo Page
Default Message Strip
The Message Strip provides information that is useful and relevant, but not critical. It can also provide feedback that an action has been executed. In most cases, the user should be able to dismiss the Message Strip so include the modifier class fd-message-strip--dismissible and include the close button.
<div class="fd-message-strip fd-message-strip--dismissible" role="alert" id="ZvPBg609" >
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et mattis erat vel aliquet in sem urna et sagittis diam in vehicula. <a href="#" class="fd-link">Learn More</a>
</p>
</div>
<br>Information
Add the modifier class fd-message-strip--information for Information Message Strip.
<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert" id="JwPcf464" >
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="JwPcf464" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>
</p>
</div>
<br>Success
Add the modifier class fd-message-strip--success for Success Message Strip.
<div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible" role="alert" id="ulr5z216">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="ulr5z216" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>Warning
The Message Strip warns of potential issues, but the user can still continue. The user will need to dismiss the Message Strip.
Add the modifier class fd-message-strip--warning for Warning Message Strip.
<div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible" role="alert" id="fwYq4606">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="fwYq4606" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>Error
This Message Strip is triggered after the user entered data incorrectly or a system error has occurred. It should interrupt the user. A final action such as Submit cannot be carried out until the user has rectified the error. The user will need to dismiss the Message Strip.
Add the modifier class fd-message-strip--error for Error Message Strip.
<div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="SsoiW591">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>No Icons
Add the modifier class fd-message-strip--no-icon to render Message Strip without any icon
<div class="fd-message-strip fd-message-strip--information fd-message-strip--no-icon fd-message-strip--dismissible"
role="alert" id="SsoiW591">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>
<br />
<div class="fd-message-strip fd-message-strip--success fd-message-strip--no-icon fd-message-strip--dismissible"
role="alert" id="SsoiW591">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>
<br />
<div class="fd-message-strip fd-message-strip--warning fd-message-strip--no-icon fd-message-strip--dismissible"
role="alert" id="SsoiW591">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>
<br />
<div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon fd-message-strip--dismissible"
role="alert" id="SsoiW591">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
<p class="fd-message-strip__text">
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</p>
</div>Right to left support
If right to left text direction is provided, the dismiss button moves to left side.
<div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="BQ6WP516" dir="rtl">
<button class="fd-button fd-button--light fd-button--compact fd-message-strip__close" aria-controls="BQ6WP516" aria-label="Close"></button>
<p class="fd-message-strip__text">
حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانيأسي.
</p>
</div>