Cards

Content containers for displaying related information with text-only or media-and-text layouts.

@volvo-cars/css v2.5.1

Text card grid

Private lease EX60 with included insurance

Private Lease

From 8 495kr/month
Shop
Care. By Volvo Business lease with included wall charger

Business Lease

From 8 995 kr/month
Explore

Show codeHide code

<!-- Set the height on the grid container so all cards in the row stretch equally -->
<ul class="grid-cols-2 gap-gridded-element" style="height: 400px">
  <li class="text-card">
    <h3 slot="title">Private lease EX60 with included insurance</h3>
    <p slot="subtitle">Private Lease</p>
    <p slot="body">From 8 495kr/month</p>
    <a class="link-underlined" slot="action" href="#">Shop</a>
  </li>

  <li class="text-card">
    <h3 slot="title">
      Care. By Volvo Business lease with included wall charger
    </h3>
    <p slot="subtitle">Business Lease</p>
    <p slot="body">From 8 995 kr/month</p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </li>
</ul>

Media card grid

EX30

Electric

From 3900 kr / month or 350 000 kr
Explore
ES90

Electric

From 5990 kr / month or 670 000 kr
Explore
EX90

Electric

From 6990 kr / month or 770 000 kr
Explore

Show codeHide code

<ul class="grid-cols-3 gap-gridded-element">
  <li class="media-card">
    <img
      slot="media"
      class="img aspect-1/1 object-contain"
      src="/images/cars/thumbnails/ex30.avif"
      alt=""
    />
    <h3 slot="title">EX30</h3>
    <p slot="subtitle">Electric</p>
    <p slot="body">From 3900 kr / month or 350 000 kr</p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </li>

  <li class="media-card">
    <img
      slot="media"
      class="img aspect-1/1 object-contain"
      src="/images/cars/thumbnails/es90.avif"
      alt=""
    />
    <h3 slot="title">ES90</h3>
    <p slot="subtitle">Electric</p>
    <p slot="body">From 5990 kr / month or 670 000 kr</p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </li>

  <li class="media-card">
    <img
      slot="media"
      class="img aspect-1/1 object-contain"
      src="/images/cars/thumbnails/ex90.avif"
      alt=""
    />
    <h3 slot="title">EX90</h3>
    <p slot="subtitle">Electric</p>
    <p slot="body">From 6990 kr / month or 770 000 kr</p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </li>
</ul>