<div class="status-message status-info">
<h3 class="status-message-title">Info message</h3>
<p>This is a generic informative message.</p>
<svg class="icon info-icon" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#status-info" />
</svg>
</div>
<div class="status-message status-{{type}}">
<h3 class="status-message-title">{{title}}</h3>
{{#> @partial-block}}
<p>{{message}}</p>
{{/ @partial-block}}
{{> @svg modifier="info-icon"}}
{{#if closable}}
{{> @button modifier="close-button" icon="close"}}
{{/if}}
</div>
{
"type": "info",
"title": "Info message",
"icon": "status-info",
"message": "This is a generic informative message."
}
/**
* Status messages
*/
@media screen {
.status-message {
margin: 1rem 0;
padding: 1rem 1rem 1rem 2.5rem;
border-radius: 3px;
position: relative;
box-shadow: var(--status-message-shadow);
}
.status-message a {
color: currentColor;
}
.status-message-title {
margin: 0 0 1em;
font-size: 1em;
font-weight: 600;
display: flex;
align-items: center;
}
.status-message .icon.info-icon {
position: absolute;
top: 0.8rem;
left: 0.7rem;
height: 1.6em;
width: 1.6em;
}
.status-message button.close-button {
margin: 0;
padding: 0;
position: absolute;
top: 0.25rem;
right: 0.25rem;
border: 0;
background-color: transparent;
color: currentColor;
box-shadow: none;
}
.status-message .close-button .icon {
fill: currentColor;
}
/* Info */
.status-info {
color: var(--status-info);
background-color: var(--status-info-bg);
}
/* Error */
.status-error {
color: var(--status-error);
background-color: var(--status-error-bg);
}
/* Warning */
.status-warning {
color: var(--status-warning);
background-color: var(--status-warning-bg);
}
/* Success */
.status-success {
color: var(--status-success);
background-color: var(--status-success-bg);
}
}
A block-level component with the ability to display color-coded messages to the user. Also supports displaying a close button to discard the message.