University of Leeds Design System v1.0.16
Table of contents
Draft
Testing
Ready
@uol-typography-size
@uol-typography-font-face
@uol-typography-heading-epic
@uol-typography-heading-1
@uol-typography-heading-2
@uol-typography-heading-3
@uol-typography-heading-4
@uol-typography-heading-5
@uol-typography-heading-6
@uol-typography-paragraph
@uol-typography-paragraph-intro
@uol-typography-paragraph-small
@uol-typography-ol
@uol-typography-ul
@uol-typography-blockquote
@uol-typography-pull-quote
@uol-typography-hr
@uol-rich-text-table
@uol-in-text-cta
@uol-in-text-facts
@text-highlight
@uol-typography-rich-text
@uol-col
@uol-arrow-link
@uol-favicons-example
@uol-accordion
@uol-accreditation-logos
@uol-article-highlight
@uol-banner
@uol-hero-banner
@uol-breadcrumb
@uol-button
@uol-cards
@uol-chips
@uol-cms-container
@uol-cookie-control
@uol-description-list
@uol-detail-nav
@uol-event-cards
@uol-facts-figures
@uol-filters-panel
@uol-footer-contact
@uol-footer-site-information
@uol-footer-social-media
@uol-footer-supplement
@uol-form
@uol-form-block
@uol-form-input-char-count
@uol-form-input-error-msg
@uol-form-error-msg
@uol-form-input
@uol-form-input-container
@uol-full-width-content
@uol-gallery
@uol-global-marketing-banner
@uol-header
@uol-header-global-masthead
@uol-header-global-quicklinks
@uol-header-global-search
@uol-header-local-masthead
@uol-header-local-navigation
@uol-highlight-block
@uol-icon
@uol-icon-facebook
@uol-icon-instagram
@uol-icon-linkedin
@uol-icon-medium
@uol-icon-threads
@uol-icon-tiktok
@uol-icon-twitter
@uol-icon-weibo
@uol-icon-youtube
@uol-iframe
@uol-image-pair
@uol-image-featured
@uol-in-page-nav
@uol-in-text-icons
@uol-index-table
@uol-info-list
@uol-key-facts
@uol-link-button
@uol-linked-list
@uol-list-featured
@uol-nav-list-group
@uol-logo-group
@uol-logo-uol
@uol-logo-uol-inline
@uol-logo-uol-old-and-new
@uol-multilink-results-item
@uol-multilink-results-items
@uol-navigation-cards
@uol-news-tiles
@uol-page-nav
@uol-pagination
@uol-people-profile-card
@uol-people-profile-cards
@uol-profile-image
@uol-supplement-profile
@uol-publications-items
@uol-publications-list
@uol-results
@uol-results-items
@uol-section-nav-related-content
@uol-section-nav
@uol-section-nav-ctas
@uol-side-nav-container
@uol-skip-link
@uol-status-message
@uol-tiles
@uol-year-of-entry
@uol-article
@uol-site-footer
@uol-form-pattern
@uol-homepage-content
@uol-news-events-search-list
@uol-people-profile-search-results
@uol-pattern-search-results
@uol-staff-a-z
@uol-widget-accreditation-logos
@uol-widget-cards
@uol-widget-content
@uol-widget-ctas
@uol-widget-description-list
@uol-widget-events
@uol-widget-facts-figures
@uol-widget-featured-content
@uol-widget-list-featured
@uol-widget-form
@uol-widget-gallery
@uol-widget-linked-list
@uol-widget-news-events
@uol-widget-news-tiles
@uol-widget-tiles
@uol-template-campaign-landing-page
@uol-template-course
@uol-template-homepage
@uol-template-page
@uol-template-page-index
@uol-template-search
@uol-page-home
@uol-example-article
@uol-example-clearing
@uol-example-cookie-control
@uol-example-document-page
@uol-news-events
@uol-example-search
@uol-example-staff-az
@uol-example-coursefinder
@uol-coursefinder-search-results
@uol-undergraduate-one-page
@uol-example-campaign-landing-page-widgets
@uol-example-confirmation-page-widgets
@uol-example-online-courses-home
@uol-example-student-hub
@uol-example-blog-search-results
@student-profile-directory
@uol-postgraduate-research-opportunities-detail
@uol-postgraduate-research-opportunities-home
@uol-postgraduate-research-opportunities-search-results
Prototype
@uol-page-content
@uol-article-content
@uol-page-heading
@uol-results-count
@uol-widget
@uol-widget-navigation-cards
@uol-template-article
@uol-example-spacing-to-footer
Search
Documentation
Introduction
Table of contents
Colours
Spacing
Responsive Breakpoints
Columns
Typography
Images
Changelog
Elements
Foundations
Typography
Size
Font face
Typography Components
Headings
Heading Epic
Heading Epic: Default
Heading Epic: Sans Serif
Heading 1
Heading 1: Default
Heading 1: Sans Serif
Heading 2
Heading 2: Default
Heading 2: Sans Serif
Heading 3
Heading 3: Default
Heading 3: Sans Serif
Heading 4
Heading 4: Default
Heading 4: Sans Serif
Heading 5
Heading 5: Default
Heading 5: Sans Serif
Heading 6
Heading 6: Default
Heading 6: Sans Serif
Paragraphs
Paragraph
Paragraph: Default
Paragraph: Serif
Paragraph Intro
Paragraph Intro: Default
Paragraph Intro: Serif
Paragraph Small
Paragraph Small: Default
Paragraph Small: Serif
Lists
Ordered List
Unordered List
Blockquote
Blockquote: Default
Blockquote: Cite
Pull Quote
Pull Quote: Left
Pull Quote: Right
Horizontal Rule
Table
Table: Default
Table: With Caption
In text CTAs
In text CTAs: Default
In text CTAs: Heading Level 3
In text CTAs: Heading Level 4
In text CTAs: Heading Level 5
In text CTAs: Heading Level 6
In text CTAs: Heading P Tag
In Text Facts
In Text Facts: Default
In Text Facts: Heading Tag 2 Title
In Text Facts: Heading Tag 4 Title
In Text Facts: Heading Tag 5 Title
In Text Facts: One Fact With Link
In Text Facts: One Fact With No Link
In Text Facts: Two Facts
In Text Facts: Four Facts Stacked
In Text Facts: Long Title And Link Name
Text Highlight
Text Highlight: Default
Text Highlight: Multiple Paragraphs
Rich text
Rich text: Default
Rich text: WordPress
Rich text: Jadu
Rich text: Languages
Rich text: Gallery
Columns
Columns: Default
Columns: Small
Columns: Medium
Columns: Large
Columns: Extra large
Columns: No padding
Columns: Nested
Utilities
Arrow Link
Arrow Link: Default
Arrow Link: Fade in
Arrow Link: Dark background
Arrow Link: Dark background fade in
Favicons
Page Content
Components
Accordion
Accordion: Default
Accordion: Multiple
Accordion: H2
Accordion: H3
Accordion: H4
Accordion: With table
Accordion: with publications
Accreditation Logos
Article Content
Article Content: Default
Article Content: With Lead
Article Highlight
Banner
Banner: Default
Banner: Multiple
Banner Hero
Hero Banner: Default
Hero Banner: With Lead
Breadcrumbs
Button
Cards
Cards: Default
Cards: 6 Cards
Cards: 6 Cards With Video Icon
Cards: 5 Cards
Cards: 4 Cards
Cards: 4 Cards Wide Container
Cards: 3 Cards
Cards: 2 Cards
Cards: 1 Cards
Cards: 7 Cards Featured
Cards: 6 Cards Featured
Cards: 5 Cards Featured
Cards: 4 Cards Featured
Cards: 3 Cards Featured
Cards: 2 Cards Featured
Cards: 1 Cards Featured
Chips
Chips: Default
Chips: Long Text
Chips: Mixed Text Length
Chips: With Url
CMS Container
CMS Container: Default
CMS Container: With Content
Cookie Control
Cookie Control: Default
Cookie Control: Privacy Policy
Cookie Control: Updated
Description List
Description List: 1 item
Description List: 2 items
Description List: 3 items
Description List: 4 items
Description List: 5 items
Description List: 6 items
Detail Nav
Detail Nav: Default
Detail Nav: No Heading
Detail Nav: Active Page
Detail Nav: Section Links
Events Cards
Event cards: Default
Event cards: 7 Cards
Event cards: 6 Cards
Event cards: 5 Cards
Event cards: 4 Cards
Event cards: 3 Cards
Event cards: 2 Cards
Event cards: 1 Card
Facts And Figures
Facts And Figures: 6 items
Facts And Figures: 5 Items
Facts And Figures: 4 Items
Facts And Figures: 3 Items
Facts And Figures: 2 Items
Facts And Figures: 1 Item
Filters Panel
Filters panel: Default
Filters panel: Closed
Filters panel: Different
Footer Partials
Contact Address
Contact: Example
Contact: Uol
Footer Site Information
Social media
Footer Supplement
Form
Form: Default
Form: With Image
Form: With Lead
Form: With Additional Content Before
Form: With Additional Content After
Form: With Form Error
Form: Inline selects and search
Form Block
Form block: Default
Form block: With Image
Form block: With Lead
Form block: With Additional Content Before
Form block: With Additional Content After
Form block: With Form Error
Form Fields
Character count
Input error message
Form error message
Input
Input: Default
Input: Required
Input: Hint
Input: Hint And Error
Input: Search
Input: Search With Error
Input: Search Without Icon
Input: Input With Pattern
Input: Number Input Standard
Input: Phone
Input: Email
Input: Date
Input: Inline Inputs Date
Input: Inline Inputs Time
Input: Time
Input: Password Current
Input: Password New
Input: Url
Input: Radios Optional
Input: Radios Small
Input: Radios Inline
Input: Radios Required
Input: Radios Second Checked
Input: Checkbox Single Required
Input: Checkbox Single Optional
Input: Checkbox Multiple
Input: Checkbox Multiple Small
Input: Select
Input: Select Search
Input: Select Native
Input: Select Pre Selected
Input: Select First Item Enabled
Input: Select Multiple
Input: Select Multiple No Chips
Input: Select Multiple Native
Input: Select Multiple Pre Selected
Input: Textarea
Input: Textarea Medium
Input: Textarea Small
Input: File Upload
Input: Datepicker
Input: Datepicker Date Range
Input: Datepicker Disabled Dates
Input: Datepicker Future Dates Only
Input: Datepicker Disabled Dates And Range
Input: Datepicker Range And Future Dates Only
Input: Datepicker With Error Date Unavailable
Input: Datepicker Range With Error Start Has Passed
Input container
Full Width Content
Full Width Content: Default
Full Width Content: Alternate Content
Gallery
Gallery: One item
Gallery: Two items
Gallery: Three items
Gallery: Four items
Gallery: Five items
Gallery: Six items
Gallery: Seven items
Gallery: Videos
Gallery: Single video with play icon
Gallery: Mixed content
Global marketing banner
Header
Header: Default
Header: Local Navigation
Header: Local Masthead
Header: Local Masthead And Navigation
Header: Local Masthead With Subsite
Header Partials
Global Masthead
Global Masthead: Default
Global Masthead: Current
Global Quicklinks
Global Search
Local Masthead
Local Masthead: Default
Local Masthead: Current Page
Local Masthead: Long Title
Local Masthead: Subsite
Local Masthead: Subsite Long Names
Local Masthead: Subsite Current
Local Navigation
Local Navigation: Default
Local Navigation: Highlight Active Page
highlight block
Icon
Icon: Default
Icon: Icon Right
Icon: Icon Only
Icons
Facebook
Instagram
LinkedIn
Medium
Threads
TikTok
Twitter
Weibo
YouTube
Iframe
Image Pair
Image Pair: Default
Image Pair: One Image
Image Pair: No Caption
Images
Featured Image
Featured Image: Default
Featured Image: With Caption
In Page Navigation
In Page Navigation: Default
In Page Navigation: 8 Links
In Text Icons
Index Table
Index Table: Default
Index Table: Sortable
Index Table: Search Results
Index Table: Images
Index Table: links
Index Table: Multisort
Info List
Info List: Default
Info List: With Email
Info List: With Url
Info List: With Phone
Info List: Event
Info List: Inline
Info List: Inline Lots
Key Facts
Key Facts: Default
Key Facts: Multiple Values
Key Facts: Course Details
Link Button
Link Button: Default
Link Button: 2 Buttons
Link Button: Button With Icon After
Linked List
Linked list: Default
Linked list: 5 Items
List Featured
Featured list: Default
Featured list: Unordered
Nav List Group
Logo Group
Logo Group: Default
Logo Group: One Logo
Logo Group: Two Logos
Logo Group: Three Logos
Logos
University of Leeds
University of Leeds long
University of Leeds old and new
Multilink Results Item
Multilink Results Item: Default
Multilink Results Item: Image
Multilink Results Item: List Item
Multilink Results Item: With Message
Multilink Results Item: With Action
Multilink Results Item: With Multiple Messages Actions
Multilink Results Item: Additional Info
Multilink Results Item: Lead And Close Paragraphs
Multilink Results Item: All
Multilink Results Items
Multilink Results Items: Default
Multilink Results Items: With Actions
Multilink Results Items: With Messages
Multilink Results Items: With Actions And Messages
Navigation Card
Navigation Card: Default
Navigation Card: Two Rows Of Four
Navigation Card: Three Cards
Navigation Card: Different Text Limits
News Tiles
News Tiles: Default
News Tiles: News Tiles Without Image
News Tiles: Four News Tiles
Page Heading
Page Heading: Default
Page Heading: With Category
Page Heading: With Date
Page Heading: With Category And Date
Page Heading: With Multiple Categories And Date
Page Heading: With Subtitle
Page Heading: With In Page Nav
Page Heading: With In Page Nav 8 Items
Page Heading: With Subheading And Position
Page navigation
Page navigation: Default
Page navigation: Previous Only
Page navigation: Next Only
Pagination
Pagination: Default
Pagination: Page 2 Of 4
Pagination: Page 3 Of 4
Pagination: Page 4 Of 4
Pagination: Page 7 Of 10
People Profile Card
People Profile Card: Default
People Profile Card: Image
People Profile Card: List Item
People Profile Card: With Message
People Profile Card: With Action
People Profile Card: With Multiple Messages Actions
People Profile Card: Additional Info
People Profile Cards
People Profile Cards: Default
People Profile Cards: With Actions
People Profile Cards: With Messages
People Profile Cards: With Actions And Messages
Profile Image
Profile Supplement
Profile Supplement: Default
Profile Supplement: Video
Profile Supplement: Small Quote Text
Publications Items
Publications List
Publications List: Default
Publications List: Authors Date And Link
Publications List: All Fields
Publications List: With Category
Results
Results: Default
Results: No Image Examples
Results: Rectangular Image Options
Results: Circular Image Options
Results Count
Results Count: Default
Results Count: No Search Term Empty Container
Results Count: No Results For Search Term
Results Count: Results Custom Message
Results Count: One Result Item No Plural
Results Items
Results Items: Default
Results Items: Events
Results Items: Research Opportunities
Results Items: Courses
Results Items: Multiple Category Items
Results Items: Circular Images
Section Nav Related Content
Section Nav Related Content: Default
Section Nav Related Content: Webpage Link
Section Nav Related Content: Long Email Address
Section Navigation
Section Navigation: Default
Section Navigation: Current Page
Section Navigation Calls To Action
Side Nav Container
Skip Link
Status Message
Status Message: info
Status Message: Success
Status Message: Error
Status Message: Warning
Tiles
Widget
Widget: Default
Widget: Title And Lead
Widget: Title And Lead And Link
Widget: Customisable Heading Level
Year Of Entry
Year Of Entry: Default
Year Of Entry: Single Year
Year Of Entry: Year And Alternate Year
Year Of Entry: Bespoke Label
Patterns
Article
Article: Default
Article: With Profile Supplement
Article: News
Article: Event
Article: Profile
Article: Profile Two
Article: Person Insight
Article: Person Insight Less Detail
Footer
Footer: Default
Footer: Additional links
Footer: Accreditations
Form
Form: Default
Form: Spacing Check
Form: With Errors
Form: With Form Error
Form: Log in
Form: Log in with form error
Form: Search
Form: Search with content after
Form: Radio buttons with search
Form: Radio buttons change search-type
Form: Search with single typeahead
Homepage Content
News Events Search And List
News Events Search And List: News
News Events Search And List: News With Featured Item
News Events Search And List: News With Search Term
News Events Search And List: News With Search Term And No Results
News Events Search And List: Events
News Events Search And List: Events With Featured Event
News Events Search And List: Events Search Results
People profile search results
Search Results
Search results pattern: Default
Search results pattern: With Content Area
Search results pattern: With Content Area Paragraphs Only
Search results pattern: Without Search Form
Search results pattern: Without Search Form And With Content Area
Search results pattern: With Map
Search results pattern: With Map And Content Area
Search results pattern: With Sort Option
Search results pattern: With Filter Option
Search results pattern: With Filter And Sort By
Search results pattern: With Multiselect Without Chips
Staff A Z
Staff A-Z New: Default
Staff A-Z New: With Error
Staff A-Z New: With No Results
Staff A-Z New: With Results
Widgets
Accreditation Logos Widget
Cards Widget
Cards Widget: Default
Cards Widget: 6 Cards
Cards Widget: 5 Cards
Cards Widget: 4 Cards
Cards Widget: 4 Cards Wide
Cards Widget: 3 Cards
Cards Widget: 2 Cards
Cards Widget: 1 Cards
Cards Widget: 7 Cards Featured
Cards Widget: 6 Cards Featured
Cards Widget: 5 Cards Featured
Cards Widget: 4 Cards Featured
Cards Widget: 3 Cards Featured
Cards Widget: 2 Cards Featured
Cards Widget: 1 Cards Featured
Content widget
Content widget: Default
Content widget: Image
Content widget: Video
Content widget: Block quotes
Content widget: Accordion
Content widget: Accordion with table
Content widget: With CTA
Content widget: Content guidance
CT As Widget
Description List Widget
Description List Widget: 1 item
Description List Widget: 2 items
Description List Widget: 3 items
Description List Widget: 4 items
Description List Widget: 5 items
Description List Widget: 6 items
Events Widget
Events Widget: Default
Events Widget: 7 Cards
Events Widget: 6 Cards
Events Widget: 5 Cards
Events Widget: 4 Cards
Events Widget: 3 Cards
Events Widget: 2 Cards
Events Widget: 1 Card
Facts And Figures Widget
Facts And Figures Widget: 6 items
Facts And Figures Widget: 5 Items
Facts And Figures Widget: 4 Items
Facts And Figures Widget: 3 Items
Facts And Figures Widget: 2 Items
Facts And Figures Widget: 1 Item
Featured Content Widget
Featured Content Widget: Default
Featured Content Widget: With Arrow Links
Featured Content Widget: With Image
Featured Content Widget: With Video
Featured Content Widget: With Captioned Image
Featured Content Widget: With Typography Elements
Featured Content Widget: With Arrow Links And Video
Featured List Widget
Featured List Widget: Default
Featured List Widget: Unordered
Featured List Widget: With Rich Text
Form
Form widget: Default
Form widget: With Errors
Form widget: With Form Error
Form widget: Log in
Form widget: Log in with form error
Form widget: Search
Form widget: Search with content after
Form widget: Inline selects and search
Gallery
Gallery widget: One item
Gallery widget: Two items
Gallery widget: Three items
Gallery widget: Four items
Gallery widget: Five items
Gallery widget: Six items
Gallery widget: Seven items
Gallery widget: Videos
Gallery widget: Mixed content
Linked list widget
Navigation Cards Widget
Navigation Cards Widget: Default
Navigation Cards Widget: Two Rows Of Four
Navigation Cards Widget: Three Cards
News And Events Widget
News And Events Widget: Default
News And Events Widget: 5 Cards With Summary Only
News And Events Widget: 1 Card With Summary Only
News And Events Widget: 2 Cards With Summary Only
News And Events Widget: 3 Cards With Summary Only
News And Events Widget: With Image Only
News And Events Widget: With Image And Summary Only
News And Events Widget: Summary Only
News And Events Widget: Summary Only No Widget Link
News And Events Widget: With Image And Summary Only No Widget Link
News Tiles widget
Widget Tiles
Tiles widget: Default
Tiles widget: 2 Tiles
Tiles widget: 3 Tiles
Tiles widget: 4 Tiles
Tiles widget: 5 Tiles
Tiles widget: 6 Tiles
Tiles widget: 6 Tiles No Images
Tiles widget: 2 Tiles Plus Fact
Tiles widget: 3 Tiles Plus Fact
Tiles widget: 4 Tiles Plus Fact
Tiles widget: 5 Tiles Plus Fact
Tiles widget: 6 Tiles Plus Fact
Tiles widget: 2 Plus Profile
Tiles widget: 3 Plus Profile
Tiles widget: 4 Plus Profile
Tiles widget: 5 Plus Profile
Tiles widget: 6 Plus Profile
Tiles widget: 2 Plus Fact And Profile
Tiles widget: 3 Plus Fact And Profile
Tiles widget: 4 Plus Fact And Profile
Tiles widget: 5 Plus Fact And Profile
Tiles widget: 6 Plus Fact And Profile
Templates
Article
Campaign Landing Page
Course
Homepage
Page
Page Index
Search
Examples
Homepage
Homepage: Default
Homepage: Section Navigation
Homepage: Hero Banner
Homepage: Section Navigation With Breadcrumb
Homepage: Hero Banner Section Navigation With Breadcrumb
Homepage: Section Navigation With Navigation Cards
Homepage: Section Navigation With Ctas And Related Content
Homepage: Single Banner Item
Homepage: Featured Content Widgets
Homepage: Featured Content Widgets Side Navigation
Homepage: Cards Widgets
Homepage: Cards Widgets Side Navigation
Homepage: Tiles Widgets
Homepage: Tiles Widgets Side Navigation
Homepage: News Tiles Widgets
Homepage: News Tiles Widgets Side Navigation
Homepage: Content Widgets
Homepage: Content Widgets Side Navigation
Homepage: News And Events Widgets
Homepage: News And Events Widgets Side Navigation
Homepage: Facts And Figures Widgets
Homepage: Facts And Figures Widgets Side Navigation
Homepage: Form Widgets
Homepage: Form Widgets With Side Navigation
Homepage: Featured List
Homepage: Featured List With Side Navigation
Homepage: Footer Supplement Present
Article
Article: Default
Article: Ckeditor Pattern
Article: Section Navigation
Article: News
Article: Event
Article: Profile
Article: Profile No Image
Article: Person Insight
Article: With Events Supplement
Article: With News Supplement
Article: Person Insight With Section Navigation
Article: With Profile Supplement
Article: With Section Navigation And Profile Supplement
Article: Blog
Article: Buildings And Rooms
Clearing
Cookie Control
Cookie Control: Default
Cookie Control: Privacy Policy
Cookie Control: Updated
Document Page
Document Page: Default
Document Page: Multi Page
Document Page: Multi Page 8 Pages
Document Page: With Side Navigation
Document Page: Gallery
Document Page: Ctas
Document Page: With Featured Image
News And Events
News And Events: News
News And Events: News With Featured Item
News And Events: News With Search Term
News And Events: Events
News And Events: Events With Featured Event
News And Events: Events Search Results
Search
Search Results
Search Results: Default
Search Results: Publications
Spacing To Footer
Spacing To Footer: Default
Spacing To Footer: Blockquote
Spacing To Footer: Paragraph
Spacing To Footer: Text Highlight
Spacing To Footer: Accordion
Spacing To Footer: Image Pair With Captions
Spacing To Footer: Image Pair No Captions
Spacing To Footer: Lists
Spacing To Footer: Table
Spacing To Footer: Image
Spacing To Footer: Video
Spacing To Footer: Cta
Spacing To Footer: Logo Group
Spacing To Footer: In Text Icons
Spacing To Footer: In Text Facts
Spacing To Footer: Linked List
Staff A Z
Staff A Z: Default
Staff A Z: With Error
Staff A Z: With No Results
Staff A Z: With Results
Products
Coursefinder
Pages
Home
Search Results
Undergraduate One Page
Online Courses
Campaign Landing Page Example
Campaign Landing Page Example: Default
Campaign Landing Page Example: With Error
Campaign Landing Page Widgets
Campaign Landing Page Example Widgets
CLP Confirmation Page
Confirmation Page Example Widgets
Homepages
Home
Student Hub
Pages
Blog Search Results
Student Profiles Directory
Student Profile Directory
Postgraduate Research Opportunities
Pages
Detail
Detail: Default
Detail: Research Areas
Detail: Projects
Detail: Funding
Home
Search Results
Search Results: Default
Search Results: Research Areas
Search Results: Projects
Search Results: Supervisors
Search Results: Funding