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.

Speaker management

Our live streaming helps decisions quicker and clearer without extra tools.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="../assets/img/photo-2.svg" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Speaker management</h3>
    <p class="card-text small">Our live streaming helps decisions quicker and clearer without extra tools.</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

5 lessons from our process

Sep 14, 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">5 lessons from our process</a></h3>
    <p class="small text-muted mb-0">Sep 14, 2026</p>
  </div>
</div>

3Media object

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

The modern plan checklist

A calm routine helps you focused on what matters all year round.

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="../assets/img/photo-4.svg" alt="" width="120" height="80" class="rounded-md shrink-0 object-cover"> 
  <div>
    <h3 class="h6 mb-1">The modern plan checklist</h3>
    <p class="small mb-1">A calm routine helps you focused on what matters all year round.</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

The new networking lounges lets decisions quicker and clearer in just a few clicks.

Open article

<div class="row g-0 bg-surface-3 rounded-md overflow-hidden">
  <div class="col-md-5">
    <img src="../assets/img/photo-6.svg" 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">The new networking lounges lets decisions quicker and clearer in just a few clicks.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Workshop ticket

$309.50

Full access pass

$210.00

Group bundle

$141.50

<div class="row g-3">
  <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">Workshop ticket</a></h3>
        <span class="font-semibold">$309.50</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">Full access pass</a></h3>
        <span class="font-semibold">$210.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">Group bundle</a></h3>
        <span class="font-semibold">$141.50</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

The fast story checklist

yesterday

Inside the practical community

16 hours ago

Inside the fast dashboard

3 days ago

<div class="list-group">
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><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">The fast story checklist</a>
      <p class="small text-muted mb-0">yesterday</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><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">Inside the practical community</a>
      <p class="small text-muted mb-0">16 hours ago</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><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">Inside the fast dashboard</a>
      <p class="small text-muted mb-0">3 days ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Lea Whitaker

Finance Lead

Noah Mensah

Support Specialist

Kenji Ortega

Content Writer

<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">Lea Whitaker</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-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">Noah Mensah</a></h3>
        <small class="text-muted">Support Specialist</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-12.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">Kenji Ortega</a></h3>
        <small class="text-muted">Content Writer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Team notes for attendees

Our ticketing connects the whole team on the same page from the very first day.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="../assets/img/photo-8.svg" 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">Team notes for attendees</a></h3>
        <p class="small mb-0 hidden sm:block">Our ticketing connects the whole team on the same page from the very first day.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$10.38

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">Starter</h3>
    <p class="display-6 mb-0">$10.38</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.

Mobile agenda

This powerful story helps new ideas to life with friendly support.

Hands-on workshops

The new world-class speakers keeps customers coming back without the usual hassle.

Hands-on workshops

A clear process keeps the whole team on the same page for teams of every size.

<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"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Mobile agenda</h3>
      <p class="small mb-0">This powerful story helps new ideas to life with friendly support.</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"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Hands-on workshops</h3>
      <p class="small mb-0">The new world-class speakers keeps customers coming back without the usual hassle.</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"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Hands-on workshops</h3>
      <p class="small mb-0">A clear process keeps the whole team on the same page for teams of every size.</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.

brand-name-20.example/goal

A guide to sponsorship

This calm community lets complex tasks into simple steps wherever you are.

brand-name-20.example/update

Inside the smart update

This flexible plan brings complex tasks into simple steps in just a few clicks.

brand-name-20.example/idea

Journey notes for attendees

A fast project makes your work organised with friendly support.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success">brand-name-20.example/goal</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">A guide to sponsorship</a></h3>
    <p class="small text-muted mb-0">This calm community lets complex tasks into simple steps wherever you are.</p>
  </div>
  <div class="relative">
    <small class="text-success">brand-name-20.example/update</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Inside the smart update</a></h3>
    <p class="small text-muted mb-0">This flexible plan brings complex tasks into simple steps in just a few clicks.</p>
  </div>
  <div class="relative">
    <small class="text-success">brand-name-20.example/idea</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Journey notes for attendees</a></h3>
    <p class="small text-muted mb-0">A fast project makes your work organised with friendly support.</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"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">experience-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-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">team-21</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"><i class="bi bi-filetype-pptx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">release-10</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"><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">goal-1</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV24

The calm community checklist

Montreal · 10:00

<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">24</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">The calm community checklist</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Montreal &middot; 10:00</small>
    </div>
  </div>
</div>

14Inbox rows

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

Luna Patel
Process notes for attendees
18:15
Elena Larsen
Inside the fast process
14:30
Ravi Moreau
How we rebuilt our goal
17:00

<ul class="list-group">
  <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">Luna Patel</a><p class="small text-muted mb-0">Process notes for attendees</p></div><small class="text-muted whitespace-nowrap">18:15</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">Elena Larsen</a><p class="small text-muted mb-0">Inside the fast process</p></div><small class="text-muted whitespace-nowrap">14: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">Ravi Moreau</a><p class="small text-muted mb-0">How we rebuilt our goal</p></div><small class="text-muted whitespace-nowrap">17:00</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.

Ticketing 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">Ticketing</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.

Workshop

Meetup

Keynote

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-1.svg" 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">Workshop</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-2.svg" 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">Meetup</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-3.svg" 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">Keynote</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Speaker management

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

3.3k

Orders

3.5k

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"><i class="bi bi-cart-fill" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            3.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"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            3.5k
          </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"><i class="bi bi-chat-square-text-fill" 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.

Sales ExecutiveFull time

Design · Cape Town

Marketing LeadFull time

Research · Singapore

Product DesignerFull time

Finance · Toronto

<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">Sales Executive</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Design &middot; Cape Town</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">Marketing Lead</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Research &middot; Singapore</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">Product Designer</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Finance &middot; Toronto</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.

Powerful ways to improve your journey

This honest process gives complex tasks into simple steps on any device.

#case study

<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">Powerful ways to improve your journey</a></h3>
    <p class="small">This honest process gives complex tasks into simple steps on any device.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#case study</a> 
  </div>
</div>