Web pattern library, style and technical reference
The below selection of styles are available via the class selector in Easy Edit for quick access by publishers. These are configured via the UON 2016 Design Parse file (#222982).
| Friendly name | Class name(s) | Applies to | Example | Notes |
|---|---|---|---|---|
| Bold Brand Font | bf | h2, h3, h4, h5, h6, strong | ||
| Underlined Heading | underlined | h1, h2, h3, h4, h5, h6 |
| Friendly name | Class name(s) | Applies to | Example | Notes |
|---|---|---|---|---|
| Round image | round-image | img | ||
| Pull Left | pull-left | img | ||
| Pull Right | pull-right | img |
| Friendly name | Class name(s) | Applies to | Example | Notes |
|---|---|---|---|---|
| Popup Link (Lightbox) | popup-link | a | Popup link | No visual style, class used to activate lightbox functionality. |
| Button | button | a | Button | Can be combined with any of the other button classes. |
| Large Button | large-button | a | Large Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Small Button | small-button | a | Small Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Next button | next-button | a | Next Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Previous button | previous-button | a | Previous Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Solid button | solid-button | a | Solid Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Inverted button | inverted-button | a | Inverted Button | Should be applied in addtion to the default 'Button' class, and can be combined with any of the other button classes. |
| Degree link | degree-link | a, em |
|
Only applicable within ol.degree-listing, em style used for new degrees that don't yet have a page to link to. |
| Friendly name | Class name(s) | Applies to | Example | Notes |
|---|---|---|---|---|
| Unstyled list | unstyled-list | ol, ul |
|
|
| Checklist | checklist | ul |
|
|
| Arrowlist | arrowlist | ul |
|
|
| Two-column listing | two-column-listing | ul,ol |
|
|
| Degree listing | degree-listing | ol |
| Friendly name | Class name(s) | Applies to | Example | Notes |
|---|---|---|---|---|
| Intro | intro | p | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
| Section Intro | section-intro | p | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
| Message | message | p | Can also be combined with any one of the below message styles. | |
| Info Message (blue) | message-info | p | Should be applied in addition to the default 'message' class. | |
| Alert Message (yellow) | message-alert | p | Should be applied in addition to the default 'message' class. | |
| Success Message (green) | message-success | p | Should be applied in addition to the default 'message' class. | |
| Error Message (red) | message-fail | p | Should be applied in addition to the default 'message' class. |
| Friendly name | Class name(s) | Applies to | Example | Notes | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Default table (grey) | default-table | table |
|
|||||||||||||
| Blue table | blue-table | table |
|
Should be applied in addition to the 'default-table' class. | ||||||||||||
| Zebra striping | zebra-striping | table |
|
Should be applied in addition to the 'default-table' class. Also works with the 'blue-table' class. |