Tiles

Interactive navigation elements with text-only or media-and-text layouts for linking to content.

@volvo-cars/css v2.5.1

Text Tile Grid

Charging
Service booking
Accessories

Show codeHide code

import { Icon } from '@volvo-cars/react-icons';

export function TextTileGrid() {
  return (
    <ul
      className="grid-cols-3 gap-x-gutter gap-y-24"
      style={{ height: '200px' }}
    >
      <li>
        <a href="#top" className="text-tile">
          <Icon icon="charging-battery" size={24} />
          <span slot="body">Charging</span>
        </a>
      </li>

      <li>
        <a href="#top" className="text-tile">
          <Icon icon="calendar" size={24} />
          <span slot="body">Service booking</span>
        </a>
      </li>

      <li>
        <a href="#top" className="text-tile">
          <Icon icon="plus-circled" size={24} />
          <span slot="body">Accessories</span>
        </a>
      </li>
    </ul>
  );
}

Horizontal media tile

Explore the Volvo ES90

Show codeHide code

<a
  href="#"
  class="media-tile flex-row items-center gap-16"
  style="max-width: 360px"
>
  <div slot="media" class="aspect-3/2" style="width: 125px">
    <img class="img" src="/images/cars/card/es90.avif" alt="" />
  </div>
  <span slot="body">Explore the Volvo ES90</span>
</a>

Media tile grid

Show codeHide code

<ul class="grid-cols-3 gap-x-gutter gap-y-24">
  <li>
    <a href="#" class="media-tile">
      <div slot="media">
        <img class="img" src="/images/cars/thumbnails/ex30-small.avif" alt="" />
      </div>
      <span slot="body">EX30</span>
    </a>
  </li>

  <li>
    <a href="#" class="media-tile">
      <div slot="media">
        <img class="img" src="/images/cars/thumbnails/ex60-small.avif" alt="" />
      </div>
      <span slot="body">EX60</span>
    </a>
  </li>

  <li>
    <a href="#" class="media-tile">
      <div slot="media">
        <img class="img" src="/images/cars/thumbnails/ex90-small.avif" alt="" />
      </div>
      <span slot="body">EX90</span>
    </a>
  </li>
</ul>