New web
  1. Typefaces
    1. Alternate Typefaces
    2. Font stacks
    3. Primary Typefaces
    4. Web-specific Typefaces
  2. Content
    1. Buttons
    2. Content
    3. Embelishments
    4. Headings
    5. Headlines
    6. Lists
    7. Messages
    8. WYSIWYG Styles
  3. Colours
    1. Accessibility
    2. Core colours
    3. Core tints
    4. Grey colours (web only)
    5. Social colours
  4. Icons
    1. Academicons
    2. Font Awesome
    3. Icons8
    4. Other icons
    5. Social
    6. Study Area icons
  5. Images
    1. Generated Varieties
    2. Recommended Sizes
  6. Templates
    1. Recruitment Templates
    2. Restricted Templates
    3. Specialised Templates
    4. Standard Templates
    5. Template Heirarchy
  7. Container Templates
    1. About Section - General
    2. Alumni Award Profile
    3. Area header
    4. A-Z People Listing
    5. Campagin Call to Action
    6. Centres Listing
    7. Contacts Footer
    8. Content Promo Banner
    9. Highlights Feature Carousel
    10. Homepage Carousel Slide
    11. Icon List Row
    12. Index Listing Item
    13. Landing Page Find Staff
    14. Landing Page Header
    15. Landing page search
    16. Media gallery
    17. Overview index
    18. People Listing
    19. Quicklinks Box
    20. Related Degrees List
    21. Reputation Story
    22. Reputation Video Content
    23. Section Footer
    24. Subsite Page Header
    25. Video Content
    26. VR Viewer
  8. Global Components
    1. Cookie trail
    2. Menus
    3. Page Footer
    4. Page Header
    5. UON Global Footer
    6. UON Global Header
  9. Content Components
    1. Accordion
    2. Call to action
    3. Icon List
    4. Landing Page - Feature Widgets
    5. Landing Page - Featured Degrees
    6. Landing Page - Featured Rankings
    7. Large Call to Action button
    8. Specialty Grids
    9. Standard Grids
    10. Sub Landing Page - Feature Widgets Grid
  10. Sidebar Components
    1. Sidebar setup
    2. Call to action widget
    3. Events widget
    4. Facebook widget
    5. Feature widget
    6. Highlight widget
    7. LinkedIn widget
    8. News widget
    9. Twitter widget
  11. Logo
    1. Alternate Logo
    2. Restricted Logo
    3. Square Logo
  12. Metadata
    1. Degrees
    2. Disciplines
    3. Dublin Core
    4. Key Dates
    5. MOOCs
    6. Settings
    7. USP
  13. Resources
    1. CSS
    2. Fonts
    3. Images
    4. Javascript
    5. Unicorn library
    6. XSL Templates
  14. Data Sources
    1. CSV
    2. DB
    3. JSON
    4. REST
    5. XML
  15. Parse Files
    1. Blank 2016
    2. Freeform 2016
    3. UON 2016
  16. Developer Guidelines
    1. Asset Setup
    2. Code Templates
    3. Naming Conventions
    4. Regex
  17. Identity Guidelines
    1. Introduction
    2. Brand
    3. Basics
    4. Colour
    5. Typography
    6. Creative
    7. Imagery
    8. Extras
    9. Examples

New web

Web pattern library, style and technical reference

Content

Messages

Default

A paragraph with a class of 'message'. This class can be applied by web publishers using the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="message">Lorem ipsum dolor sit amet…</p>

Info

A paragraph with classes of both 'message' and 'message-info'. These classes can be applied by web publishers using the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="message message-info">Lorem ipsum dolor sit amet…</p>

Success

A paragraph with classes of both 'message' and 'message-success'. These classes can be applied by web publishers using the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="message message-success">Lorem ipsum dolor sit amet…</p>

Alert

A paragraph with classes of both 'message' and 'message-alert'. These classes can be applied by web publishers using the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="message message-alert">Lorem ipsum dolor sit amet…</p>

Fail

A paragraph with classes of both 'message' and 'message-fail'. These classes can be applied by web publishers using the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="message message-fail">Lorem ipsum dolor sit amet…</p>

Last updated
07 August 2018 @ 14:12 — Dean Robinson