DXP Components

Below are examples of each GOV.UK DXP Component available. On desktop, a dynamic list of links will display on the left hand side.

Accordion

The accordion component lets users show and hide sections of related content on a page.

Writing well for the web

This is a summary of this accordion

This is the content for Writing well for the web.

Writing well for specialists

This is the content for Writing well for specialists.

Know your audience

This is the content for Know your audience.

How people read

This is the content for How people read.

Banner

The banner component lets users show some content alongside an image.

This is the content of the banner

Card listing

Details

Make a page easier to scan by letting users reveal more detailed information only if they need it.

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

Event listing

Event title

10 December 04:06 PM

A description of this event.

Local event

Features

Features title

Description of this feature

Second features title

This feature doesn't link anywhere

Image

A description of this image.

It's configured to take up one half size and left aligned.

In-page alert

Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

You can be fined up to £5,000 if you do not register.

Links list

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

News listing

News items title

10 December

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod

News item with an image

11 December

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

Notification banner

Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.

Important

You have 7 days left to send your application. View application.

Panel

The panel component is a visible container used on confirmation or results pages to highlight important content.

Application complete

Your reference number HDJ2123F

Phase banner

Use the phase banner component to show users your service is still being worked on.

Alpha

This is a new service. Help us improve it and give your feedback by email.

Pull quote

We use pull quotes to highlight key theories and statements from frameworks.

"This is a short quote, because I said it"

— Lorem Ipsum

Tabs

The tabs component lets users navigate between related sections of content, displaying one section at a time.

	Case manager	Cases opened	Cases closed
	David Francis	3	0
	Paul Farmer	1	0
	Rita Patel	2	0

	Case manager	Cases opened	Cases closed
	David Francis	24	18
	Paul Farmer	16	20
	Rita Patel	24	27

	Case manager	Cases opened	Cases closed
	David Francis	98	95
	Paul Farmer	122	131
	Rita Patel	126	142

Warning text

You can be fined up to £5,000 if you do not register.