Warning callout
Use this callout for information that:
- is time critical
- could have a significant effect on someone's health
- addresses a common or significant misconception or mistake
How to use Warning Callout
Create a warning callout with the example raw HTML block below. Follow the instruction within the raw HTML code to alter the content. Or you can copy and paste the codes below to the page you are working on.
Warning callout
Give the callout a short, clearly worded heading. Headings help people scan the page for warnings and understand what's relevant to them.
Make the callout concise, specific and self-contained. For example, don't introduce a callout with the words "If this happens...". Explain the circumstances.
Code for Warning call-out
CSS code
Paste the below style code at the top of your HTML page content
<style><!--
.warning-callout {
background-color: #fff9c4;
padding: 20px 40px 20px 40px;
padding-top: 0 !important;
}
.warning-callout h4{
font-size: 14px;
line-height: 1.4;
background-color: #ffeb3b;
color: #000000;
display: inline-block;
margin: 0 -40px 8px;
padding: 16px 32px;
position: relative;
top: -16px;
}
--></style>
Html code
Insert the below html code in your HTML body content
<div class="warning-callout">
<h4><strong>Warning callout - change the text here.</strong></h4>
<p>Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. </p>
</div>
