UI

UI refers to the User Interface, and is about organising and styling information in a way that is clean and user friendly.

---

Links

A default link anywhere within .article
A default link with .no-link applied
A link with attribute target="_blank" and class="link-has-icon"
A link to a .doc .docx .ppt .pptx .xls .xlsx .pdf document and class="link-has-icon"

---

Buttons

Buttons should give a clear visual indication of where the user should click to move to the next stage in a given process. They can be used on calls to action such as links and form inputs to make a clear statment that this element is to be clicked on.

The bcu-button class can be added to an element to produce a standard blue button: bcu-button

The bcu-button class can also be extended by classes such as bcu-button-red to produce a range of buttons:

---

Lists

Lists that can be used within .article class

---

Tables

A basic table

Fruits	Vegetables	Meats
Apples	Carrots	Beef
Oranges	Peas	Chicken
Bananas	Sweetcorn	Lamb

A table with zebra striping applied

Fruits	Vegetables	Meats
Apples	Carrots	Beef
Oranges	Peas	Chicken
Bananas	Sweetcorn	Lamb

A table with zebra striping applied and only horizontal row borders applied

Fruits	Vegetables	Meats
Apples	Carrots	Beef
Oranges	Peas	Chicken
Bananas	Sweetcorn	Lamb

A table with a class of .alt-table

A table with a class of .alt-table

Fruits	Vegetables	Meats
Apples	Carrots	Beef
Oranges	Peas	Chicken
Bananas	Sweetcorn	Lamb

---

Alert Panels

---

Cards

A card is a container for a chunk of information