<div class="message message--info">
<p class="message--title"><span>Note:</span> The message goes here</p>
<p>The message goes here</p>
<p>It can have multiple paragraphs</p>
</div>
<div class="message message--{{ name }}">
<p class="message--title"><span>{{ admonition }}</span> The message goes here</p>
<p>The message goes here</p>
<p>It can have multiple paragraphs</p>
</div>
{
"name": "info",
"admonition": "Note:"
}
.message {
border: 1px solid #ddd;
border-radius: 8px;
width: 50vw;
padding: 1.5em;
&.message--info {
background-color: rgba(173, 216, 230, .2);
}
&.message--warning {
background-color: rgba(255, 255, 224, .5);
}
&.message--danger {
background-color: rgba(255, 85, 0, .2);
}
}
.message--title {
font-weight: 700;
margin: 0;
}
Most of the time I want to display a message to the reader that is outside the regular flow of the page content.