Images

Image container offers preset image aspect ratios for use in UI design. An aspect ratio is the proportion of an element’s width to its height. Aspect ratios are written as width:height.

How to use

To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size.

1:1

3:2

4:3

2:3

3:4

16:9

Best Practices

Refer to the UCLA Brand Guidelines for obtaining images and proper usage.

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. This is a requirement for accessibility since screen readers cannot see images. Adding an alt text also benefits SEO.

States

There are a couple utility classes you can use for images.

Responsive Images

Add the .ucla-img-responsive class to an image.

<img class="ucla-img-responsive" src="image.jpg" alt="Description of the image" />

Rounded Images

Add the .ucla-img-rounded to an image.

Note: Make sure that your image is a 1:1 ratio

<img class="ucla-img-rounded" src="image.jpg" alt="Description of the image" />

Aspect Ratio

If you need an image to be a certain aspect ratio, you’ll need to wrap the image in a <figure class="ucla-img-ratio"> with the following class:

<figure class="ucla-img-ratio ucla-img-ratio-3x2">
  <img src="image.jpg" alt="Description of the image" />
</figure>

The .ucla-img-ratio also works for embeds if a specific aspect ratio is needed.

<figure class="ucla-img-ratio ucla-img-ratio-16x9">
  <iframe src="https://www.youtube.com/embed/-WwgWBDBI0I?si=ZVhE_jGjHrwnjm5U" title="YouTube video player" frameborder="0"></iframe>
</figure>