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.

Business accounts

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

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Business accounts</h3>
    <p class="card-text small">We measure success by how many members come back and tell their friends.</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.

case study

How we keep your money safe

Dec 5, 2025

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">case study</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">How we keep your money safe</a></h3>
    <p class="small text-body-secondary mb-0">Dec 5, 2025</p>
  </div>
</div>

3Media object

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

Our favourite tips for busy weeks

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

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <img src="https://images.unsplash.com/photo-1573164574511-73c773193279?auto=format&fit=crop&w=1200&h=800&q=70" alt="" width="120" height="80" class="rounded flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">Our favourite tips for busy weeks</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 money is protected by bank-grade security and regulated partners.

Open article

<div class="row g-0 bg-body-tertiary rounded overflow-hidden">
  <div class="col-md-5">
    <img src="https://images.unsplash.com/photo-1758518731706-be5d5230e5a5?auto=format&fit=crop&w=1200&h=800&q=70" 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">Your money is protected by bank-grade security and regulated partners.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Business loan

Free

Expense add-on

$7.00

Tax reserve

Free

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Business loan</a></h3>
        <span class="fw-semibold">Free</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Expense add-on</a></h3>
        <span class="fw-semibold">$7.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-11.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">Tax reserve</a></h3>
        <span class="fw-semibold">Free</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

The small habits that make a big difference

just now

Getting paid on time: invoice tips that work

just now

Budgeting basics for small teams

18 min ago

<div class="list-group">
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">The small habits that make a big difference</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-bell-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Getting paid on time: invoice tips that work</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-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Budgeting basics for small teams</a>
      <p class="small text-body-secondary mb-0">18 min ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Kenji Varga

Operations Manager

Nadia Novak

Backend Engineer

Maya Moreau

Content Writer

<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-2.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">Kenji Varga</a></h3>
        <small class="text-body-secondary">Operations Manager</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-3.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">Nadia Novak</a></h3>
        <small class="text-body-secondary">Backend Engineer</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-12.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">Maya Moreau</a></h3>
        <small class="text-body-secondary">Content Writer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

How to choose the right account

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

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1758518729685-f88df7890776?auto=format&fit=crop&w=1200&h=800&q=70" 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">How to choose the right account</a></h3>
        <p class="small mb-0 d-none d-sm-block">We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$21.13

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">$21.13</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

Accounting sync keeps your books up to date without manual exports.

Spending limits

No monthly fees on the basic plan and no hidden charges on transfers.

No hidden fees

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

<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-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">24/7 support</h3>
      <p class="small mb-0">Accounting sync keeps your books up to date without manual exports.</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">Spending limits</h3>
      <p class="small mb-0">No monthly fees on the basic plan and no hidden charges on transfers.</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">No hidden fees</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>

11Search results

Each result block is one large target, handy on touch screens.

glowis.example/story

How to close your books faster every month

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

glowis.example/journey

What to look for in a business account

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

glowis.example/workflow

Our favourite tips for busy weeks

Set approval rules for large payments and see who spent what, and why.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">glowis.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How to close your books faster every month</a></h3>
    <p class="small text-body-secondary mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">glowis.example/journey</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What to look for in a business account</a></h3>
    <p class="small text-body-secondary mb-0">Thousands of members already trust us, and we work hard to keep it that way.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">glowis.example/workflow</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Our favourite tips for busy weeks</a></h3>
    <p class="small text-body-secondary mb-0">Set approval rules for large payments and see who spent what, and why.</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">journey-31</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">update-17</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">story-18</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-fill" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">launch-40</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV10

A beginner's guide to getting started

Edinburgh · 07:00

<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">10</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">A beginner&#39;s guide to getting started</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Edinburgh &middot; 07:00</small>
    </div>
  </div>
</div>

14Inbox rows

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

Felix Fischer
How a coffee roaster cut card fees by a third
11:30
Sofia Mensah
How we keep your money safe
10:00
Ruby Delgado
Paying international suppliers without high fees
08:45

<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-10.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">Felix Fischer</a><p class="small text-body-secondary mb-0">How a coffee roaster cut card fees by a third</p></div><small class="text-body-secondary text-nowrap">11:30</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">Sofia Mensah</a><p class="small text-body-secondary mb-0">How we keep your money safe</p></div><small class="text-body-secondary text-nowrap">10:00</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-2.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">Ruby Delgado</a><p class="small text-body-secondary mb-0">Paying international suppliers without high fees</p></div><small class="text-body-secondary text-nowrap">08: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.

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.

Savings

Payments

Cards

<div class="row g-2">
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1526948531399-320e7e40f0ca?auto=format&fit=crop&w=800&h=800&q=70" 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 class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758518729685-f88df7890776?auto=format&fit=crop&w=800&h=800&q=70" 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">Payments</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1758518730037-a16581a040e8?auto=format&fit=crop&w=800&h=800&q=70" 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>

17Course card with progress

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

Business accounts

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

902

Orders

6.1k

Visitors

6.4k

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-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            902
          </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-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            6.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 d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-chat-square-text-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            6.4k
          </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.

Frontend EngineerFull time

Marketing · Oslo

Sales ExecutiveFull time

Design · Prague

QA EngineerFull time

Sales · Austin

<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">Frontend Engineer</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Marketing &middot; Oslo</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">Design &middot; Prague</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">QA Engineer</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Sales &middot; Austin</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.

Running payroll for your first five hires

Issue virtual and physical cards to your team with limits you control.

#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 text-decoration-none">Running payroll for your first five hires</a></h3>
    <p class="small">Issue virtual and physical cards to your team with limits you control.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#update</a> 
  </div>
</div>