Web Component Library

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

Documentation Status Types