CSS Styles Cheat Sheet
This guide is intended to be a reference for advanced T4 users.
Please contact digitalteam@exeter.ac.uk if you need T4 support.
button
| Class ID |
button |
| Description |
Creates a branded green (#00dea5) button |
| Usage Guidance |
Use on <a> or <button> items. Can also be used on <sstype> section links in T4. |
| Sample Usage |
<a href="https://www.exeter.ac.uk" class="button">Button</a> |
Button
call-to-action
| Class ID |
call-to-action |
| Description |
Enlarges an existing button object |
| Usage Guidance |
Use on <a> or <button> items. Can also be used on <sstype> section links in T4. Must be used alongside the button class |
| Sample Usage |
<a href="https://www.exeter.ac.uk" class="button call-to-action">Call to action button</a> |
Call to action button
plus-icon
| Class ID |
plus-icon |
| Description |
Adds a + symbol onto the end of an object |
| Usage Guidance |
plus-icon |
| Sample Usage |
<a href="https://www.exeter.ac.uk" class="button plus-icon">Button with plus icon</a> |
Button with plus icon
minus-icon
| Class ID |
minus-icon |
| Description |
Adds a - symbol onto the end of an object |
| Usage Guidance |
Best used in conjunction with the button class |
| Sample Usage |
<a href="https://www.exeter.ac.uk" class="button minus-icon">Button with minus icon</a> |
Button with minus icon
arrow-icon
| Class ID |
arrow-icon |
| Description |
Adds a > symbol onto the end of an object |
| Usage Guidance |
Best used in conjunction with the button class |
| Sample Usage |
<a href="https://www.exeter.ac.uk" class="button arrow-icon">Button with arrow icon</a> |
Button with arrow icon
menu
| Class ID |
menu |
| Description |
Styles a bullet point list into a link menu |
| Usage Guidance |
Use on <ul> items. Must be used inside a template with the feature-box class - i.e Panel. |
| Sample Usage |
<ul class="menu">
<li><a href="https://www.exeter.ac.uk">Menu item 1</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 2</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 3</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 4</a></li>
</ul> |
responsive-list
| Class ID |
responsive-list |
| Description |
Adds a grid layout to menu objects, with 1 column on mobile and 2 columns on desktop |
| Usage Guidance |
Use on <ul> items. Must be used inside a template with the feature-box class - i.e Panel, and must be used in conjunction with the menu class. |
| Sample Usage |
<ul class="menu responsive-list">
<li><a href="https://www.exeter.ac.uk">Menu item 1</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 2</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 3</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 4</a></li>
<li><a href="https://www.exeter.ac.uk">Menu item 5</a></li>
</ul> |