Skip to main content
UCL Logo Navigate back to homepage

Main navigation

  • Home
  • Study

    Study

    • Study at UCL
    • Prospective students
    • Current students
    • Accommodation
    • Careers
    • Doctoral School
    • Immigration and visas
    • Student finances
    • Support and wellbeing
  • Research

    Research

    • Research at UCL
    • Engage with us
    • Explore our Research
    • Initiatives and networks
    • Research news
  • Engage

    Engage

    • Engage with UCL
    • Alumni
    • Business partnerships and collaboration
    • Global engagement
    • News and Media relations
    • Policy and political engagement
    • Schools and priority groups
    • Give to UCL
  • About

    About

    • About UCL
    • Who we are
    • Faculties
    • Governance
    • President and Provost
    • Strategy
    • UCL's Bicentenary
  • UCL Logo Active parent page: Brand and Experience at UCL
    • Brand
    • Active parent page: Experience

Components

Our design system components provide consistent, accessible building blocks for creating intuitive user interfaces, each designed with flexibility and usability in mind.

Breadcrumb trail

  • UCL Brand and Experience
  • UCL design system

Faculty menu

  • Current page: Components
    • Accordion
    • Alert
    • Avatar
    • Blanket
    • Breadcrumbs
    • Buttons
    • Checkboxes
    • Date picker
    • Dialog
    • Drawer
    • Dropdown
    • Footer
    • Radio buttons
    • Side bar
    • Text area
    • Text input
    • Toggle

Breadcrumb trail

  • UCL Brand and Experience
  • Experience
  • UCL design system
  • Components

Our component library

Components form the foundation of our design system, offering reusable patterns that solve common interface problems. By standardising these elements, we ensure consistency across our products while reducing development time and cognitive load for our users.

Each component has been carefully crafted to balance form and function. They support various states, responsive behaviours, and accessibility requirements to create seamless experiences across devices. By using these pre-built components, you can focus on solving unique product challenges rather than reinventing basic interface elements.

Can’t find what you need?

Don’t worry, there’s more on the way. See the roadmap to find out about upcoming releases.

UCL footer

Visit

  • Bloomsbury Theatre and Studio
  • Library, Museums and Collections
  • UCL Maps
  • UCL Shop
  • Contact UCL

Students

  • Accommodation
  • Current Students
  • Moodle
  • Students' Union

Staff

  • Inside UCL
  • Staff Intranet
  • Work at UCL
  • Human Resources
UCL Logo

University College London, Gower Street, London, WC1E 6BT

Tel: +44 (0) 20 7679 2000

UCL social media menu

  • Link to Instagram
  • Link to LinkedIn
  • Link to Youtube
  • Link to TikTok
  • Link to Facebook
  • Link to Bluesky
  • Link to Threads
  • Link to Soundcloud
Here, it can happen.
Back to top

Essential

  • Disclaimer
  • Freedom of Information
  • Accessibility
  • Cookies
  • Privacy
  • Slavery statement
  • Log in

© 2026 UCL