Web Component Library

Our goals are to:

• 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 expand the library to serve the needs of campus

Core Principles

Support common needs

Our goal is to thoughtfully expand and improve the component library to support the most common needs on campus. Before recommending an enhancement or component, we encourage you to consider the utility to 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](https://brand.ucla.edu/), 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

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

Documentation Status Types

Label	Description
Ready	Documentation for corresponding component is ready for referencing.
In Progress	Documentation for corresponding component is underway.