Components

Summary list

Use a summary list to summarise information, for example, a user’s responses at the end of a form.

See the GOV.UK Design System documentation on summary lists for more information on when to use this component.

Name
Sarah Philips
Change "Name"
Date of birth
5 January 1978
Change "Date of birth"
Address
72 Guild Street
London
SE23 6FH
Change "Address"
Name

07700 900457

sarah.phillips@example.com

Change "Name"
<gv-summary-list>
  <gv-summary-list-row key-text="Name" value-text="Sarah Philips">
    <template #actions>
      <gv-summary-list-row-action href="#">Change</gv-summary-list-row-action>
    </template>
  </gv-summary-list-row>
  <gv-summary-list-row key-text="Date of birth" value-text="5 January 1978">
    <template #actions>
      <gv-summary-list-row-action href="#">Change</gv-summary-list-row-action>
    </template>
  </gv-summary-list-row>
  <gv-summary-list-row key-text="Address">
    <template #value>
      72 Guild Street<br/>
      London<br/>
      SE23 6FH
    </template>
    <template #actions>
      <gv-summary-list-row-action href="#">Change</gv-summary-list-row-action>
    </template>
  </gv-summary-list-row>
  <gv-summary-list-row key-text="Name">
    <template #value>
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </template>
    <template #actions>
      <gv-summary-list-row-action href="#">Change</gv-summary-list-row-action>
    </template>
  </gv-summary-list-row>
</gv-summary-list>

Removing the borders

You can remove the borders from a summary list with :show-borders="false" and from individual rows with :show-borders="false". You should only do this if the list doesn't have actions.

Name
Sarah Philips
Date of birth
5 January 1978
Address
72 Guild Street
London
SE23 6FH
Name

07700 900457

sarah.phillips@example.com

<gv-summary-list :show-borders="false">
  <gv-summary-list-row key-text="Name" value-text="Sarah Philips"/>
  <gv-summary-list-row key-text="Date of birth" value-text="5 January 1978"/>
  <gv-summary-list-row key-text="Address">
    <template #value>
      72 Guild Street<br/>
      London<br/>
      SE23 6FH
    </template>
  </gv-summary-list-row>
  <gv-summary-list-row key-text="Name">
    <template #value>
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </template>
  </gv-summary-list-row>
</gv-summary-list>

Summary cards

A summary list will become a summary card if it has a card title, card actions or a card class.

University of Gloucestershire

Delete choice  of University of Gloucestershire Withdraw  from University of Gloucestershire
Course
English (3DMD)
PGCE with QTS full time
Location
Road, City, SW1 1AA

University of Bristol

Delete choice  of University of Bristol Withdraw  from University of Bristol
Course
English (Q3X1)
PGCE with QTS full time
Location
Road, City, SW2 1AA
<script setup lang="ts">
import { ref } from 'vue'

const choices = [
  {
    university: 'University of Gloucestershire',
    course: {
      name: 'English (3DMD)',
      type: 'PGCE with QTS full time'
    },
    location: 'Road, City, SW1 1AA'
  },
  {
    university: 'University of Bristol',
    course: {
      name: 'English (Q3X1)',
      type: 'PGCE with QTS full time'
    },
    location: 'Road, City, SW2 1AA'
  }  
]

function deleteChoice(university: String) {
  alert(`You clicked delete on ${university}`)
}

function withdraw(university: String) {
  alert(`You clicked withdraw on ${university}`)
}
</script>

<template>
  <gv-summary-list 
    v-for="choice in choices" 
    :key="choice.university" 
    :card-title="choice.university">
    <template #card-actions>
      <gv-summary-card-action 
        @click.prevent="deleteChoice(choice.university)" 
        :visually-hidden-text="`of ${choice.university}`"
      >
        Delete choice
      </gv-summary-card-action>
      <gv-summary-card-action 
        @click.prevent="withdraw(choice.university)"
        :visually-hidden-text="`from ${choice.university}`"
      >
        Withdraw
      </gv-summary-card-action>      
    </template>
    <gv-summary-list-row key-text="Course">
      <template #value>
        {{ choice.course.name }}<br/>
        {{ choice.course.type }}
      </template>
    </gv-summary-list-row>
    <gv-summary-list-row key-text="Location" :value-text="choice.location"/>
  </gv-summary-list>
</template>

