NHS.UK frontend
Deployed automatically from component-password-input branch (opens in new tab).
Components and variants
These examples are used for automated tests and may not follow service manual best practice.
- Action link default
- Action link reverse
- Back link default
- Back link as a button
- Back link reverse
- Breadcrumb default
- Breadcrumb attributes
- Breadcrumb reverse
- Button default
- Button as a link
- Button disabled
- Button login
- Button login as a link
- Button login disabled
- Button reverse
- Button reverse as a link
- Button reverse disabled
- Button secondary
- Button secondary as a link
- Button secondary as a link, solid background
- Button secondary disabled
- Button secondary, solid background
- Button secondary, solid background disabled
- Button warning
- Button warning as a link
- Button warning disabled
- Button with double click not prevented
- Button with double click prevented
- Card default
- Card basic with custom HTML
- Card clickable
- Card emergency (red and black)
- Card feature
- Card non-urgent (blue)
- Card primary (with chevron)
- Card primary (with chevron and description)
- Card secondary
- Card top task
- Card urgent (red)
- Card with image
- Character count default
- Character count to configure in JavaScript
- Character count with custom rows
- Character count with error message
- Character count with hint
- Character count with hint and error
- Character count with label as page heading
- Character count with maxlength attribute
- Character count with neither maxlength, maxwords nor textarea description set
- Character count with neither maxlength nor maxwords set
- Character count with threshold
- Character count with translations
- Character count with default value
- Character count with default value exceeding limit
- Character count with word count
- Checkboxes default
- Checkboxes small
- Checkboxes small with conditional content
- Checkboxes small with conditional content, error message
- Checkboxes small with conditional content, error message (nested)
- Checkboxes small with disabled item
- Checkboxes small with error message
- Checkboxes small with hint
- Checkboxes small with hint and error
- Checkboxes small with hints on items
- Checkboxes small with legend as page heading
- Checkboxes small with long text
- Checkboxes small with "none of the above" option
- Checkboxes small with pre-checked values
- Checkboxes with conditional content
- Checkboxes with conditional content, error message
- Checkboxes with conditional content, error message (nested)
- Checkboxes with disabled item
- Checkboxes with error message
- Checkboxes with hint
- Checkboxes with hint and error
- Checkboxes with hints on items
- Checkboxes with legend as page heading
- Checkboxes with long text
- Checkboxes with "none of the above" option
- Checkboxes with "none of the above" option (named group)
- Checkboxes with "none of the above" option (named group, unique)
- Checkboxes with pre-checked values
- Contents list default
- Date input default
- Date input day and month
- Date input month and year
- Date input month and year with values
- Date input with autocomplete values
- Date input with custom name prefix
- Date input with error on day input
- Date input with error on month input
- Date input with error on year input
- Date input with errors and hint
- Date input with errors only
- Date input with legend as page heading
- Date input with values
- Details default
- Details expander
- Details expander open
- Details open
- Do and Don't list default
- Do and Don't list don't
- Error message default
- Error summary default
- Error summary auto-focus disabled
- Error summary auto-focus explicitly enabled
- Error summary with description
- Fieldset default
- Fieldset as page heading l
- Fieldset as page heading m
- Fieldset as page heading s
- Fieldset as page heading without class
- Fieldset as page heading xl
- Fieldset styled as large text
- Fieldset styled as medium text
- Fieldset styled as small text
- Fieldset styled as xl text
- Fieldset with inputs
- Footer default
- Footer with custom copyright text
- Footer with meta and navigation
- Footer with meta (links and text)
- Footer with meta (links only)
- Footer with multiple navigation groups
- Footer with multiple navigation groups and custom HTML
- Footer with multiple titled navigation groups
- Footer with single navigation group
- Header default
- Header organisational white with account (logged in)
- Header organisational white with account (logged out)
- Header organisational white with navigation (justified)
- Header organisational white with search
- Header organisational white with search, navigation
- Header organisational white with search, navigation (custom logo)
- Header organisational white with search, navigation (white)
- Header organisational white with service name logo combo, search
- Header organisational white with service name logo separate, search
- Header organisational white with service name unlinked, search
- Header organisational with search
- Header organisational with search, navigation
- Header with account (logged in)
- Header with account (logged out)
- Header with account, search, navigation (logged in, complex)
- Header with logo
- Header with logo unlinked
- Header with navigation
- Header with navigation (justified)
- Header with navigation overflow
- Header with navigation (white)
- Header with search
- Header with service name, account, search and navigation
- Header with service name, account, search and navigation (white)
- Header with service name logo combo, search
- Header with service name logo separate, search
- Header with service name logo separate, search (longer service name)
- Header with service name logo separate, search (long service name)
- Header with service name, search and navigation
- Header with service name, search and navigation (white)
- Header with service name unlinked, search
- Hero default
- Hero with html content
- Hero with image
- Hero with image, content
- Hint text default
- Images default
- Images with caption
- Input default
- Input with autocomplete attribute
- Input with error message
- Input with extra letter spacing
- Input with hint
- Input with hint and error
- Input with label as page heading
- Input with prefix
- Input with prefix and suffix
- Input with prefix and suffix and error
- Input with prefix and suffix and width modifier
- Input with suffix
- Input with width-10 class
- Input with width-20 class
- Input with width-2 class
- Input with width-30 class
- Input with width-3 class
- Input with width-4 class
- Input with width-5 class
- Inset text default
- Label default
- Label as page heading
- Label with bold text
- Notification banner default
- Notification banner auto-focus disabled, with type as success
- Notification banner auto-focus explicitly enabled, with type as success
- Notification banner custom tabindex
- Notification banner paragraph as html heading
- Notification banner role=alert overridden to role=region, with type as success
- Notification banner success with custom html
- Notification banner with a list
- Notification banner with long heading
- Notification banner with lots of content
- Notification banner with text as html
- Notification banner with type as success
- Pagination default
- Panel default
- Password input default
- Password input with autocomplete attribute
- Password input with error message
- Password input with hint text
- Password input with label as page heading
- Password input with translations
- Password input with width class
- Radios default
- Radios inline
- Radios small
- Radios small inline
- Radios small with conditional content
- Radios small with conditional content, error message
- Radios small with conditional content, error message (nested)
- Radios small with disabled item
- Radios small with divider
- Radios small with error message
- Radios small with hint
- Radios small with hint and error
- Radios small with hints on items
- Radios small with legend as page heading
- Radios small with long text
- Radios small with nested conditional radios
- Radios small without fieldset
- Radios with conditional content
- Radios with conditional content, error message
- Radios with conditional content, error message (nested)
- Radios with disabled item
- Radios with divider
- Radios with error message
- Radios with hint
- Radios with hint and error
- Radios with hints on items
- Radios with legend as page heading
- Radios with long text
- Radios with nested conditional radios
- Radios without fieldset
- Select default
- Select with disabled item
- Select with error message
- Select with hint
- Select with hint and error
- Select with label as page heading
- Select with selected value
- Skip link default
- Summary list default
- Summary list without actions
- Summary list without border
- Summary list without row border
- Tables default
- Tables as a panel
- Tables with first cell as header
- Tables with responsive layout
- Tables with word breaks
- Tabs default
- Tabs with anchor in panel
- Tag default
- Tag aqua-green
- Tag blue
- Tag green
- Tag grey
- Tag orange
- Tag pink
- Tag purple
- Tag red
- Tag white
- Tag yellow
- Task list default
- Textarea default
- Textarea with autocomplete attribute
- Textarea with error message
- Textarea with hint
- Textarea with hint and error
- Textarea with label as page heading
- Warning callout default
- Warning callout with custom heading