Content
Components for structuring and progressing through page content.
Details
A single disclosure for supplementary help — built on the native <details> element.
Help with your reference number
It is the 10-digit number on your letter.
Show code
<DsmuDetails summary="Help with your reference number">
<p>It is the 10-digit number on your letter.</p>
</DsmuDetails>Step indicator
Shows progress through a multi-page journey, announcing “Step X of Y” to assistive tech.
Show code
<DsmuStepIndicator :current="2"
:steps="['Your details', 'Your address', 'Check answers']" />Tabs
Organises related content. Full keyboard support (arrows, Home, End) per the ARIA APG.
Overview of the service.
The fees for the service.
Show code
<DsmuTabs :tabs="[{ label: 'Overview' }, { label: 'Fees' }]">
<template #panel-0>Overview of the service.</template>
<template #panel-1>The fees for the service.</template>
</DsmuTabs>Statistic
A prominent single figure.
12,480
Applications this year
up 8% on last year
Show code
<DsmuStat value="12,480" label="Applications this year" caption="up 8% on last year" />Timeline
A list of dated events, such as the stages of an application.
Application received
Today
We are reviewing it.
Decision sent
Within 5 working days
Show code
<DsmuTimeline :items="[
{ title: 'Application received', date: 'Today' },
{ title: 'Decision sent', date: 'Within 5 working days' },
]" />Empty state
Shown when a list or search has no results.
No results found
Try a different search term.
Show code
<DsmuEmptyState title="No results found">
Try a different search term.
</DsmuEmptyState>Back to top
A link back to the top of a long page. Works as a plain anchor with no JavaScript.
Show code
<DsmuBackToTop href="#main" />