A notice displays information that explains nearby content. Often used to call attention to a particular detail.
When using Kramdown {: .notices} can be added after a sentence to assign the .notices to the <p></p> element.
Code:
**Changes in Service:** We just updated our [privacy policy](#) here to better service our customers. We recommend reviewing the changes.
{: .notices .warning}
Results:
Changes in Service: We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
More example:
Primary Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Primary Notice with code block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<html>
<body>Some body.<body>
</html>
Info Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Warning Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Danger Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Error Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Success Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.
{% capture notice-2 %}
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}
<div class="notices">{{ notice-2 | markdownify }}</div>
New Site Features - H4
- You can now have cover images on blog pages
- Drafts will now auto-save while writing
Or you could skip the capture and stick with straight HTML.
<div class="notices">
<h4>Message - H4</h4>
<p>A basic message.</p>
</div>
Message - H4
A basic message.
Testing Hn title tags inside notices.
Test h1 second title
A basic message.
Test h2 second title
A basic message.
Test h3 second title
A basic message.
Test h4 second title
A basic message.
Test h5 second title
A basic message.
Test h6 second title
A basic message.
