Warning callout

Use a warning callout to help users identify and understand warning content on the page, even if they do not read the whole page.

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

.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;


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>