Cards and alert boxes are really useful for making your content stand out.
Why use alert boxes?
If there's a key piece of information that could do with a bit of extra attention, an alert box is a great way of doing that.
Alert boxes look like this
Each alert box has room for a heading and some extra content. But don't go too wild with them - use them sparingly or they'll lose their impact.
Get the code
To put in an alert box, copy and paste the code below into the Source view of your article's content.
<div class="alert">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Why use cards?
These are more subtle and better for organising information on a page.
Cards look like this
Each card has room for a heading and some extra content. But don't go too wild with them - use them sparingly or they'll lose their impact.
Get the code
To put in a card, copy and paste the code below into the Source view of your article's content.
<div class="card">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
You can also pop them in columns
Get the code
To put in multiple cards in two columns, copy and paste the code below into the Source view of your article's content.
<div class="cards-container">
<div class="card">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>