hacks-guide-minimal-mistake.../_posts/2010-02-05-post-notice.md

68 lines
2.4 KiB
Markdown
Raw Normal View History

2016-03-04 22:23:59 +01:00
---
title: "Post: Notice"
categories:
- Post Formats
tags:
- Post Formats
- notice
---
2016-03-07 15:51:50 +01:00
2016-03-04 22:23:59 +01:00
A notice displays information that explains nearby content. Often used to call attention to a particular detail.
When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element.
2016-04-06 03:30:25 +02:00
**Changes in Service:** We just updated our [privacy policy](#) here to better service our customers. We recommend reviewing the changes.
2016-03-04 22:23:59 +01:00
{: .notice}
2016-04-06 03:30:25 +02:00
**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.
{: .notice--primary}
2016-04-06 03:30:25 +02:00
**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.
2016-03-31 03:52:58 +02:00
{: .notice--info}
2016-04-06 03:30:25 +02:00
**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.
2016-03-31 03:52:58 +02:00
{: .notice--warning}
2016-04-06 03:30:25 +02:00
**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.
2016-03-31 03:52:58 +02:00
{: .notice--danger}
2016-04-06 03:30:25 +02:00
**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.
2016-03-31 03:52:58 +02:00
{: .notice--success}
2016-03-04 22:23:59 +01:00
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.
```html
{% raw %}{% capture notice-2 %}
2016-03-31 03:52:58 +02:00
#### New Site Features
2016-03-04 22:23:59 +01:00
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}{% endraw %}
<div class="notice">{% raw %}{{ notice-2 | markdownify }}{% endraw %}</div>
```
{% capture notice-2 %}
2016-03-31 03:52:58 +02:00
#### New Site Features
2016-03-04 22:23:59 +01:00
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}
<div class="notice">
{{ notice-2 | markdownify }}
</div>
Or you could skip the capture and stick with straight HTML.
```html
<div class="notice">
2016-03-31 03:52:58 +02:00
<h4>Message</h4>
2016-03-04 22:23:59 +01:00
<p>A basic message.</p>
</div>
```
<div class="notice">
2016-03-31 03:52:58 +02:00
<h4>Message</h4>
2016-03-04 22:23:59 +01:00
<p>A basic message.</p>
</div>