Accessibility

Navigate to a section

Colours

Colours

  • dark-blue
    #00148C
    primary, brand, heading-font-color, ng-blue
  • blue
    #009DDC
    secondary
  • teal
    #00BFB3
  • purple
    #500778
  • magenta
    #C800A1
  • lilac
    #AD96DC
  • orange
    #FA4616
  • mid-blue
    #0072CE
  • soft-orange
    #FFB25B
    warning
  • mid-green
    #547221
  • light-blue
    #00AFF0
  • red
    #F53C32
    error
  • green
    #3CE12D
    success
  • yellow
    #FADC00
  • blue-tint
    #d5e6f5
  • muted-green
    #00ab11
  • dark-navy
    #000d59

Neutrals

  • black
    #000
    tertiary, secondary-font-color, secondary-ui-color
  • dark-grey
    #53565A
    base-font-color, third-ui-color
  • light-grey
    #f0f0f0
  • white
    #fff
    base-ui-color
  • lightest-grey
    #f6f6f6
  • grey-shade
    #d8d8d8
  • darker-grey
    #505050

Gradients

  • Dark-navy to Magenta
    dark-navy to magenta

Spacing

  • tiny
    4px (1)
  • small
    8px (2)
  • medium-small
    16px (4)
  • normal
    24px (6)
  • medium-large
    32px (8)
  • large
    48px (12)
  • huge
    64px (16)

Browserhacks

  • chromium
    hidden
  • ie
    hidden
  • old-edge
    hidden
  • safari
    hidden
  • firefox
    hidden
  • chromium
    showing
  • ie
    showing
  • old-edge
    showing
  • safari
    showing
  • firefox
    showing

Breakpoints

Typography

Title
(60px)
Heading 1
(56px)
Heading 2
(36px)
Heading 3
(30px)
Heading 4
(28px)
Heading 5
(24px)
Heading 6
(21px)
Lead Para
(18px)
Base
(16px)
Small
(14px)
Tiny
(12px)


This is strong text senectus et netus et malesuada fames ac turpis egestas. This is emphasised/italic text, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. This is code text. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. This is var text, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. This is a link in turpis pulvinar facilisis. Ut felis.


This is Light text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Light Italic text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Regular text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Regular Italic text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Semi Bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Semi Bold Italic text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

This is Heavy text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet gravida mi, ut mattis nisi ultrices sed. Aenean venenatis dolor purus, at sodales mauris fermentum eget. Sed at convallis nisi. Aliquam eget aliquam nulla. Suspendisse pretium justo et efficitur commodo. Proin non consectetur sapien. Curabitur blandit dui in felis rhoncus vehicula.

1 Example Lane
Snippet City
Trial County
T3ST I23

Breadcrumbs

Intro textRootOneTwoThreeCurrent page

cookie notice via utils

Sidebar

Alerts

This is just a plain alert
This is custom coloured
You can pass in a more complex body. Have a link: click here
Oh no, something broke!
Something may be about to break - be warned!
Your thing was successful!
Debugging in progress
You can use CSS classes to change the background and foreground color.
You can also change the main icon (or exclude it completely), dismiss text and dismiss icon.

Text Strip Banner

Hello world!
Clicky click
This text banner is not set to have fixed width items
This text banner is set to have fixed width items
Short text
Medium string of text

Buttons

States

Hover

Active

Disabled

Sizes

Variations

*Note the HTML structure of the --icon buttons.

States

Lists

Unordered list

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Ordered list

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Definition list

Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Normal

Normal   Hover   Active   Visited   Disabled

With Icons

Normal    Hover    Active    Visited    Disabled   

*Note the HTML structure of the with-icon links.

Subtle Link

A subtle link should shed all typical link styles and instead take the style of whatever text it's currently within [like this]. It should not have any remarkable style for its [visited], [active], or [disabled] states, but may sport something a little different when [hovered] over.

As Buttons

DefaultPrimarySecondaryTertiarySuccessWarnError

Disabled

DefaultPrimarySecondaryTertiarySuccessWarnError

Social Links

