<div class="messageBox messageBox--danger">
This is a danger message.
</div>
<div class="messageBox messageBox--warning">
This is a warning message.
</div>
<div class="messageBox messageBox--info">
This is an info message.
</div>
.messageBox {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 1.5em;
border: 5px solid currentColor;
padding: 1em;
text-align: center;
margin-bottom: 2em;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
width: 3.25em;
height: 3.25em;
background-color: currentColor;
top: 0;
left: 0;
}
}
.messageBox--danger {
color: red;
}
.messageBox--warning {
color: darkgoldenrod;
}
.messageBox--info {
color: black;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.