Stretched Link

A stretched link makes its whole containing block clickable, so a card, list row or tile behaves like one big link. The nearest parent with position: relative (such as a card or position-relative) decides how far the clickable area reaches.

1Card with a stretched button

The button link stretches over the whole card; the dashed outline marks the clickable area.

Airport transfers

Thousands of travellers already trust us, and we work hard to keep it that way.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1783443076547-fb9cb67224a0?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Airport transfers</h3>
    <p class="card-text small">Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    <a href="#" class="btn btn-primary btn-sm stretched-link">Explore</a> 
  </div>
</div>

2Card title as the link

Putting stretched-link on the title link makes the heading the accessible name of the whole card.

news

The best time of year to visit Japan

Jul 16, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">news</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">The best time of year to visit Japan</a></h3>
    <p class="small text-muted mb-0">Jul 16, 2026</p>
  </div>
</div>

3Media object

A d-flex row with position-relative so the link covers the image and the text.

Travelling with kids: our tried and tested tips

Flexible dates help you find quieter weeks and better prices.

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="https://images.unsplash.com/photo-1584467541268-b040f83be3fd?auto=format&fit=crop&w=1200&h=800&q=70" alt="" width="120" height="80" class="rounded-md shrink-0 object-cover"> 
  <div>
    <h3 class="h6 mb-1">Travelling with kids: our tried and tested tips</h3>
    <p class="small mb-1">Flexible dates help you find quieter weeks and better prices.</p>
    <a href="#" class="stretched-link small">Continue reading</a> 
  </div>
</div>

4Column as the containing block

Grid columns are not positioned, so add position-relative to the column you want to be clickable.

Only this column is clickable

Start in minutes and get help from a real person whenever you need it.

Open article

<div class="row g-0 bg-surface-3 rounded-md overflow-hidden">
  <div class="col-md-5">
    <img src="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-full h-full object-cover" style="min-height:10rem">
  </div>
  <div class="col-md-7 p-4 relative hp-hit">
    <h3 class="h6">Only this column is clickable</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Ski chalet

$383.99

Weekend getaway

$149.00

Ocean view suite

$266.00

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-10.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Ski chalet</a></h3>
        <span class="font-semibold">$383.99</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-6.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Weekend getaway</a></h3>
        <span class="font-semibold">$149.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-1.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Ocean view suite</a></h3>
        <span class="font-semibold">$266.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

List group items are already positioned, so each row is clickable with one stretched link.

How to travel more responsibly

yesterday

Looking back at a busy season

6 days ago

Hidden beaches of the Mediterranean

yesterday

<div class="list-group">
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-bell-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">How to travel more responsibly</a>
      <p class="small text-muted mb-0">yesterday</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-chat-left-dots-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Looking back at a busy season</a>
      <p class="small text-muted mb-0">6 days ago</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-chat-left-dots-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Hidden beaches of the Mediterranean</a>
      <p class="small text-muted mb-0">yesterday</p>
    </div>
  </div>
</div>

7Team member cards

Profile cards that open the member page from anywhere on the card.

Ava Haddad

Customer Success

Chloe Quinn

Product Designer

Maya Silva

QA Engineer

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-3.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Ava Haddad</a></h3>
        <small class="text-muted">Customer Success</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-9.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Chloe Quinn</a></h3>
        <small class="text-muted">Product Designer</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-11.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Maya Silva</a></h3>
        <small class="text-muted">QA Engineer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

A horizontal card layout with the stretched link in the body.

The best time of year to visit Japan

Airport transfers, tours and dinners are arranged before you arrive.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-full h-full object-cover">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis">The best time of year to visit Japan</a></h3>
        <p class="small mb-0 hidden sm:block">Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$18.80

per month

Select Starter

<div class="card border-primary hp-hit" style="max-width:18rem">
  <div class="card-body text-center">
    <h3 class="h6 uppercase text-primary-ink">Starter</h3>
    <p class="display-6 mb-0">$18.80</p>
    <p class="small text-muted">per month</p>
    <a href="#" class="btn btn-outline-primary w-full stretched-link">Select Starter</a> 
  </div>
</div>

10Feature tiles

Bordered feature tiles made clickable with a position-relative wrapper.

Flexible dates

We keep things simple, so you can focus on what matters to you.

Free cancellation

Family rooms, adults-only retreats and pet-friendly stays in one search.

Flexible dates

From city breaks to safaris, we plan trips around how you like to travel.

<div class="row g-3">
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary-ink"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Flexible dates</h3>
      <p class="small mb-0">We keep things simple, so you can focus on what matters to you.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary-ink"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Free cancellation</h3>
      <p class="small mb-0">Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary-ink"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Flexible dates</h3>
      <p class="small mb-0">From city breaks to safaris, we plan trips around how you like to travel.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
</div>

11Search results

Each result block is one large target, handy on touch screens.

orbiora.example/project

Our favourite small hotels this year

We find the best price, and if you see it cheaper we match it.

