University of Leeds Design System v1.0.14.2
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-accordion
@uol-accreditation-logos
@uol-article-content
@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-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-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-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-widget
@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-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-example-search-results
@uol-undergraduate-one-page
@uol-language-exchange-base
@uol-langex-form-my-matches
@uol-langex-form-my-profile
@uol-language-exchange-home
@uol-language-exchange-my-profile
@uol-language-exchange-my-matches
@uol-language-exchange-meet-up-tips
@uol-language-exchange-guidance
@uol-language-exchange-admin-dashboard
@uol-language-exchange-admin-edit-users
@uol-language-exchange-admin-languages
@uol-language-exchange-admin-usage
@uol-example-blog-search-results
@uol-postgraduate-research-opportunities-detail
@uol-postgraduate-research-opportunities-home
@uol-postgraduate-research-opportunities-search-results
Prototype
@uol-page-content
@uol-page-heading
@uol-results-count
@uol-widget-navigation-cards
@uol-template-article
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 Facts
In Text Facts: Default
In Text Facts: One Fact With Link
In Text Facts: One Fact With No Link
In Text Facts: Two Facts
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
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
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
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
Publications Items
Publications List
Publications List: Default
Publications List: Authors Date And Link
Publications List: All Fields
Publications List: With Category
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
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: More Link
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: 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: 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
Ctas 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
Course
Homepage
Page
Page Index
Search
Examples
Homepage
Homepage: Default
Homepage: Section Navigation
Homepage: 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
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
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
Language Exchange
Base template
Components
My Matches form
My Profile form
Pages
Home
My profile
My matches
Meet-up tips
Guidance
Admin
Dashboard
Edit users
Languages
Usage
Online Courses
Pages
Blog Search Results
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