Overview Page - Version 2.1

Here is an overview of all the assets you can use in your systems, that are pre-styled, with instructions on how to make them appear the same. If something is missing please let the frontend developers know who can build this into the next version. Versions increment on points for changes to existing elements and full on new features being added. Below is the contents of the page but also an example of making a contents area.

Action links dictate moving onto starting a digital journey so the beginning of something that requires some input from the user. To create this item you need to wrap your text with an A tag that has the class 'action-link'. The SVG for the arrow needs copying.

Find a minor injuries unit

Alerts

To be used at the top of pages to go back to the previous page. A tag with a class of 'back' and an SVG for the chevron.

Go back

Blocks for main menus

These are only to be used on menu pages when you load up. Don't re-use on page after page as it can get confusing where you are. Width is controlled by the bootstrap class column. Always set the column at md so that below defaults to full width.

Design principles

These principles guide all of our design.

Design principles

These principles guide all of our design.

Design principles

These principles guide all of our design.

Design principles

This block is disabled. Just add menu-disabled to the item

Design principles

These principles guide all of our design testing this line being a lot bigger than the other ones to implement flex.

Design principles

These principles guide all of our design.

Blocks for main menus - Inverted

As above for Menu blocks but with an added class of menu-invert.

Design principles

These principles guide all of our design.

Design principles

These principles guide all of our design.

Design principles

This item is disabled.

Blocks for main menus - Transparent

Design principles

These principles guide all of our design.

Design principles

These principles guide all of our design.

Design principles

This item is disabled

To be used at the top of pages to show users how they have to where they are. Only to be used if you go 3 pages deep from the main page. Otherwise, use a back link only. A nav element with the class of breadcrumb, Ordered List and a p tag at the end of the ol with a class of 'breadcrumbBack' for mobile navigation to just take you back to the previous page.

Buttons

Button tag with the class 'btn' and dependent on the button type the class to warrant the colour styling from the list. Primary is the main one used throughout for starting process's and saving.Secondary is for when there is more than one action for example when we have a submit and save next to each other. White is for use on coloured backgrounds such as callout cards and warnings etc.

A tags as buttons

Buttons in header

Heading must be inside a col, then other buttons are placed inside a col. Columns with buttons have the class .btn-Col added and the Buttons themselves have the classes .btn and .btn-Icon.

This is a heading of a page

Buttons in Tables

The buttons simply need the classes .btn and .btn-action

Entry here Actions here
Without a btn-group
With a btn-group

Care Card

Care Cards are for information on a page to help users identify the process for moving forward. This colouring is for non-urgent help as we don't really do emergency services There are a few elements to building this item up. A div to wrap everything to say it's a 'care-card' and 'care-card-non-urgent' Then its split into two divs for the 'care-card-heading' and the 'care-card-content'. The heading can be a H2 or H3 but needs to have a hidden span at the beginning for screen readers to say what the card is. This span is wrapped in a class 'visually-hidden' so it's only for the screen-readers. The arrow is added in a span after the H tag with "care-card-arrow". You content div is structured as you like then.

Contact webteam if:

  • you're not able to login
  • you're not able to submit

As this product is live please do so by logging a job with our IT Service Desk

CheckBoxes

Different set up to usual so we can style the input. Always wrapped in a fieldset, with a legend for the question and label round the check text. Each option needs to be wrapped with 'form-check' and 'checkbox'.

Example question with checkboxes

This is the hint text next to the question

Date Input and Field Hint

New way of adding dates in so that validation can target each individual box. Each box can be sized using class ' input-width-x' replacing x with the desired character width. Each box needs to be wrapped in a div 'date-item'.

What is your date of birth?

For example, 31 3 1980

Details

Details are to be used to provide further information on inputs etc without taking over the page. Easy to read than tooltips on I icons. It's basically a styled accordion. Div with the class details, a div inside for 'details-summary' and another with 'details-text' and the relating accordion parameters.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Error Messages

Error messages on form validation needs to be shown under the label of the input. It is just a Span with class 'error-message'. There needs to be another span inside at the beginning to say class="visually-hidden">Error: so that screen readers can make sense of the message. The instruction needs to clearly tell the user how to rectify their error for example name must be entered or like the below.

Date of birth must be in the past

Error set

for use in wrapping around a set of information

What is your date of birth?

For example, 31 3 1980

Date of birth must be in the past

Error Summary

Error summary blocks are to show at the top of the page when a user submits and gets errors. This is what they are directed back to when they try to submit with errors. The summary should be structured like the below with a title to explain what has happened, a description of what to do and then a list of the error messages from the form with links to their location on the page. This is an AA pass requirement so needs to be adhered to going forward. One div to wrap everything 'error-summary' and the rest is styled.

Expander (Accordions)

Format for all accordions in systems going forward. Few steps involved as it is based off the details styles then amended.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Inset Text

Used for important information on a page to highlight it in and amongst everything else. Div with class ' inset-text' but needs a span at the beginning with the class 'visually-hidden' to say Information for screen readers.

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

Add a new Row

Sometimes we have requests to be able to add multiple rows of the same information. This needs to be a clean table, The new row button wants to go underneath with the classes 'btn btn-secondary btn-row' The cross at the end of the row wants to be the svg icon for the cross. You need to ensure that you add a width for your inputs and wrap in a responsive tag of xl so that it will drop down at any size.

Row 1 Row 2 Row 3 Row 4 Row 5

Pagination

Styled but no preview as needs data tables adding

Radios

Different set up to usual so we can style the input. Always wrapped in a fieldset, with a legend for the question and label round the check text. Each option needs to be wrapped with 'form-check' and 'radio'.

Radio Scales

To be used in situations where you are selecting which item best represents the user on a scale. Same as radios except you add a div around all the radios with the class 'radio-scale' and 'radio-scale-x' x replaced with the amount of items in your scale 3, 4 or 5.

The recognition I get for good work?

Select

Standard select option with no extra class's needed. Only use select if you have 5 or more options. 4 or less should be radio buttons.

Added to top of the page. Press tab on initial load to view. This is built into the header layout so not something you need to worry about adding to every page.

Table

Standard table, needs a thead and tbody but otherwise styled based on elements.

Skin symptoms Possible cause
Blisters on lips or around the mouth cold sores
Itchy, dry, cracked, sore eczema
Itchy blisters shingles, chickenpox

Text input /Textarea

Standard inputs, styled on tags not class's. As with the date option they can be sized with a class of 'input-width-2' based on the character width you would like. If no class added they just do 100%. For the text-area also specify how many rows you would like to show based on the information you believe should be entered.

Don't include personal or financial information, eg your National Insurance number or credit card details.

Typography, Colours, fonts and assets

All the fonts are and styles are set up in the stylesheet ready. The sizes provided are to be web compliant so shouldn't be changed lightly. As you can see below they are sized and spaced accordingly and should be used in the hierarchy order. Never select a heading based on the style you want to output.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Testing testing testing...

See Brand Guidelines for colour palettes, extra fonts and images available for use.

Warning Callout

Used in situations to alert users of information even if they don't read the whole page. One div wrapping a h3 and p tags with class 'warning-callout'.

This portal is monitored Mon – Fri between 08:30 – 16:00.

Monday - Friday Referrals received after 16:00 will not be reviewed until the next working day.

Saturday - Sunday Referrals received after 13:00 will not be reviewed until Monday.

Background Colours

Used on rows and cols with class 'white' or 'grey'