Icons
Icons add a lot to a page and make it feel much less flat and text-heavy. They're also great for making information easily findable on a page, like phone numbers and addresses.
content
Brand icons
| Brand |
Class |
Example |
|
Facebook
|
facebook |
<p class="facebook">Facebook</p> |
|
Instagram
|
instagram |
<p class="instagram">Instagram</p> |
|
LinkedIn
|
facebook |
<p class="facebook">Facebook</p> |
|
Snapchat
|
snapchat |
<p class="snapchat">Snapchat</p> |
|
|
twitter |
<p class="twitter">Twitter</p> |
|
YouTube
|
youtube |
<p class="youtube">YouTube</p> |
General icons
| Icon |
Class |
Example |
|
Calendar
|
calendar |
<p class="calendar">1 January 2023</p> |
|
Clock
|
clock |
<p class="clock">Deadline at 11:59pm</p> |
|
Download
|
download |
<a class="button download">Download file</a> |
|
Email
|
email |
<a class="button email" href="mailto:name@su.uni.ac.uk">name@su.uni.ac.uk</a> |
|
Location
|
location |
<p class="location">Our address</p> |
|
Phone
|
phone |
<a class="button phone" href="tel:00000000000">00000 000000</a> |
|
Warning
|
warning |
<p class="warning">Check again</p> |
|
Image
|
image |
<p class="image">Image icon</p> |
|
Search
|
search |
<p class="search">Find what you need</p> |
|
Tick
|
tick |
<p class="tick">Success!</p> |
|
Cross
|
cross |
<p class="cross">Error</p> |
|
Basket
|
basket |
<p class="basket">It's in your basket</p> |
|
Tickets
|
tickets |
<p class="tickets">Get your ticket</p> |
|
Award
|
award |
<p class="award">Winner</p> |
Create engaging layouts using columns to spread out photography, text and buttons.
The page descriptions appear in the explore section as well as at the top of each page.
Page images appear at the top of each page and in the explore section.