Components are pre-designed, reusable elements, such as buttons, cards, etc. with consistent styles and behaviors. Documentation and best practices for usage can be found on the UCLA Design System website on the corresponding component page.
In WordPress, components are accessed through “blocks” and “patterns” that you can use to create and design content within the Gutenberg editor.
Block Usage & Content Elements
Basic Usage
How to access blocks and patterns in WordPress.
Media
How to embed video and images along with recommended sizes and ratios.
Typography
Overview of typographic elements specific to this theme.
Available Components
Accordion
Display content in a compact manner. Accordions provide a space-saving technique for displaying content in your viewport. Users can explore an overview of topics and then expand accordions as needed to see more information.
Alert
An alert keeps users informed of important and sometimes time-sensitive changes.
Banners
Banners are full-width visual elements either at the top of a page or interspersed with content lower down that draws attention to a singular piece of content or functionality. There are currently 5 types.
Button
Prompt visitors to take action with button-style links.
Callout
Component that is used to highlight information.
Cards
A card often represents a discrete piece of content among a series of a common content type. There are currently 7 cards types with configurable variants.
Carousel
A carousel refers to content that’s navigable in a horizontal orientation with an indicator that tells a user where they are in a sequence and accounts for the number of additional content elements accessible to the left or right. It is often used with a sequence of banners or cards.
Chips
A small, interactive element typically used to represent discrete pieces of information, such as tags, keywords, or actions.
Icons
Icons are a simple, easily graspable way to add visual emphasis or interest, signal an action, or indicate a feedback state — all while reducing a user’s cognitive load.
Ribbon
Ribbon treatments bring emphasis to headlines. When using ribbon treatments over photos, try not to be too wordy. Short, punchy sentences are best because they do not distract from
Table
A table shows information in columns and rows. Logically organize information and group like things together, and they make it easier to understand complex content.
Tabs
Tabs provide the ability to navigate different views or facets of the same content.
Tile
A tile is a link component similar to buttons but larger and can contain contextual information on the link. It is also similar to card but not as complex.