Crib sheet

Option 1

Looks like

Please note: Text goes here.

Code

<style>
span.a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  border: none;  
  background-color: #e3ded3;
}
</style>

<span class="a"><strong>Please note:</strong> Text goes here.</span>

Option 2

Looks like

When to use this

Use this when giving in-page "need to know" information like top tips or instructions. It should mostly be used on document pages to avoid being used inconsistently.

For example:

Apply now

Code

<style>
.page-alert {
  background-color: #F2F0EB;
  border-color: #F4364C;
  border-left: 4px solid #522B84;
  position: relative;
  padding-left: 73px;
  color: #493A3B;
  padding-bottom: 10px;
  padding-right: 40px;
  padding-top: 20px;
}

</style>

<!-- Container element -->
<div class="page-alert"><p><strong>Bin collections over Christmas</strong></p>
<p>Please note: Bin collections are delayed this week, due to Christmas.</p></div>

Option 3

Looks like

When to use this

This should be used to highlight topical content, such as announcements. It can be used on homepages or document pages.

Code

<style>
.page-alert2 {
  background-color: #e3ded3;
  border: 2px;
  border-style: solid;
  border-color: #e3ded3;
  border-radius: 5px;
  position: relative;
  color: #493A3B;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

</style>

<!-- Container element -->
<div class="page-alert2"><p><strong>Bin collections over Christmas</strong></p>
<p>Please note: Bin collections are delayed this week, due to Christmas.</p></div>

Option 4

Looks like

When to use this

This can also be used to highlight topical content, such as announcements. It can be used on homepages or document pages and can be used instead of, or as well as, option 3.

Code

<style type="text/css">
.page-alert3 {
background-color: #F2F0EB;
border: 4px solid #522B84;
border-radius: 5px;
position: relative;
color: #493A38;
padding: 20px;
}
</style>

<!-- Container element -->
<div class="page-alert3"><p><strong>Bin collections over Christmas</strong></p>
<p>Please note: Bin collections are delayed this week, due to Christmas.</p></div>