You can set up row actions and card actions to use router-link or nuxt-link if needed. See Using router-link or nuxt-link for more details.

Name
Sarah Philips
Change  "Name"
Date of birth
5 January 1978
Change  "Date of birth"
Address
72 Guild Street
London
SE23 6FH
Change  "Address"
Name

07700 900457

sarah.phillips@example.com

Change  "Name"
<script setup lang="ts">
import { NuxtLink } from '#components';
</script>

<template>
  <gv-summary-list>
    <gv-summary-list-row key-text="Name" value-text="Sarah Philips">
      <template #actions>
        <gv-summary-list-row-action 
          :component="NuxtLink" 
          to="/example-page"
        >
          Change
        </gv-summary-list-row-action>
      </template>
    </gv-summary-list-row>
    <gv-summary-list-row key-text="Date of birth" value-text="5 January 1978">
      <template #actions>
        <gv-summary-list-row-action
          :component="NuxtLink"
          to="/example-page"
        >
          Change
        </gv-summary-list-row-action>
      </template>
    </gv-summary-list-row>
    <gv-summary-list-row key-text="Address">
      <template #value>
        72 Guild Street<br/>
        London<br/>
        SE23 6FH
      </template>
      <template #actions>
        <gv-summary-list-row-action
          :component="NuxtLink"
          to="/example-page"
        >
          Change
        </gv-summary-list-row-action>
      </template>
    </gv-summary-list-row>
    <gv-summary-list-row key-text="Name">
      <template #value>
        <p class="govuk-body">07700 900457</p>
        <p class="govuk-body">sarah.phillips@example.com</p>
      </template>
      <template #actions>
        <gv-summary-list-row-action
          :component="NuxtLink"
          to="/example-page"
        >
          Change
        </gv-summary-list-row-action>
      </template>
    </gv-summary-list-row>
  </gv-summary-list>
</template>

GvSummaryList

Props

NameTypeDescription
showBorders boolean
Whether to show borders under each row.

Defaults to true.
cardClass string|array|object
Classes to add to the summary card. Setting this prop will force the list to display as a summary card. You can bind a string, an array or an object, as with normal Vue class bindings.
cardTitle string
Text to use within the card title. If content is provided in the card-title slot, this prop will be ignored.
cardTitleHeadingLevel number
Heading level of the card title, from 1 to 6.

Defaults to 2.
cardTitleClass string|array|object
Classes to add to the title wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.
cardActionsClass string|array|object
Classes to add to the actions wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.

Slots

NameDescription
card-title
The content of the card title. If content is provided in this slot, the cardTitle prop will be ignored.
card-actions
A list of GvSummaryCardActions
default
A list of GvSummaryListRows

GvSummaryListRow

Props

NameTypeDescription
showBorder boolean
Whether to show a border under this row.

Defaults to true.
keyText string
Text to use for the row key. If content is provided in the key-text slot, this prop will be ignored.
keyClass string|array|object
Classes to add to the key wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.
valueText string
Text to use for the row value. If content is provided in the value-text slot, this prop will be ignored.
valueClass string|array|object
Classes to add to the value wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.
actionsClass string|array|object
Classes to add to the actions wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.

Slots

NameDescription
key-text
The content of the row key. If content is provided in this slot, the key-text prop will be ignored.
value
The content of the row value. If content is provided in this slot, the value-text prop will be ignored.
actions
A list of GvSummaryListRowActions.

GvSummaryListRowAction

Props

NameTypeDescription
text string
Text to use within the action item. If content is provided in the default slot, this prop will be ignored.
href string
The value of the link's href attribute.
visuallyHiddenText string
Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. If you don't provide a value, the row key will be used. Use the default slot for more complicated scenarios.
component string|object
The component used to render the link, for example RouterLink.

Defaults to 'a'.

Slots

NameDescription
default
The content of the action item. If content is provided in this slot, the text prop will be ignored.

GvSummaryCardAction

Props

NameTypeDescription
text string
Text to use within the action item. If content is provided in the default slot, this prop will be ignored.
href string
The value of the link's href attribute.
visuallyHiddenText string
Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. If you don't provide a value, the title of the card will be used. Use the default slot for more complicated scenarios.
component string|object
The component used to render the link, for example RouterLink.

Defaults to 'a'.

Slots

NameDescription
default
The content of the action item. If content is provided in this slot, the text prop will be ignored.