steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Refine notices

Browse Source
This commit is contained in:
Michael Rose
2016-03-30 21:52:58 -04:00
parent 66d6a70480
commit 4548f70ee5
2 changed files with 27 additions and 6 deletions

20
_posts/2010-02-05-post-notice.md

@ -14,11 +14,23 @@ When using Kramdown `{: .notice}` can be added after a sentence to assign the `.
**Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
{: .notice}
**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.
{: .notice--info}
**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.
{: .notice--warning}
**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.
{: .notice--danger}
**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.
{: .notice--success}
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 %}
### New Site Features
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
@ -28,7 +40,7 @@ Want to wrap several paragraphs or other elements in a notice? Using Liquid to c
```
{% capture notice-2 %}
### New Site Features
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
@ -42,12 +54,12 @@ Or you could skip the capture and stick with straight HTML.
```html
<div class="notice">
<h3>Message</h3>
<h4>Message</h4>
<p>A basic message.</p>
</div>
```
<div class="notice">
<h3>Message</h3>
<h4>Message</h4>
<p>A basic message.</p>
</div>