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.

Single sign-on

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

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Single sign-on</h3>
    <p class="card-text small">Our team has done this many times, so you never have to guess.</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.

product

The small habits that make a big difference

Aug 1, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">product</span> 
    <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 text-muted mb-0">Aug 1, 2026</p>
  </div>
</div>

3Media object

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

Planning a product launch in six weeks

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

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?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">Planning a product launch in six weeks</h3>
    <p class="small mb-1">Clear prices, honest advice and no surprises along the way.</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

Onboarding guides and live chat help new colleagues get going on day one.

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-1742440710136-1976b1cad864?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">Onboarding guides and live chat help new colleagues get going on day one.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Sales pipeline add-on

$17.00

Starter plan

Free

Priority support

$29.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">Sales pipeline add-on</a></h3>
        <span class="font-semibold">$17.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">Starter plan</a></h3>
        <span class="font-semibold">Free</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">Priority support</a></h3>
        <span class="font-semibold">$29.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 choose the right plan

30 min ago

The real cost of switching between tools

just now

What our customers asked us most

just now

<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 choose the right plan</a>
      <p class="small text-muted mb-0">30 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-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">The real cost of switching between tools</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-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">What our customers asked us most</a>
      <p class="small text-muted mb-0">just now</p>
    </div>
  </div>
</div>

7Team member cards

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

Felix Quinn

Finance Lead

Ivy Moreau

Project Manager

Maya Duarte

Marketing Lead

<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">Felix Quinn</a></h3>
        <small class="text-muted">Finance Lead</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-6.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">Ivy Moreau</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">Maya Duarte</a></h3>
        <small class="text-muted">Marketing Lead</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

How one support team cut first replies to 20 minutes

Clear reports turn weekly numbers into decisions in minutes, not days.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?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">How one support team cut first replies to 20 minutes</a></h3>
        <p class="small mb-0 hidden sm:block">Clear reports turn weekly numbers into decisions in minutes, not days.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$17.56

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

Role-based access

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

Audit trail

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

Dark mode

Set up in an afternoon, connect the tools you use and invite your team.

<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">Role-based access</h3>
      <p class="small mb-0">We listen first, then build a plan around what you actually need.</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">Audit trail</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-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Dark mode</h3>
      <p class="small mb-0">Set up in an afternoon, connect the tools you use and invite your team.</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.

aeroora-flow.example/story

Looking back at a busy season

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

aeroora-flow.example/goal

Five things we learned this year

Plan projects, track progress and share updates without another status meeting.

aeroora-flow.example/story

What we learned shipping 200 releases

Our open API and ready-made integrations fit into the stack you already have.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success-emphasis">aeroora-flow.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Looking back at a busy season</a></h3>
    <p class="small text-muted mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">aeroora-flow.example/goal</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Five things we learned this year</a></h3>
    <p class="small text-muted mb-0">Plan projects, track progress and share updates without another status meeting.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">aeroora-flow.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What we learned shipping 200 releases</a></h3>
    <p class="small text-muted mb-0">Our open API and ready-made integrations fit into the stack you already have.</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">launch-16</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">plan-18</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">community-33</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">dashboard-17</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV28

How to choose the right plan

Edinburgh · 07:45

<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">28</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">How to choose the right plan</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Edinburgh &middot; 07:45</small>
    </div>
  </div>
</div>

14Inbox rows

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

Lea Ashford
A practical guide to async work
11:45
Jonah Ibrahim
A beginner's guide to getting started
19:45
Ravi Kim
Our favourite tips for busy weeks
18:45

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-9.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">Lea Ashford</a><p class="small text-muted mb-0">A practical guide to async work</p></div><small class="text-muted whitespace-nowrap">11:45</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-5.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 Ibrahim</a><p class="small text-muted mb-0">A beginner&#39;s guide to getting started</p></div><small class="text-muted whitespace-nowrap">19: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">Ravi Kim</a><p class="small text-muted mb-0">Our favourite tips for busy weeks</p></div><small class="text-muted whitespace-nowrap">18: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.

Single sign-on 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">Single sign-on</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.

Engineering

Marketing

Product

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?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">Engineering</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?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">Marketing</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?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">Product</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Single sign-on

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

8.3k

Orders

7.1k

Visitors

6.6k

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">
            8.3k
          </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">
            7.1k
          </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.6k
          </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.

Backend EngineerRemote

Design · Austin

Customer SuccessFull time

Design · Dublin

Project ManagerPart time

Engineering · Copenhagen

<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">Backend Engineer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Design &middot; Austin</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">Customer Success</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Design &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">Project Manager</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Engineering &middot; Copenhagen</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.

How we cut our release cycle in half

Granular roles keep sensitive work private while everyone else stays informed.

#update

<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">How we cut our release cycle in half</a></h3>
    <p class="small">Granular roles keep sensitive work private while everyone else stays informed.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#update</a> 
  </div>
</div>