Tile

When to use it

The Tile component is used to create a grid of items, often used in search results, cart items or event listings of a more "dense" sort. It supports different shapes and sizes, including large and square versions. Also, see Card for when a more "sparse" layout (e.g. in a grid) is wanted.

Variants

Use .c-tile--disabled if a "disabled" look is what you want. The modifier .c-tile__head--vertical also exist for tile headings that is directly followed by a paragraph or short text and they need to show up vertically. In most situations however this modifier will not be needed as the text will wrap automatically.

What it looks like

Code examples

Default

<article class="c-tile">
    <a href="/events/kapten-rod" class="c-tile__head">
        <div class="c-tile__image">
            <img class="c-thumb" alt="" src="../temp/thumb1.jpg" />
        </div>
        <h2 class="c-tile__title">Ett evenemang med lång titel kommer här</h2>
    </a>
    <div class="c-tile__body c-tile__body--nowrap">
        <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
        <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
    </div>
</article>

Round image

<article class="c-tile">
    <a href="/events/kapten-rod" class="c-tile__head">
        <div class="c-tile__image">
            <img class="c-thumb c-thumb--round" alt="" src="../temp/thumb2.jpg" />
        </div>
        <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
    </a>
    <div class="c-tile__body c-tile__body--nowrap">
        <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
        <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
    </div>
</article>

Square image

<article class="c-tile">
    <div class="c-tile__image">
        <img class="c-thumb c-thumb--square" alt="" src="../temp/thumb2.jpg" />
    </div>
    <a href="/events/kapten-rod" class="c-tile__head">
        <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
        <p>Lorem ipsum dolor sit amet</p>
    </a>
</article>

With foot

<article class="c-tile">
    <div class="c-tile__head">
        <div class="c-tile__image">
            <img class="c-thumb c-thumb--square" alt="" src="../temp/thumb2.jpg" />
        </div>
        <h4 class="c-tile__title">Studerande <span class="u-font--thinner">215 SEK</span></h4>
    </div>
    <div class="c-tile__body">
        <div class="c-plus-minus c-form-control" data-plus-minus="allow-zero">
            <label for="find-seats-gfs-778693" class="u-hidden--visually">Välj antal</label>
            <button class="c-button c-button--negative" title="Minska med 1">-</button>
            <input class="c-plus-minus__amount select-find-seats-gfs" id="find-seats-gfs-778693" type="number" min="0" max="10" step="1" value="1">
            <button class="c-button c-button--primary c-button--positive" title="Öka med 1">+</button>
        </div>
    </div>
    <div class="c-tile__foot">
        <div class="short-desc u-font--smaller">Giltig studentlegitimation krävs</div>
    </div>
</article>

Disabled

<article class="c-tile c-tile--disabled">
    <a href="/events/kapten-rod" class="c-tile__head">
        <div class="c-tile__image">
            <img class="c-thumb c-thumb--round" alt="" src="../temp/thumb2.jpg" />
        </div>
        <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
    </a>
    <div class="c-tile__body c-tile__body--nowrap">
        <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
        <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
    </div>
</article>

Accessibility notes

Use empty alt-text (alt="") if the image is not considered content (i.e. it is only there for decoration) or if a descriptive alt-text would duplicate information already present in e.g. a heading nearby.