Multiple Components Demo

This page shows common NHS components you’ll probably need.

Buttons

Primary button Secondary button Reverse button

Notification Banner

Important

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

Paragraph

We provide a range of primary care services to patients in the local area. You can book appointments, request repeat prescriptions, and access health advice.

Summary List

Opening Hours
Mon-Fri 8am-6pm
Emergency Contact
111

Action Link

Find your nearest A&E

Use the 'nhsuk-action-link--reverse' modifier class to show white links and arrows on dark backgrounds so opening class would change from 'nhsuk-action-link' to 'nhsuk-action-link nhsuk-action-link--reverse'

Action List

Expanding Card

Get your medical records

You can see your GP records by:

  • asking for them at your GP surgery
  • going online to see them (if you have signed up for GP online services)

Warning Callout

Important: School, nursery or work

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

Table

Skin symptoms and possible causes
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox

Blockquote

"Blockquote - Our priority is providing the best care for our patients."

Inset Text

Information:

You can report any suspected side effect to the UK safety scheme.

Care Card

Non-urgent advice: Speak to a GP if:

  • you're not sure it's chickenpox
  • the skin around the blisters is red, hot or painful (signs of infection)
  • your child is dehydrated
  • you're concerned about your child or they get worse

Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.

Urgent Care Card

Get advice from 111 or ask for an urgent GP appointment if:

  • you need urgent help for your mental health

Get help from 111 online or call 111 and select the mental health option.

Primary Card Non-Clickable

Change class from 'nhsuk-grid-column-full' to any of these to change size: nhsuk-grid-column-one-half, nhsuk-grid-column-two-thirds, nhsuk-grid-column-three-quarters.

Primary Clickable Card with Chevron

Secondary Card - Non Clickable

Secondary Card - Clickable

Secondary Card - Non Clickable

Image Card - Clickable

Image Card - Clickable with Chevron

Image Card - Non Clickable

Card Grid

We define the width of the cards using the grid system. For example, nhsuk-grid-column-one-half is used to make the cards half width.

Clickable Image Card Grid

We define the width of the cards using the grid system. For example, nhsuk-grid-column-one-half is used to make the cards half width.

Do List

Do

Don't List

Don't