Skip to main content

Tile

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

Examples​

Default​

<div class="bux-tile">
  <a
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></a>

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="http://example.com"> This is a tile </a>
    </h3>
  </div>
</div>

Standard Icon​

<div class="bux-tile">
  <a
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></a>

  <div class="bux-tile__content">
    <img
      class="bux-image bux-tile__std_icon"
      src="/images/placeholders/grad_cap_icon_standard.svg"
      alt=" "
    />

    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="http://example.com"> This is a tile </a>
    </h3>
  </div>
</div>

UI Icon​

<div class="bux-tile">
  <a
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></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__text" href="http://example.com"> This is a tile </a>
    </h3>
  </div>
</div>

Tile with Text​

This is a tile

This is a tile with some additional text.
<div class="bux-tile">
  <a
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></a>

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="http://example.com"> This is a tile </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
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></a>

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

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="http://example.com">
        This is a tile with an image
      </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
    class="bux-tile__link"
    href="http://example.com"
    aria-hidden="true"
    tabindex="-1"
  ></a>

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

  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="http://example.com">
        This is a tile with a 1:1 image ratio
      </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