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.

Expense tracking

Our corporate cards lets the whole team on the same page for teams of every size.

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">Expense tracking</h3>
    <p class="card-text small">Our corporate cards lets the whole team on the same page for teams of every size.</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.

how-to

Fast ways to improve your community

Oct 10, 2025

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">how-to</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Fast ways to improve your community</a></h3>
    <p class="small text-body-secondary mb-0">Oct 10, 2025</p>
  </div>
</div>

3Media object

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

Inside the reliable story

Our invoicing shows data easy to understand in just a few clicks.

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <img src="../assets/img/photo-4.svg" alt="" width="120" height="80" class="rounded flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">Inside the reliable story</h3>
    <p class="small mb-1">Our invoicing shows data easy to understand in just a few clicks.</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

This bright story lets decisions quicker and clearer with friendly support.

Open article

<div class="row g-0 bg-body-tertiary rounded overflow-hidden">
  <div class="col-md-5">
    <img src="../assets/img/photo-6.svg" alt="" class="w-100 h-100 object-fit-cover" style="min-height:10rem">
  </div>
  <div class="col-md-7 p-3 position-relative hp-hit">
    <h3 class="h6">Only this column is clickable</h3>
    <p class="small">This bright story lets decisions quicker and clearer with friendly support.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Virtual card

$443.99

FX transfer

$105.50

Payroll module

$379.00

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Virtual card</a></h3>
        <span class="fw-semibold">$443.99</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">FX transfer</a></h3>
        <span class="fw-semibold">$105.50</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Payroll module</a></h3>
        <span class="fw-semibold">$379.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Update notes for members

just now

How we rebuilt our goal

yesterday

The smart goal checklist

4 days ago

<div class="list-group">
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Update notes for members</a>
      <p class="small text-body-secondary mb-0">just now</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-chat-left-dots" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">How we rebuilt our goal</a>
      <p class="small text-body-secondary mb-0">yesterday</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-chat-left-dots" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">The smart goal checklist</a>
      <p class="small text-body-secondary mb-0">4 days ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Mia Larsen

Art Director

Mateo Hughes

Support Specialist

Arjun Larsen

Finance Lead

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-4.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Mia Larsen</a></h3>
        <small class="text-body-secondary">Art Director</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-8.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Mateo Hughes</a></h3>
        <small class="text-body-secondary">Support Specialist</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-10.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Arjun Larsen</a></h3>
        <small class="text-body-secondary">Finance Lead</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Dashboard notes for members

This smart dashboard turns decisions quicker and clearer in just a few clicks.

<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-100 h-100 object-fit-cover">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis">Dashboard notes for members</a></h3>
        <p class="small mb-0 d-none d-sm-block">This smart dashboard turns decisions quicker and clearer in just a few clicks.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$18.73

per month

Select Starter

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

10Feature tiles

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

24/7 support

A honest process turns customers coming back without the usual hassle.

No hidden fees

A modern plan gives every detail in view on any device.

Accounting sync

This modern dashboard shows decisions quicker and clearer from the very first day.

<div class="row g-3">
  <div class="col-md-4">
    <div class="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-lightning-charge" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">24/7 support</h3>
      <p class="small mb-0">A honest process turns 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="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">No hidden fees</h3>
      <p class="small mb-0">A modern plan gives every detail in view on any device.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Accounting sync</h3>
      <p class="small mb-0">This modern dashboard shows decisions quicker and clearer from the very first day.</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-2.example/workflow

A guide to multi-currency wallets

Our payroll helps results you can measure without the usual hassle.

brand-name-2.example/journey

Calm ways to improve your launch

This reliable community shows decisions quicker and clearer from the very first day.

brand-name-2.example/project

Secure ways to improve your workflow

This practical team turns results you can measure for teams of every size.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">brand-name-2.example/workflow</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">A guide to multi-currency wallets</a></h3>
    <p class="small text-body-secondary mb-0">Our payroll helps results you can measure without the usual hassle.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-2.example/journey</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Calm ways to improve your launch</a></h3>
    <p class="small text-body-secondary mb-0">This reliable community shows decisions quicker and clearer from the very first day.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-2.example/project</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Secure ways to improve your workflow</a></h3>
    <p class="small text-body-secondary mb-0">This practical team turns results you can measure for teams of every size.</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="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-danger"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">project-24</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">workflow-30</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-warning"><i class="bi bi-filetype-pptx" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">experience-37</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-info"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">idea-25</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV15

6 lessons from our community

Prague · 12:45

<div class="card hp-hit" style="max-width:24rem">
  <div class="card-body d-flex gap-3">
    <div class="text-bg-primary rounded text-center px-3 py-2">
      <small class="d-block">NOV</small><strong class="fs-4">15</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">6 lessons from our community</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt" aria-hidden="true"></i> Prague &middot; 12:45</small>
    </div>
  </div>
</div>

14Inbox rows

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

Sofia Lindqvist
The practical story checklist
19:15
Ivy Patel
The elegant routine checklist
08:15
Amara Kowalski
The calm story checklist
15:00

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-5.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Sofia Lindqvist</a><p class="small text-body-secondary mb-0">The practical story checklist</p></div><small class="text-body-secondary text-nowrap">19:15</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-1.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Ivy Patel</a><p class="small text-body-secondary mb-0">The elegant routine checklist</p></div><small class="text-body-secondary text-nowrap">08:15</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-3.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Amara Kowalski</a><p class="small text-body-secondary mb-0">The calm story checklist</p></div><small class="text-body-secondary text-nowrap">15: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.

Business accounts Open

<div class="card">
  <div class="card-body">
    <p class="small text-body-secondary">This text is outside the clickable area.</p>
    <div class="position-relative bg-body-tertiary rounded p-3 hp-hit">
      <strong class="d-block">Business accounts</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.

Cards

Invoices

Savings

<div class="row g-2">
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-1.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Cards</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-2.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Invoices</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-3.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Savings</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Payroll

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

539

Orders

4.9k

Visitors

5.6k

Tickets

<div class="row g-2">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-cart" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            539
          </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 d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-people" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            4.9k
          </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 d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-chat-square-text" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            5.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.

Sales ExecutiveRemote

Research · Auckland

Sales ExecutiveFull time

Legal · Edinburgh

Sales ExecutiveFull time

Operations · Barcelona

<div class="list-group">
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Sales Executive</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Research &middot; Auckland</small>
  </div>
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Sales Executive</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Legal &middot; Edinburgh</small>
  </div>
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Sales Executive</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Operations &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.

Plan notes for members

Our invoicing brings new ideas to life wherever you are.

#community

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Plan notes for members</a></h3>
    <p class="small">Our invoicing brings new ideas to life wherever you are.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#community</a> 
  </div>
</div>