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

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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#

<div class="bux-tile">
  <a class="bux-tile__link" href="#" aria-hidden="true" tabindex="-1"></a>
  <div class="bux-tile__content">
    <img class="bux-image bux-tile__std_icon" src="/img/location" alt=" " />
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="#">This is a tile</a>
    </h3>
  </div>
</div>

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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#

<div class="bux-tile">
  <a class="bux-tile__link" href="#" 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="#">This is a tile</a>
    </h3>
  </div>
</div>

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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 with some additional text.

<div class="bux-tile">
  <a class="bux-tile__link" href="#" aria-hidden="true" tabindex="-1"></a>
  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="#">This is a tile</a>
    </h3>
    <div class="bux-tile__body">This is a tile with some additional text.</div>
  </div>
</div>

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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 just a little bit of optional text

<div class="bux-tile">
  <a class="bux-tile__link" href="#" aria-hidden="true" tabindex="-1"></a>
  <img class="bux-image" src="/img/location" alt=" " />
  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="#">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>

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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#

<div class="bux-tile">
  <a class="bux-tile__link" href="#" aria-hidden="true" tabindex="-1"></a>
  <div class="bux-tile__image-sq-wrapper">
    <img class="bux-image" src="/img/location" alt=" " />
  </div>
  <div class="bux-tile__content">
    <h3 class="bux-tile__header">
      <a class="bux-tile__text" href="#"> This is a tile with a 1:1 image ratio </a>
    </h3>
  </div>
</div>

<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
    <a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

    {% if tile_img_url %}
        {% set image_url = tile_img_url %}
        {% set image_alt_text = tile_img_alt_text %}
        {% set class = 'bux-image--' ~ image_ratio %}
        {% include '@image' %}
        <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">
            {% set image_url = tile_std_icon_url %}
            {% set image_alt_text = tile_std_icon_alt_text %}
            {% set class = 'bux-tile__std_icon' %}
            {% include '@image' %}
    {% else %}
        <div class="bux-tile__content">
    {% endif %}

    {% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %} 
    <a class="bux-tile__text" href="{{ tile_url }}">
        {{tile_text}}
    </a>
    {% 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.