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.

Volunteer programs

Friendly people answer your questions quickly, by phone, chat or email.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1560220604-1985ebfe28b1?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Volunteer programs</h3>
    <p class="card-text small">Friendly people answer your questions quickly, by phone, chat or email.</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

Stories from the families we support

May 22, 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">Stories from the families we support</a></h3>
    <p class="small text-muted mb-0">May 22, 2026</p>
  </div>
</div>

3Media object

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

Ten ways to fundraise with friends

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

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="https://images.unsplash.com/photo-1778864875183-9a89ea0ac26f?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">Ten ways to fundraise with friends</h3>
    <p class="small mb-1">We listen first, then build a plan around what you actually need.</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

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

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-1706806595136-5afefb45da1a?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">We keep things simple, so you can focus on what matters to you.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Vet care

$60.00

Meal pack

$15.00

Clean water well

$530.00

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-9.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">Vet care</a></h3>
        <span class="font-semibold">$60.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-3.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">Meal pack</a></h3>
        <span class="font-semibold">$15.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-7.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">Clean water well</a></h3>
        <span class="font-semibold">$530.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Five things we learned this year

17 hours ago

Ten ways to fundraise with friends

21 min ago

Five things we learned this year

49 min ago

<div class="list-group">
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-bell" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Five things we learned this year</a>
      <p class="small text-muted mb-0">17 hours ago</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-bell" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Ten ways to fundraise with friends</a>
      <p class="small text-muted mb-0">21 min ago</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-chat-left-dots" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Five things we learned this year</a>
      <p class="small text-muted mb-0">49 min ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Felix Ashford

QA Engineer

Chloe Quinn

Project Manager

Maya Patel

Backend 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-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">Felix Ashford</a></h3>
        <small class="text-muted">QA Engineer</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-7.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">Project Manager</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-2.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 Patel</a></h3>
        <small class="text-muted">Backend Engineer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

What our donors asked us most

Local partners know their communities and make sure help arrives where it matters.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1778864875166-92a5c1adf24a?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">What our donors asked us most</a></h3>
        <p class="small mb-0 hidden sm:block">Local partners know their communities and make sure help arrives where it matters.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$9.22

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">$9.22</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.

Secure giving

Monthly gifts let us plan ahead and respond quickly when disaster strikes.

Volunteer network

You receive photos and updates showing exactly what your donation achieved.

Tax receipts

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

<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" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Secure giving</h3>
      <p class="small mb-0">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</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">Volunteer network</h3>
      <p class="small mb-0">You receive photos and updates showing exactly what your donation achieved.</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">Tax receipts</h3>
      <p class="small mb-0">Thousands of donors already trust us, and we work hard to keep it that way.</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.

glowia.example/routine

Inside the shelter: from rescue to new home

We measure success by how many donors come back and tell their friends.

glowia.example/experience

Meet the partners behind our water projects

Companies can match employee donations and double their impact.

glowia.example/story

Our yearly impact report, explained

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

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success-emphasis">glowia.example/routine</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Inside the shelter: from rescue to new home</a></h3>
    <p class="small text-muted mb-0">We measure success by how many donors come back and tell their friends.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">glowia.example/experience</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Meet the partners behind our water projects</a></h3>
    <p class="small text-muted mb-0">Companies can match employee donations and double their impact.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">glowia.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Our yearly impact report, explained</a></h3>
    <p class="small text-muted mb-0">Our team has done this many times, so you never have to guess.</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">journey-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-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">routine-9</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">launch-9</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" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">update-24</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV14

Looking back at a busy season

Denver · 16: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">14</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Looking back at a busy season</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt" aria-hidden="true"></i> Denver &middot; 16:30</small>
    </div>
  </div>
</div>

14Inbox rows

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

Leo Ibrahim
Why monthly giving makes such a difference
11:00
Hana Ortega
A day in the life of a volunteer
19:15
Ruby Haddad
Our favourite tips for busy weeks
08:15

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-11.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">Leo Ibrahim</a><p class="small text-muted mb-0">Why monthly giving makes such a difference</p></div><small class="text-muted whitespace-nowrap">11:00</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-2.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">Hana Ortega</a><p class="small text-muted mb-0">A day in the life of a volunteer</p></div><small class="text-muted whitespace-nowrap">19:15</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-12.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">Ruby Haddad</a><p class="small text-muted mb-0">Our favourite tips for busy weeks</p></div><small class="text-muted whitespace-nowrap">08:15</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.

Food relief 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">Food relief</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.

Animals

Environment

Relief

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758599668338-4c55a3bd0ce0?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">Animals</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1778864875166-92a5c1adf24a?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">Environment</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758599668360-48ba8ba71b47?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">Relief</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Food relief

32% 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">Food relief</a></h3>
    <div class="progress mb-1" role="progressbar" aria-label="Course progress" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.5rem">
      <div class="progress-bar" style="width:32%">
      </div>
    </div>
    <small class="text-muted">32% complete</small> 
  </div>
</div>

18Clickable dashboard tiles

Metric tiles that open the matching report.

4.6k

Orders

2.7k

Visitors

2.9k

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" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            4.6k
          </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" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            2.7k
          </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" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            2.9k
          </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.

Finance LeadPart time

Research · Copenhagen

Content WriterPart time

Customer Support · Kyoto

Content WriterFull time

Sales · Barcelona

<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">Finance Lead</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Research &middot; Copenhagen</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">Content Writer</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Customer Support &middot; Kyoto</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">Content Writer</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Sales &middot; Barcelona</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.

Why we plant trees with the schools we build

Clean water wells are built with and maintained by local communities.

#insights

<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">Why we plant trees with the schools we build</a></h3>
    <p class="small">Clean water wells are built with and maintained by local communities.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#insights</a> 
  </div>
</div>