Tiles

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.

When to use

Use to feature a small number of link destinations more prominently as core content.

Anatomy

1. Yellow Border (required)

2. Title (required)

3. Text

Additional description or contextual text if needed.

4. Container (required)

The entire element is clickable to a single link.

<a href="#" class="ucla-tile">
  <div class="ucla-tile__body">
    <h4 class="ucla-tile__title">
      Link text lorem ipsum dolor
    </h4>
    <p class="ucla-tile__text">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit.</p>
  </div>
</a>

The tile is built using the following structure:

• .ucla-tile - Main container with colored background and yellow border
  • .ucla-tile__body - Container for title and text
    • .ucla-tile__title - Left-aligned bolded text
    • .ucla-title__text - Left-aligned regular text

<a href="#" class="ucla-tile">
    <div class="ucla-tile__body">
        <h4 class="ucla-tile__title">
            Link text lorem ipsum dolor
        </h4>
        <p class="ucla-tile__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</a>