Skip to Main Content

Basic components like text and accordions.

H1s aren't available for headings, but could be semantically appropriate if markup is actually using sections.

Testing basic text layout

A block of generic text, set in a 2 column section, with 67/33 split. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Adding an accordion section.

To get the design system look for this, we need to set the default spacing to no spacing (changing from auto). 

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

  • Item one
  • Item two
  • Item three
  • Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

  • Item one
  • Item two
  • Item three
  • Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

  • Item one
  • Item two
  • Item three
  • Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

  • Item one
  • Item two
  • Item three
  • Item four

Testing the various banners currently available. 

A text block with a h2 heading.

Could we have a white variant of the text banner? 

Inline media works pretty nicely, scaling to 100% of the parent container. For editing purposes, as well as optimization, it's still best to scale images appropriately - this one is huge in the editor. 

Hilda Valdez

 

Brand System opens a new window

Here is a (background: dark blue) (orientation:vertical) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a default (background: gray) (orientation:vertical) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation:vertical) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Cards in a two column layout

Here is a default (background: gray) (orientation:horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Cards in a two column layout, split at 25/75

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a default (background: gray) (orientation:horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Cards in a two column layout, split at 67/33

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: vertical) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Testing Button in Card

Here is a default (background: gray) (orientation:horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: dark blue) (orientation:horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: dark blue) (orientation:vertical) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation:vertical) card

Here's a H3, semantically correct heading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: horizontal) card

Here's a subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: vertical) card

Here's a H3 subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: vertical) card

Here's a H3 subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: vertical) card

Here's a H3 subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Here is a (background: white) (orientation: vertical) card

Here's a H3 subheading

This is the card. It looks like we have full WYSIWYG editing. That's great!

Testing Button in Card

Card Title

This is the text on the card. This looks funny. If the text on the card is centered, the heading should be too. If left aligned, the button should be left aligned.

Card Title

This is the text on the card. This looks funny. If the text on the card is centered, the heading should be too. If left aligned, the button should be left aligned.

Legacy elements not in design system - focal link

Design system should address legacy components like these focal links. They are useful but could work better by adding support for the full material design icon library, providing consistent sizing/spacing when using custom iconography and getting the icon 'inside' the frame to clearly group the icon with its associated label.

What's not yet available?

Card Variants opens a new window - would be great to prioritize the featured story and story cards but we can also implement close fakes with the basic cards.

Quote banner opens a new window

Callouts opens a new window

Chips opens a new window- probably too atomic for and specific to be generally available.

Tiles opens a new window - these were previously available/achievable as a card variant. We can get close with the dark blue text banner minus the gold accent bar.

About our organization

UCLA Administration has more than 4,700 employees and an annual operating budget of approximately $700 million. Administrative Vice Chancellor Michael J. Beck is responsible for developing policy, monitoring compliance and overseeing campus operations in the following areas: Campus Human Resources opens a new window; Central Ticket Office opens a new window; Environment, Health & Safety opens a new window; Events opens a new window & Transportation opens a new window; Facilities Management opens a new window; Financial & Organizational Services opens a new window, Housing & Hospitality opens a new window; Information Technology Services opens a new window; and UCLA Police Department opens a new window.

News & Views - stories from UCLA Administration

Another Article from News & Views

We'd include another excerpt. Proin elementum aliquet dui, pharetra cursus lacus sollicitudin nec. Nam at lobortis ligula, eu ultrices turpis. 

Another Article from News & Views

We'd include another excerpt. Proin elementum aliquet dui, pharetra cursus lacus sollicitudin nec. Nam at lobortis ligula, eu ultrices turpis.