Skip to main content

Tile

A Tile groups an either an icon or image with tile text into a single clickable component.

Examples​

Default​

<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>
  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>
  </div>
</div>

Standard Icon​

<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>
  <div class="bux-tile__content">
    <img
      class="bux-image bux-tile__std_icon"
      src="/images/placeholders/grad_cap_icon_standard.svg"
      alt=" "
      height=""
      width=""
    />

    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>
  </div>
</div>

UI Icon​

<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>
  <div class="bux-tile__content">
    <span class="bux-tile__ui_icon icon-check-circle" aria-hidden="true"></span>

    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>
  </div>
</div>

Tile with Text​

This is a tile

This is a tile with some additional text.
<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>
  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>

    <div class="bux-tile__body">This is a tile with some additional text.</div>
  </div>
</div>

Image Tile​

This is a tile with an image

This is just a little bit of optional text
<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt=" "
    height=""
    width=""
  />

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile with an image</span>
      </a>
    </h3>

    <div class="bux-tile__body">This is just a little bit of optional text</div>
  </div>
</div>

Square Image Tile​

<div class="bux-tile">
  <a
    aria-hidden
    tabindex="-1"
    class="bux-tile__hidden-link"
    href="http://example.com"
    rel="noopener"
  ></a>

  <img
    class="bux-image bux-image--1x1"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt=" "
    height=""
    width=""
  />

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">
          This is a tile with a 1:1 image ratio
        </span>
      </a>
    </h3>
  </div>
</div>

Usage​

Dos​

  • Consider using a single Tile for a single call-to-action
  • If using an Icon, ensure that it is relevant and meaningful to the tile text
  • Keep tile text action-oriented and concise

Don’ts​

  • Don't use if multiple calls-to-action are needed; consider using a CTA Collection

Accessibility​

Determine whether or not your icon or image is decorative or informative. If decorative, you can utilize alt="". If informative, provide alternative text that conveys its purpose or meaning.

As noted in the implementation notes the default state of the tile provides an empty anchor tag that serves to make the entire tile a link. If you choose to utilize this default state you must make sure that the tile text links to the same location.

Back to top