Buttons and modals
Buttons
Buttons have become an important part of websites to help us communicate a Call to Action or CTA to the user.
CTA’s are best represented in the form of a clickable button of which the size, colour and position of buttons let us show the priority/importance of a task to our users.
Green colour button
Magenta button (students)
Yellow button
Neutral button
A button for negative or neutral actions eg. forgotten pasword or reset form.
Link text buttons
Text link with a chevron. Can be used in a simple list or as part of a component.
Links with generic text, such as 'Read more' or 'Find out more', must have a screenreader only span informing the user which page or url they will be directed to.
Read moreGo to placeholder link page
Show more button
A button that loads more content when clicked.
Magenta show more button
A button that loads more content when clicked.
News listing show more button
A button that loads more content when clicked.
Small buttons
Icon button
The use of an icon adds a visual cue to the user as to what will happen on click/press.
The icon should always be used alongside text.
Icon button Small
Magenta Icon button Small
Social buttons
This is our standard Icon button above using our social media icons.
The main calls to action should be share, follow or like which should also be included in the title text for the link
Modals
A modal is a secondary window that opens on top of the main one.
You should use modal windows when there are steps the user needs to do before the task can be completed. Or a modal window can be used instead of a full page, allowing users to maintain the context of their task without navigating away from their position within the website.
Modal default
The standard size modal that is 6 blocks wide (598px)
Modal large
The large modal is 9 blocks wide (898px)
Modal small
The small modal is 9 blocks wide (238px)