Panel
Use panels to highlight information to users.
Don't use colour alone to convey meaning. Information conveyed with colour must also be communicated textually to be effective.
Information
Use an information panel to highlight information to a user. It can also be used to playback information a user has entered, away from where they’ve entered it, such as on a confirmation screen or user email.
<div class="info">
<div class="info__title">Your reference</div>
<div class="info__copy">CA000123456</div>
</div>
Reverse information
Use when you want to highlight the information the user has entered or the main body of the information you’re displaying.
<div class="info info--reverse">
<div class="info__title">Your reference</div>
<div class="info__copy">CA000123456</div>
</div>
Information extra
Use when you want to allow users to change information they’ve entered.
<div class="info info--reverse">
<div class="info__title">Your container</div>
<div class="info__copy">Black recycling box</div>
<a href="#">Edit</a>
</div>
Key data
Use a key data panel to highlight data to a user. For example, an amount of money or a reference number. Support the data with contextual information. For example, “Your reference:”
<div class="key-data">
<div class="key-data__title">Your reference:</div>
<div class="key-data__copy">CAS-2544175-F2N6C5</div>
<div class="key-data__footer">
You can track your collection in the Citizen Portal account.
</div>
</div>
Confirmation
Use a confirmation panel to playback information that a user has entered, such as their address, near to or inline with where they entered it. It can also be used to highlight an action the user needs to take based on information they’ve entered. For example, telling them they need to fill in a certain form.
<div class="info info--affirm">
<div class="info__title">Your selected address</div>
<div class="info__copy">7 Chantry Road Bristol BS8 2QF</div>
</div>
Reverse confirmation
Use when you want to highlight the information the user has entered or the action the user needs to take.
<div class="info info--affirm info--reverse">
<div class="info__title">Your selected address</div>
<div class="info__copy">7 Chantry Road Bristol BS8 2QF</div>
</div>
Confirmation extra
Use when you want to allow users to change information they’ve entered.
<div class="info info--affirm info--reverse">
<div class="info__title">Your selected address</div>
<div class="info__copy">7 Chantry Road Bristol BS8 2QF</div>
<a href="#">Change address</a>
</div>
Warning
Use a warning panel to highlight critical information to a user, such as an:
- action the user needs to take urgently, such as calling 999.
- issue with a form that means the user can’t continue, include information about why they can’t continue and what they can do instead.
- action or lack of action that could result in them incurring a penalty, loss or inconvenience.
<div class="warning">
<i class="warning__icon bcc-font_alert"></i>
<div class="warning__copy">
You can't report a missed collection because this isn't a residential
property. Call us on 0117 922 2100 if you think it is a residential
property.
</div>
</div>
Slate
Use a slate panel to highlight information to the user. For example, a change in library opening hours or a change in a process.
<div class="slate">
<div class="slate__title">Central library</div>
<div class="slate__copy">
Central library will be closing at 4pm on Monday 29 August.
</div>
</div>
Slate primary
Use occasionally to give more emphasis to a piece of information or call to action.
<div class="slate slate--primary">
<div class="slate__title">
Create an account to make your next visit quicker and easier
</div>
<div class="slate__copy">
Set a password to create an account that will remember all your details
next time you come back.
</div>
</div>
Slate primary without title
Use occasionally to give more emphasis to a piece of information or call to action when the message does not require a title.
<div class="slate slate--primary">
<div class="slate__copy">
You can report your containers as missed for our records, but we won’t
come back because your collections were more than one working day ago.
You need to tell us by 5pm the next day.
</div>
</div>
Slate white with outline
Use to highlight information outside the main flow. For example, a link at the bottom of a page for the user to give feedback on a form.
<div class="slate slate--white slate--outline">
<div class="slate__title">Give us feedback on this new service</div>
<div class="slate__copy">
Give feedback and help improve this service. It only takes a minute and
you won't lose any details.
</div>
</div>