Notice block
Notice blocks are used to draw attention to certain information and to make it stand out from the main content.
How to use this component
Notices should be used at the top of the page when we need to highlight some important information.
We usually use these in regards to important changes to service areas and should be relevant to the current pages content.
Code Resource
<div class="ms-rteElement-Callout1">This is some important information that needs to be distinguished from the main content. <br/><br/> Content can be over multiple lines.</div>.ms-rteElement-Callout1 {
display: block;
width: 99.5%;
float: none;
margin: 15px 0px 40px;
padding: 40px;
font-size: 16px;
text-align: left;
color: #000;
background-color: #f7f7f7;
overflow: hidden;
border: 1px solid #bdbdbd!important;
border-radius: none;
-webkit-box-shadow: 1px 1px 2px 0px rgba(209,209,209,0.33);
-moz-box-shadow: 1px 1px 2px 0px rgba(209,209,209,0.33);
box-shadow: 1px 1px 2px 0px rgba(209,209,209,0.33);
position: relative;
border-radius: 6px;
}
.ms-rteElement-Callout1:before {
content: "\f058";
color: #e0e0e0;
float: left;
margin-right: -30px;
font-family: "Font Awesome 5 Pro";
font-weight: 400;
font-size: 7em;
height: 30px;
position: absolute;
left: -23px;
top: 15px;
opacity: 0.4;
}
Working Example
This is some important information that needs to be distinguished from the main content.
Content can be over multiple lines.
Content can be over multiple lines.