Tile

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

Examples

Default

This is a tile

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

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </div>
</div>

Standard Icon

This is a tile

<div class="bux-tile">
  <a class="bux-tile__hidden-link" href="http://example.com" rel="noopener" aria-hidden 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__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>
  </div>
</div>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </div>
</div>

UI Icon

This is a tile

<div class="bux-tile">
  <a class="bux-tile__hidden-link" href="http://example.com" rel="noopener" aria-hidden 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__link" href="http://example.com" rel="noopener">
        <span class="bux-tile__link__text">This is a tile</span>
      </a>
    </h3>
  </div>
</div>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </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__hidden-link" href="http://example.com" rel="noopener" aria-hidden tabindex="-1">
  </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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </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__hidden-link" href="http://example.com" rel="noopener" aria-hidden 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__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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </div>
</div>

Square Image Tile

This is a tile with a 1:1 image ratio

<div class="bux-tile">
  <a class="bux-tile__hidden-link" href="http://example.com" rel="noopener" aria-hidden 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__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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Tile

Note: the tile can have an image, image icon, BUX icon, or no image. 

Available variables:

- tile_img_url:           URL for tile image.
- tile_image_alt_text:      Alt text for tile image.
- image_ratio:              Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon:                  Machine name of BUX Icon.
- tile_std_icon_url:        URL for the tile image icon.
- tile_std_icon_alt_text:   String. Alt text for the image icon.
- h_level:                  Integer. Sets the heading level of the tile header.
- tile_url:                 URL for the tile.
- tile_text:                String for the tile text.
- tile_body:                Extra tile content. Optional.

#}

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    {% include '@link' with {
        base_class: 'bux-tile__hidden-link',
        link_url: tile_url,
        attributes: {
            'aria-hidden': true,
            tabindex: -1
        }
    } %}

    {% if tile_img_url %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_img_url,
            image_alt_text: tile_img_alt_text,
            class: 'bux-image--' ~ image_ratio
        } %}
        <div class="bux-tile__content">
    {% elseif ui_icon %}
        <div class="bux-tile__content">
        <span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
    {% elseif tile_std_icon_url %}
        <div class="bux-tile__content">
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with {
            image_url: tile_std_icon_url,
            image_alt_text: tile_std_icon_alt_text,
            class: 'bux-tile__std_icon'
        } %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}

    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
        base_class: 'bux-tile__link',
        link_url: tile_url,
        link_text: tile_text,
        show_underline: false
    } %}
    {% if h_level %}</h{{ h_level|default(2) }}>{% endif %}

    {% if tile_body %}
      <div class="bux-tile__body"> {{ tile_body }} </div>
    {% endif %}  
  </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.