Web Component Library

bitbucket Report an Issue Slack Join the Slack Discussion

The Web Components Library is the digital application of UCLA’s brand. It contains a suite of components, guidelines and code to assist you in designing and developing websites and web applications for UCLA.

Goals

  • Create a more cohesive experience and unified brand for end users
  • Support campus teams who want to create web experiences that follow brand guidelines, web standards and accessibility guidelines
  • Invite members of campus to contribute and help us thoughtfully improve and expand the library to serve the needs of campus

Core Principles

Support common needs

Our goal is to thoughtfully improve and expand the component library to support the most common needs on campus. Before recommending an enhancement or component, we encourage you to consider the utility for other designers, developers and end users. In a place as diverse and large as UCLA, it’s a challenge to anticipate what other people need. We always appreciate contributions based on pattern research, insights into user needs, industry trends and usability standards.

Design for flexibility

People will use components to address design problems in different ways. When suggesting an enhancement or new component, think about all the ways in which it might be used. Specify the minimum requirements for that component to function, and then define optional add-ons based on different use cases. Design and develop with flexibility in mind.

Collaborate with others

This project is an iterative and community-driven effort. We encourage you to work with other people to get feedback, conduct research or build new features. When you submit an enhancement or feature to the library, know that other people will eventually review, refine and build on your work.

Visual Guidance

Following UCLA’s Brand Guidelines, our web components should be designed to deliver on an open, optimistic, energetic, and progressive look and feel. Some things to consider that may help deliver this aesthetic:

  • Generous whitespace
  • Elements that break the plane of their containers
  • Rules that draw from one element to another
  • Overlapping elements
  • Rounded edges of interactive elements

Component Status Types

LabelDescription
Component is a “work in progress.” Component has been reviewed at least once, and there is a branch with notes from the governance team.
Component has never been submitted for review, and no branch with notes exist from the governance team.
Component has a branch that is currently under review by the UCLA governance team.
Component is ready for use in production websites and applications.
Component is no longer supported in the library and is not encouraged in production websites and applications.

Documentation Status Types

LabelDescription
Documentation for corresponding component is ready for referencing.
Documentation for corresponding component is underway.