This component includes the GOV.UK frontend theme and a local theme which overrides some classes and additional root variables. It also includes different layouts blocks and components integrated with the GOV.UK Design System Library. Some patterns, such as Addresses, Bank details, Email addresses and Telephone numbers, are ready to use.

Below are described some of the more useful components and how to use them.

Headers

• Header: If your screen/screens need to have a "Header" without navigation, you just need to use this component

• HasAppWithContainerClass:

Indicates if it's to add the "app-width-container" class which adds some additional right and left margins to your header

• HasAppHeaderClass:

Indicates if it's to add the "app-header" class which includes a full blue bottom border to the screen header

• HeaderWithNavigation: If your screen/screens need to have a "Header" with navigation, you just need to use this component

Footers

• Footer: GOV.UK default non-customizable footer

• IsToAddAppWithClassCSS:
• Indicates if it's to add the "app-width-container" class which adds some additional right and left margins to your header

• Footer with links: Footer which provides a placeholder to add footer links

• Footer with secondary navigation: A footer which only should be used if you’re creating a GOV.UK service, and you want users to be able to navigate away from the service

• Footer with links and secondary navigation: A footer which only should be used if you’re creating a GOV.UK service, and you want users to be able to navigate away from the service

Menus

• 

  
  

  
  

  

  
  

  

  
  

  

  
  

  Inputs:

  

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

• Examples:
• Default:
• IsHeading: Parameter if set as true, the question will be also the heading for the page
• ValidationMessages: Validation error messages, based on standard constraint validation
• OutSystemsAttributes: Parameter that holds OutSystems attributes to set in the input widget
• InputAttributes: Parameter that holds DOM attributes to set in the input widget
• Text input: Use the text input component when you need to let users enter text that's no longer than a single line, such as their name or phone number.
• Left side navigation menu (with nested): Component to be used when your screen includes a "LayoutSideMenu" in which at least one of the menus has nested "links"
• Left side navigation menu (without nested): Component to be used when your screen includes a "LayoutSideMenu" which none of the menus has nested "links"
• With prefix an/or suffix:
• With hint:
• Navigation menu: Main content navigation that is placed after the header (the sub menu items only will appear in the mobile devices). On the desktop, please use the left-side navigation approach (see bullets below.