orbiora.example/workflow

What our travellers asked us most

We listen first, then build a plan around what you actually need.

orbiora.example/routine

How to pack for two weeks with one bag

Clear prices, honest advice and no surprises along the way.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success-emphasis">orbiora.example/project</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Our favourite small hotels this year</a></h3>
    <p class="small text-muted mb-0">We find the best price, and if you see it cheaper we match it.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">orbiora.example/workflow</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What our travellers asked us most</a></h3>
    <p class="small text-muted mb-0">We listen first, then build a plan around what you actually need.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">orbiora.example/routine</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How to pack for two weeks with one bag</a></h3>
    <p class="small text-muted mb-0">Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

12File tiles

File cards in a drive view open the file from anywhere on the tile.

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-danger-emphasis"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">project-34</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-success-emphasis"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">workflow-5</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-warning-emphasis"><i class="bi bi-filetype-pptx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">goal-24</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-info-emphasis"><i class="bi bi-file-earmark-image-fill" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">journey-36</a>
    </div>
  </div>
</div>

13Event card with date block

A date badge, title and place in one clickable card.

NOV5

Travelling with kids: our tried and tested tips

Edinburgh · 18:30

<div class="card hp-hit" style="max-width:24rem">
  <div class="card-body flex gap-4">
    <div class="text-bg-primary rounded-md text-center px-4 py-2">
      <small class="block">NOV</small><strong class="text-xl">5</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Travelling with kids: our tried and tested tips</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Edinburgh &middot; 18:30</small>
    </div>
  </div>
</div>

14Inbox rows

Message rows where the sender link stretches across the full row.

Mason Brennan
A beginner's guide to getting started
10:45
Ivy Patel
A first-timer's guide to safari
13:30
Lucas Varga
Behind the scenes with our hotel inspectors
16:30

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-6.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Mason Brennan</a><p class="small text-muted mb-0">A beginner&#39;s guide to getting started</p></div><small class="text-muted whitespace-nowrap">10:45</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-4.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Ivy Patel</a><p class="small text-muted mb-0">A first-timer&#39;s guide to safari</p></div><small class="text-muted whitespace-nowrap">13:30</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-10.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Lucas Varga</a><p class="small text-muted mb-0">Behind the scenes with our hotel inspectors</p></div><small class="text-muted whitespace-nowrap">16:30</small></li>
</ul>

15Limiting the clickable area

Only the inner box has position-relative, so the stretched link covers it and not the outer card.

This text is outside the clickable area.

Travel insurance Open

<div class="card">
  <div class="card-body">
    <p class="small text-muted">This text is outside the clickable area.</p>
    <div class="relative bg-surface-3 rounded-md p-4 hp-hit">
      <strong class="block">Travel insurance</strong> <a href="#" class="stretched-link small">Open</a> 
    </div>
  </div>
</div>

16Category image tiles

Image tiles with an overlay caption; the caption link opens the category.

Adventure

Mountain

Beach

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=800&h=800&q=70" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Adventure</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=800&h=800&q=70" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Mountain</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=800&h=800&q=70" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Beach</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

A learning card that resumes the course from anywhere on the card.

Guided tours

48% complete

<div class="card hp-hit" style="max-width:20rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">Guided tours</a></h3>
    <div class="progress mb-1" role="progressbar" aria-label="Course progress" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.5rem">
      <div class="progress-bar" style="width:48%">
      </div>
    </div>
    <small class="text-muted">48% complete</small> 
  </div>
</div>

18Clickable dashboard tiles

Metric tiles that open the matching report.

1.8k

Orders

5.6k

Visitors

6.7k

Tickets

<div class="row g-2">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary-ink"><i class="bi bi-cart-fill" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            1.8k
          </div>
          <a href="#" class="stretched-link small link-secondary">Orders</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary-ink"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            5.6k
          </div>
          <a href="#" class="stretched-link small link-secondary">Visitors</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary-ink"><i class="bi bi-chat-square-text-fill" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            6.7k
          </div>
          <a href="#" class="stretched-link small link-secondary">Tickets</a>
        </div>
      </div>
    </div>
  </div>
</div>

19Job listings

Job rows with the title as the stretched link and the details as plain text.

Project ManagerRemote

Design · Toronto

Art DirectorRemote

Operations · Dublin

Data AnalystRemote

Legal · Cape Town

<div class="list-group">
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Project Manager</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Design &middot; Toronto</small>
  </div>
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Art Director</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Operations &middot; Dublin</small>
  </div>
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Data Analyst</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Legal &middot; Cape Town</small>
  </div>
</div>

20Extra link above the stretched link

Give a second link position-relative and z-2 so it sits above the stretched area and stays clickable on its own.

The small habits that make a big difference

Our team has done this many times, so you never have to guess.

#how-to

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">The small habits that make a big difference</a></h3>
    <p class="small">Our team has done this many times, so you never have to guess.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#how-to</a> 
  </div>
</div>