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

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

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">Every detail is handled by people who care about getting it right.</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.

tips

Our favourite tips for busy weeks

Mar 29, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">tips</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Our favourite tips for busy weeks</a></h3>
    <p class="small text-body-secondary mb-0">Mar 29, 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 reports turn weekly numbers into decisions in minutes, not days.

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <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 flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">Planning a product launch in six weeks</h3>
    <p class="small mb-1">Clear reports turn weekly numbers into decisions in minutes, not days.</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

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

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-1742440710136-1976b1cad864?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">Our open API and ready-made integrations fit into the stack you already have.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Onboarding workshop

$363.00

Team plan

$17.00

Sales pipeline add-on

$17.00

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Onboarding workshop</a></h3>
        <span class="fw-semibold">$363.00</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">Team plan</a></h3>
        <span class="fw-semibold">$17.00</span>
      </div>
    </div>
  </div>
  <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">Sales pipeline add-on</a></h3>
        <span class="fw-semibold">$17.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

How one support team cut first replies to 20 minutes

4 hours ago

Inside our product roadmap for next year

16 hours ago

A beginner's guide to getting started

just now

<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">How one support team cut first replies to 20 minutes</a>
      <p class="small text-body-secondary mb-0">4 hours ago</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Inside our product roadmap for next year</a>
      <p class="small text-body-secondary mb-0">16 hours ago</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">A beginner&#39;s guide to getting started</a>
      <p class="small text-body-secondary mb-0">just now</p>
    </div>
  </div>
</div>

7Team member cards

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

Ivy Patel

Sales Executive

Jonah Ortega

Frontend Engineer

Aria Okafor

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-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">Ivy Patel</a></h3>
        <small class="text-body-secondary">Sales Executive</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-1.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">Jonah Ortega</a></h3>
        <small class="text-body-secondary">Frontend 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-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">Aria Okafor</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.

What our customers asked us most

Real-time dashboards show what is on track and what needs attention.

<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-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">What our customers asked us most</a></h3>
        <p class="small mb-0 d-none d-sm-block">Real-time dashboards show what is on track and what needs attention.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$20.83

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

Real-time collaboration

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

Open API

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

Open API

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

<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">Real-time collaboration</h3>
      <p class="small mb-0">Our team has done this many times, so you never have to guess.</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">Open API</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 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">Open API</h3>
      <p class="small mb-0">Onboarding guides and live chat help new colleagues get going on day one.</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.

juno-hub.example/project

How one support team cut first replies to 20 minutes

Start free, upgrade when you grow and cancel any time with one click.

juno-hub.example/idea

The small habits that make a big difference

Automations take care of the repetitive steps, so people can focus on real work.

juno-hub.example/routine

How to choose the right plan

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

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">juno-hub.example/project</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How one support team cut first replies to 20 minutes</a></h3>
    <p class="small text-body-secondary mb-0">Start free, upgrade when you grow and cancel any time with one click.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">juno-hub.example/idea</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">The small habits that make a big difference</a></h3>
    <p class="small text-body-secondary mb-0">Automations take care of the repetitive steps, so people can focus on real work.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">juno-hub.example/routine</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How to choose the right plan</a></h3>
    <p class="small text-body-secondary mb-0">We keep things simple, so you can focus on what matters to you.</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">launch-40</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-21</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">release-16</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">release-40</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV2

Planning a product launch in six weeks

Prague · 12: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">2</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Planning a product launch in six weeks</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt" aria-hidden="true"></i> Prague &middot; 12:00</small>
    </div>
  </div>
</div>

14Inbox rows

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

Sofia Ashford
Our favourite tips for busy weeks
18:30
Leo Novak
Writing status updates people actually read
18:00
Ethan Rossi
A practical guide to async work
07: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-7.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 Ashford</a><p class="small text-body-secondary mb-0">Our favourite tips for busy weeks</p></div><small class="text-body-secondary text-nowrap">18:30</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-8.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">Leo Novak</a><p class="small text-body-secondary mb-0">Writing status updates people actually read</p></div><small class="text-body-secondary text-nowrap">18:00</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-11.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">Ethan Rossi</a><p class="small text-body-secondary mb-0">A practical guide to async work</p></div><small class="text-body-secondary text-nowrap">07: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.

Team analytics 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">Team analytics</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

Sales

Marketing

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

17Course card with progress

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

Team analytics

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

6.7k

Orders

267

Visitors

5.9k

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">
            6.7k
          </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">
            267
          </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.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.

QA EngineerPart time

Customer Support · Auckland

Marketing LeadRemote

Operations · Barcelona

Art DirectorFull time

Finance · Edinburgh

<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">QA Engineer</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Customer Support &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">Marketing Lead</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Operations &middot; Barcelona</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">Art Director</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Finance &middot; Edinburgh</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.

The real cost of switching between tools

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

#product

<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">The real cost of switching between tools</a></h3>
    <p class="small">Clear prices, honest advice and no surprises along the way.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#product</a> 
  </div>
</div>