Hover

TODO

Active

TODO

Visited

TODO

Disabled

TODO

Badges

This is a default badge in context

This is an error badge in context

This is a warning badge in context

This is a success badge in context

You can supply CSS classes to alter the colours

My text   My text   My text

Accordions

Multi-open

All items may be open at the same time…

Exclusive open

Only one item may be open at the same time. You can also set the accordion to render with the first item open.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Detailed

You may have some extra detail text beside the trigger arrow which changes depending on the expand state.

Icons

Provide icon CSS classes to sit beside the trigger text of each item.

Hidden Content

Show some alternative content at the bottom when all accordion items are 'closed'. It's likely you'll want to also add the data-accordion-noscroll attribute to the label also.

    • Hidden content: Lorem ipsum dolor sit amet…

Item Pre- and Post-Content

Accordion items may display arbitrary pre- and post-content, which always shows for that item regardless of whether it is currently 'open' or not.

  • This is some preContent

  • This is some postContent

Trigger Pre- and Post-Content

Accordion item triggers can also have pre- and post-content.

  • Trigger preContent

  • Trigger postContent

Tooltip Variation

Individual - one item per accordion for tooltip usage.

Tabs

Default

Some plain text content
Some HTML string content
This is some more complex HTML passed in using a #{set} call.
ItemQuantity
Orange5
Apple7
Kiwi1
This is disabled!

Table

Horizontal

Cells are hoverable by default. To ignore the hover effect, apply the CSS class `no-hover` on the <td> element. Tables that appear in mobile view should be rendered as their own table element, as the HTML structure is different from the desktop version.

Table head 1 Table head 2 Table head 3 Table head 4
1 Item 1 Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna // line 2 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea // line 3 commodo consequat.
2 No hover! Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna // line 2 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea // line 3 commodo consequat.
3 Item 3 Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna // line 2 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea // line 3 commodo consequat.
Foot

Hoverable Rows

Allow an entire row to be highlighted on hover by applying the `hoverable` CSS class to the <tr> element.

Name Colour Material Price per m2
Polka Dot Red Cotton £2.69
Striped Blue Polyester £1.99
Chevron Green Acrylic £3.39

Vertical

You will probably want to use this type of layout for displaying tabular information on mobile devices.

Name Fluffy
Coat Long-haired
Colour Black
Eyes Green

Progress Steps

Labels Above

Step 1
Step 2
Step 3
Step 4
Step 5

Labels Below

Start
Section 1
Section 2
Contact Details
Summary
Finish

Hidden Labels

AM
Noon
PM

Forms

This <form> has a <div> wrapping it with the attribute data-form-wrapper. This is needed to inherit all the proper form styles.


Text-like Fields

Something went wrong!
Note: You would not see this style under normal CoreForm circumstances.
Note: You would not see this style under normal CoreForm circumstances.

Field Additions

£
kVA
%
%
%
%
%

Textarea Field

Checkbox Fields

Checkbox States

Consent Field

Note: You would not see this disabled style under normal CoreForm circumstances.

Multiple Checkboxes

Checkboxes Field
Disabled Checkboxes Field

Radio Fields

Note: This is just a singular radio input demonstration. There is no CoreFormField that is just one radio, like there is for the singular Checkbox Field.

Radio States

Multiple Radios

Radios Field
Disabled Radios Field

Select Field

Fieldset

Group Field
Radios Field

Captcha


Form Actions


Icons

Showing: {{ vm.getTotalIconCount(true) }}/{{:: vm.getTotalIconCount() }}

{{iconStyle}}

Showing: {{ vm.getFilteredIconKeys()[iconStyle].length }}/{{:: vm.sortedIconKeys[iconStyle].length }}
Prefix: {{vm.getPrefix(iconStyle)}}
  • {{ $parent.iconStyle === 'other' ? '' : vm.getPrefix($parent.iconStyle) + '__' }}.svg
Emergency information 24/7
For power cuts and emergencies call 0800 6783 105 or 105
For general enquiries call 0800 096 3080 Mon - Fri, 8am - 5pm