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 when the user can edit or remove a choice.

Black recycling bin

EditRemove

<div class="info">
  <h2 class="info__title">Black recycling bin</h2>
  <div class="info__copy">
    <a href="#">Edit</a>
    <a href="#">Edit</a>
  </div>
</div>

Confirmation

Used to display selected choice to the user when they can only choose one option.

Your selected address

7 Chantry Road, BS8 2QF Bristol

<div class="info info--affirm">...</div>

Reverse confirmation

Add the info--reverse class to put the emphasis on the content instead of the title.

Your selected address

7 Chantry Road, BS8 2QF Bristol

<div class="info info--affirm info--reverse">...</div>

Warning

Use to end the form and warn users why they can't move forward , and show them possible actions they can take instead.

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">
    <h4>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.
    </h4>
  </div>
</div>