Summary list

Use the Summary list component to summarise information for a user.

<dl class="cads-summary-list">
  <div class="cads-summary-list__group">
    <dt class="cads-summary-list__name">Salary</dt>
    <dd class="cads-summary-list__value">£26,000</dd>
  </div>
  <div class="cads-summary-list__group">
    <dt class="cads-summary-list__name">Hours per week</dt>
    <dd class="cads-summary-list__value">37.5</dd>
  </div>
</dl>

<%= render(CitizensAdviceComponents::SummaryList.new(items: [
  { name: "Salary", value: "£26,000" },
  { name: "Hours per week", value: "37.5" }
])) %>

When to use

Use the Summary list to show related information as a list of key facts.

You can use it to summarise a users response at the end of a form or summarise key information at the top of a page.

When not to use

The summary list is built using a description list (<dl>) HTML element, so it should only be used to show information that has a key and at least one value.

Do not use the component for tabular data or a simple list, instead use the table component or a <ul> or <ol>.

How it works

The Summary list is made up of items with a ‘key’ and a ‘value which are related to each other. An example of this could be ‘Name’ and ‘John Doe’.

Both the key and value occupies space differently at different breakpoints.

• At 1024 px and above the key occupies one third and the value two thirds.
• At below 1024px the key occupies half of the content and the value half.
• At below 768px the key stacks on top of the value.

Accessibility

Description lists <dl> are widely supported but each screen reader exposes the content differently.

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render(CitizensAdviceComponents::SummaryList.new(items: [
  { name: "Salary", value: "£26,000" },
  { name: "Hours per week", value: "37.5" }
])) %>

Component arguments