Skip to main content

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.

Your reference
CA000123456
<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.

Your reference
CA000123456
<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.

Your container
Black recycling bin
Edit
<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>

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.

Your selected address
7 Chantry Road Bristol BS8 2QF
<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.

Your selected address
7 Chantry Road Bristol BS8 2QF
<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.

Your selected address
7 Chantry Road Bristol BS8 2QF
Change address
<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.
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 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.

Central library
Central library will be closing at 4pm on Monday 29 August.
<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>