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.

Health check-ups

Video consultations let you speak with a doctor from the comfort of home.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1758691461990-03b49d969495?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Health check-ups</h3>
    <p class="card-text small">Video consultations let you speak with a doctor from the comfort of home.</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.

insights

A parent's guide to childhood vaccinations

Apr 19, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">insights</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">A parent&#39;s guide to childhood vaccinations</a></h3>
    <p class="small text-muted mb-0">Apr 19, 2026</p>
  </div>
</div>

3Media object

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

Staying active after an injury

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

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="https://images.unsplash.com/photo-1584516150909-c43483ee7932?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">Staying active after an injury</h3>
    <p class="small mb-1">Start in minutes and get help from a real person whenever you need it.</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

Your records are private, secure and always available when you need them.

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-1758691462878-6edc3d3da1be?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">Your records are private, secure and always available when you need them.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Skin check

$92.00

Vaccination

$34.00

Dental cleaning

$81.99

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-8.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">Skin check</a></h3>
        <span class="font-semibold">$92.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-5.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">Vaccination</a></h3>
        <span class="font-semibold">$34.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-2.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">Dental cleaning</a></h3>
        <span class="font-semibold">$81.99</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Sleep tips our doctors actually use

11 hours ago

Staying active after an injury

just now

Sleep tips our doctors actually use

58 min ago

<div class="list-group">
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Sleep tips our doctors actually use</a>
      <p class="small text-muted mb-0">11 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">Staying active after an injury</a>
      <p class="small text-muted mb-0">just now</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary-ink"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Sleep tips our doctors actually use</a>
      <p class="small text-muted mb-0">58 min ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Lucas Haddad

Project Manager

Lea Mensah

Customer Success

Amara Delgado

Sales Executive

<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-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">Lucas Haddad</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-10.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">Lea Mensah</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-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">Amara Delgado</a></h3>
        <small class="text-muted">Sales Executive</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Looking back at a busy season

Every detail is handled by people who care about getting it right.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1631217873436-b0fa88e71f0a?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">Looking back at a busy season</a></h3>
        <p class="small mb-0 hidden sm:block">Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$25.31

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

Insurance friendly

Lab results arrive in your patient portal, usually within 48 hours.

Same-day appointments

Our clinic is fully accessible, with free parking right outside.

Family plans

Friendly reminders make sure you never miss a check-up or a dose.

<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">Insurance friendly</h3>
      <p class="small mb-0">Lab results arrive in your patient portal, usually within 48 hours.</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">Same-day appointments</h3>
      <p class="small mb-0">Our clinic is fully accessible, with free parking right outside.</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">Family plans</h3>
      <p class="small mb-0">Friendly reminders make sure you never miss a check-up or a dose.</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.

umbra.example/project

A parent's guide to childhood vaccinations

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

umbra.example/goal

A simple monthly skin check

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

umbra.example/plan

Understanding your blood test results

Children are welcome, and our paediatric team knows how to make them smile.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success-emphasis">umbra.example/project</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">A parent&#39;s guide to childhood vaccinations</a></h3>
    <p class="small text-muted mb-0">Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">umbra.example/goal</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">A simple monthly skin check</a></h3>
    <p class="small text-muted mb-0">We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">umbra.example/plan</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Understanding your blood test results</a></h3>
    <p class="small text-muted mb-0">Children are welcome, and our paediatric team knows how to make them smile.</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">release-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">community-29</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">project-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-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">journey-21</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV10

When to choose a video consultation

Singapore · 14: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">10</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">When to choose a video consultation</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt" aria-hidden="true"></i> Singapore &middot; 14:30</small>
    </div>
  </div>
</div>

14Inbox rows

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

Ethan Varga
The small habits that make a big difference
12:00
Jonah Alvarez
Our favourite tips for busy weeks
13:45
Nora Okafor
Five things we learned this year
15:45

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-1.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">Ethan Varga</a><p class="small text-muted mb-0">The small habits that make a big difference</p></div><small class="text-muted whitespace-nowrap">12:00</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">Jonah Alvarez</a><p class="small text-muted mb-0">Our favourite tips for busy weeks</p></div><small class="text-muted whitespace-nowrap">13:45</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-3.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">Nora Okafor</a><p class="small text-muted mb-0">Five things we learned this year</p></div><small class="text-muted whitespace-nowrap">15:45</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.

Dental care 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">Dental care</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.

Cardiology

Dermatology

Dental

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758691462123-8a17ae95d203?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">Cardiology</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1631217873436-b0fa88e71f0a?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">Dermatology</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758691462126-2ee47c8bf9e7?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">Dental</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Health check-ups

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

6.1k

Orders

6.2k

Visitors

4.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">
            6.1k
          </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">
            6.2k
          </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">
            4.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.

HR PartnerPart time

Finance · Valencia

QA EngineerRemote

Finance · Copenhagen

Finance LeadFull time

Finance · 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">HR Partner</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Finance &middot; Valencia</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">QA Engineer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Finance &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">Finance Lead</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Finance &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.

What our patients asked us most

Book online in two minutes and see a doctor as soon as today.

#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">What our patients asked us most</a></h3>
    <p class="small">Book online in two minutes and see a doctor as soon as today.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#insights</a> 
  </div>
</div>