<div class="symbol-text-area">
<div class="symbol-zone">
<p class="custom-rteElement-Exclamation"> </p>
</div>
<div class="symbol-text exclamation">
<p>
<span>If a child is in immediate danger, left alone or missing, you should contact the police directly and/or an ambulance using
<strong>999</strong>.</span>
</p>
</div>
</div>
<div class="symbol-text-area">
<div class="symbol-zone">
<p class="custom-rteElement-Exclamation"> </p>
</div>
<div class="symbol-text exclamation">
<p>
<span>If a child is in immediate danger, left alone or missing, you should contact the police directly and/or an ambulance using
<strong>999</strong>.</span>
</p>
</div>
</div>
/* No context defined for this component. */
/*callout*/
.symbol-text-area {
float: left;
width: 100%;
background-color: $whitesmoke;
padding: 10px 0 0;
margin-bottom: 15px;
.symbol-zone {
float: left;
width: 10%;
}
.symbol-text {
float: left;
width: 80%;
margin-left: 3px;
}
.exclamation p {
font-size: 1.3333em;
padding-bottom: 15px;
display: block;
}
}
p.custom-rteElement-Exclamation {
display: block;
padding: 3px 25%;
background-color: #f4f4f4;
margin-bottom: 10px;
&::before {
color: $brand-primary;
content: "!";
font-family: 'Iskoola Pota';
font-size: 4em;
float: left;
margin-top: -25px;
margin-left: 25%;
}
}
You can use any combination of headings, but they should be in order.
New style taken from http://www3.northamptonshire.gov.uk/councilservices/children-families-education/help-and-protection-for-children/protecting-children-information-for-professionals/Pages/default.aspx
Semantically this could be improved.