Asthma UK Design System

UNDER CONSTRUCTION

Asthma UK design system

Contents

 

Overview

Build consistent, accessible user interfaces by using these design styles, components and patterns.

 

Page templates

Template nameUse for
Article page TBC
Flexible page TBC

 

Table

Wrap html table content with <table class="table-small"></table> to define style. You can use CSV to HTML table converter to generate HTML table content code.

Column 1Column 2Column 3
A B C
A B C

 

Inset text

Create inset text by wraping content with <div class="inset-text"></div>

Build consistent, accessible user interfaces by using these design styles, components and patterns.

 

Dos & Don'ts

Wrap the content with <div class="dos"></div> to define style. 

Dos

  • Use a Do and Don't list to give users clear and simple advice, for example about treating a problem themselves.
  • Keep your points as brief as possible.
  • Dos normally come before Don'ts.

 

Don'ts

  • Use a Do and Don't list to give users clear and simple advice, for example about treating a problem themselves.
  • Keep your points as brief as possible.
  • Dos normally come before Don'ts.

 

Column 1 Column 2 Column 3
A B C
D E F
All respondents Shielding Shielding with a letter Shielding without a letter
Number of respondents 14208 8827 4171 4656
Percentage of total respondents 62.1% 29.4% 32.8%

Use inset text to help users identify and understand important content on the page, even if they don't read the whole page.

Dos

  • If you’ve noticed asthma-like symptoms, don’t ignore them. Make an appointment with your GP.  Some GP practices have an asthma nurse, but the practice nurse might be able to help with asthma too.

  • The quicker you get diagnosed, the quicker you can get the right medicines to help deal with your symptoms.