Panel
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ex veritatis sit eos, id iure, qui.
When to use
Use to highlight key information to a user. Can also be used to highlight information that the user entered at a point that rthey can no longer change it—e.g. feedback their email on an order confirmation page.
View in context: Parent names on register, Cost to renew
Developer notes
The heading tag can use a h1, h2, h3, h4 where appropriate and still look as expected.
Content notes
Titles should summarise the content described in copy. You should never begin half a statement which relates to copy below as screen readers may only show a list of page headings.
<div class="panel">
<div class="panel__title">
Lorem ipsum dolor
</div>
<div class="panel__copy">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ex veritatis sit eos, id iure, qui.
</p>
</div>
</div>Panel Affirm
When to use
Use this to highlight key information that the user has entered, at a point that they can still change it.
View in context: Parent names on register
<div class="panel panel--affirm">
<div class="panel__title">
This is a panel
</div>
<div class="panel__copy">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ex veritatis sit eos, id iure, qui.
</div>
</div>Panel Affirm Reverse
When to use
See above
<div class="panel panel--affirm panel--reverse">
<span class="panel__title">
Delivery by
</span>
<span class="panel__copy">
Weds, 15th January between 7am and 6pm
</span>
</div>Panel Affirm Extra
When to use
See above
<div class="panel panel--affirm panel--reverse">
<span class="panel__title">
Your selected address
</span>
<span class="panel__copy">
19 Redland Road, Bristol BS6 5AA
</span>
<a href="#">Change address</a>
</div>Panel 1of2
When to use
See above
<div class="panel panel--affirm panel--reverse panel--1of2">
<div class="panel__title">
Email updated
</div>
<div class="panel__copy">
justine.longnamerson@emailaddress.com
</div>
</div>
<div class="panel panel--affirm panel--reverse panel--2of2">
<div class="panel__title">
and
</div>
<div class="panel__copy">
234 Some Street, Somewhere, Some City, G12 2ND
</div>
</div>Panel Errors
We have a few errors
When to use
Used at the top of form pages to give the user a break down of any issues with they information they entered. The blue links anchor the page down to the specific input field the error relates to.
Developer notes
The heading tag can use a h1, h2, h3, h4 where appropriate and still look as expected.
<div class="panel panel--errors">
<div class="panel__title">
This is a panel
</div>
<div class="panel__copy">
<ul>
<li>Lorem ipsum dolor sit elit.</li>
<li>Lorem ipsum dolor sit elit.</li>
<li>Lorem ipsum dolor sit elit.</li>
</ul>
</div>
</div>Block
Freedom of information
Make a request to see any information we hold on paper or as computer files.
When to use
Used on the home page to navigate to services and their key transactions
<div class="block" data-mh="half">
<h2 class="block__title">
<span class="icon--bcc icon--bcc--foi"></span>
Freedom of information
</h2>
<div class="block__copy">
<p>
Make a request to see any information we hold on paper or as computer files.
</p>
<ul>
<li>
<a href="#">
Submit a freedom of information request
</a>
</li>
</ul>
</div>
</div>Warning
This is a warning about some kind of liability on your part or something like that.
When to use
These appear in the main page flow of a form. They are used to warn the user that an action (or lack of action) could result in some penalty, loss or inconvenience.
View in context: Parent names on register
Developer notes
The triangle icon should be depracated in favour of the exclamation in a circle icon (Unicode: f06a) so that it doens't clash with the icon for errors
<h2 class="info">
<span class="info__icon"></span>
<span class="info__copy">
This is a warning about some kind of liability on your part or something like that.
</span>
</h2>Slab
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
When to use
Used for highlighting information.
<div class="slab">
<div class="slab__title">
Make your next visit easier & quicker
</div>
<div class="slab__copy">
<p>
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
</p>
</div>
</div>Slab Primary
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
When to use
Use the light blue panel to highlight a particular call-to-action on a page. Often used when you want to give a little bit of emphasis to a secondary call-to-action.
View in context: Sign in action in sidebar
<div class="slab slab--primary">
<div class="slab__title">
Make your next visit easier & quicker
</div>
<div class="slab__copy">
<p>
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
</p>
</div>
</div>Slab Outline
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
When to use
Used for highlighting information.
<div class="slab slab--outline">
<div class="slab__title">
Make your next visit easier & quicker
</div>
<div class="slab__copy">
<p>
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
</p>
</div>
</div>Slab White Outline
Give feedback (opens new window) and help improve this service.
It only takes a minute and you won't lose any details.
When to use
Use to highlight significant 'meta' content—e.g. asking for feedback on a page or service.
<div class="slab slab--white slab--outline">
<div class="slab__title">
Make your next visit easier & quicker
</div>
<div class="slab__copy">
<p>
Just fill in 2 more pieces of information about yourself to create an account that will remember all your details next time you come back.
</p>
</div>
</div>Slab Layout
Equalities monitoring
Please help us ensure our services are fair and accessible by answering seven simple questions.
When to use
Used to highlight or differentiate a call-to-action
<div class="slab">
<div class="slablayout--main">
<h3 class="slab__title">
Equalities monitoring
</h3>
<p>
Please help us ensure our services are fair and accessible by answering seven simple questions.
</p>
</div>
<div class="slablayout--side">
<a href="#" class="cta cta--icon cta--primary cta--next">
Get started
</a>
</div>
</div>Additional
When to use
There is currently no usage notes at the moment.
<div class="additional">
<button class="cta cta-link" type="submit">
+ Add another car
</button>
</div>Alert Warning
When to use
There is currently no usage notes at the moment.
<div class="alert alert-warning">
bcc-boilerplate is temporarily unavailable.
</div>Alert Error
When to use
There is currently no usage notes at the moment.
<div class="alert alert-error">
bcc-boilerplate is temporarily unavailable.
</div>