Tiles

Interactive links and buttons with text or media.

@volvo-cars/css v3.1.0

Text tile grid

Our shopping tools

Current offers
Book a test drive
Configure yours

Show codeHide code

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

export function TextTileGrid() {
  return (
    <div className="stack-s">
      <h2 className="heading-2">Our shopping tools</h2>
      <ul className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-gutter gap-y-24">
        <li>
          <a href="#top" className="text-tile" style={{ minHeight: '200px' }}>
            <Icon aria-hidden="true" icon="bills" size={24} />
            <span slot="title">Current offers</span>
          </a>
        </li>
        <li>
          <a href="#top" className="text-tile" style={{ minHeight: '200px' }}>
            <Icon aria-hidden="true" icon="steering-wheel" size={24} />
            <span slot="title">Book a test drive</span>
          </a>
        </li>
        <li>
          <a href="#top" className="text-tile" style={{ minHeight: '200px' }}>
            <Icon aria-hidden="true" icon="car-side-profile" size={24} />
            <span slot="title">Configure yours</span>
          </a>
        </li>
      </ul>
    </div>
  );
}

Media tile grid

Our newest models

Show codeHide code

<div class="stack-m">
  <h2 class="heading-2">Our newest models</h2>
  <ul class="grid-cols-1 md:grid-cols-2 lg: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>
        <h3 slot="title">EX30</h3>
        <p slot="body">Compact electric SUV</p>
      </a>
    </li>
    <li>
      <a href="#" class="media-tile">
        <div slot="media">
          <img
            class="img"
            src="/images/cars/thumbnails/ex60-small.avif"
            alt=""
          />
        </div>
        <h3 slot="title">EX60</h3>
        <p slot="body">Versatile family electric SUV</p>
      </a>
    </li>
    <li>
      <a href="#" class="media-tile">
        <div slot="media">
          <img
            class="img"
            src="/images/cars/thumbnails/ex90-small.avif"
            alt=""
          />
        </div>
        <h3 slot="title">EX90</h3>
        <p slot="body">Our spacious flagship SUV</p>
      </a>
    </li>
  </ul>
</div>

Framed media tile

Explore the Volvo ES90

Discover range, comfort and Scandinavian design.

Show codeHide code

<a href="#" class="media-tile" data-variant="framed" style="max-width: 360px">
  <div slot="media">
    <img class="img" src="/images/cars/card/es90.avif" alt="" />
  </div>
  <span slot="title">Explore the Volvo ES90</span>
  <p slot="body">Discover range, comfort and Scandinavian design.</p>
</a>