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.

Motion graphics

Our motion team turns complex ideas into short films people actually watch.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1752650736677-94fe8cdb9d5c?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Motion graphics</h3>
    <p class="card-text small">Our motion team turns complex ideas into short films people actually watch.</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.

community

A beginner's guide to getting started

Feb 8, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">community</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">A beginner&#39;s guide to getting started</a></h3>
    <p class="small text-muted mb-0">Feb 8, 2026</p>
  </div>
</div>

3Media object

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

What our clients asked us most

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-1787647559705-d2ad3322020e?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">What our clients asked us most</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

We test early with real users, so the final design works on the first day.

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-1742440710193-3547e0b9d4db?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">We test early with real users, so the final design works on the first day.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Social kit

$1,950

Packaging design

$4,450

Design retainer

$3,400

<div class="row g-3">
  <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">Social kit</a></h3>
        <span class="font-semibold">$1,950</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full 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 no-underline">Packaging design</a></h3>
        <span class="font-semibold">$4,450</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-5.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">Design retainer</a></h3>
        <span class="font-semibold">$3,400</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Choosing colours that sell

just now

Looking back at a busy season

yesterday

Why motion matters for modern brands

28 min ago

<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">Choosing colours that sell</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-chat-left-dots-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Looking back at a busy season</a>
      <p class="small text-muted mb-0">yesterday</p>
    </div>
  </div>
  <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">Why motion matters for modern brands</a>
      <p class="small text-muted mb-0">28 min ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Elena Novak

Art Director

Mason Mensah

Customer Success

Chloe Ibrahim

Product Designer

<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-11.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">Elena Novak</a></h3>
        <small class="text-muted">Art Director</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">Mason Mensah</a></h3>
        <small class="text-muted">Customer Success</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">Chloe Ibrahim</a></h3>
        <small class="text-muted">Product Designer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Five things we learned this year

From logo to launch campaign, everything is designed to work together.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1787647561978-df268f9e9ec2?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">Five things we learned this year</a></h3>
        <p class="small mb-0 hidden sm:block">From logo to launch campaign, everything is designed to work together.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$6.61

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

Award-winning team

Every project starts with a workshop, so we understand your audience before we design.

Weekly demos

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

Weekly demos

We have helped more than a hundred companies launch, rebrand and grow online.

<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">Award-winning team</h3>
      <p class="small mb-0">Every project starts with a workshop, so we understand your audience before we design.</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">Weekly demos</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-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Weekly demos</h3>
      <p class="small mb-0">We have helped more than a hundred companies launch, rebrand and grow online.</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.

nimbus-kit.example/routine

The small habits that make a big difference

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

nimbus-kit.example/community

Inside our design process

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

nimbus-kit.example/plan

What our clients asked us most

Every project starts with a workshop, so we understand your audience before we design.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success-emphasis">nimbus-kit.example/routine</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-muted mb-0">Thousands of clients already trust us, and we work hard to keep it that way.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">nimbus-kit.example/community</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Inside our design process</a></h3>
    <p class="small text-muted mb-0">Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div class="relative">
    <small class="text-success-emphasis">nimbus-kit.example/plan</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What our clients asked us most</a></h3>
    <p class="small text-muted mb-0">Every project starts with a workshop, so we understand your audience before we design.</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">process-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-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">goal-1</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">launch-17</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">routine-8</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV2

Planning a month of social content in a day

Copenhagen · 19: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">2</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Planning a month of social content in a day</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Copenhagen &middot; 19:45</small>
    </div>
  </div>
</div>

14Inbox rows

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

Hana Rossi
Designing packaging that survives the shelf
08:15
Nora Okafor
What makes a brand memorable
18:30
Ravi Patel
Choosing colours that sell
09:00

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-7.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">Hana Rossi</a><p class="small text-muted mb-0">Designing packaging that survives the shelf</p></div><small class="text-muted whitespace-nowrap">08:15</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-8.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">Nora Okafor</a><p class="small text-muted mb-0">What makes a brand memorable</p></div><small class="text-muted whitespace-nowrap">18:30</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-2.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 Patel</a><p class="small text-muted mb-0">Choosing colours that sell</p></div><small class="text-muted whitespace-nowrap">09: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.

Motion graphics 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">Motion graphics</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.

Branding

Web

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1752650736252-dff5244c8a7a?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">Branding</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1787647561978-df268f9e9ec2?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">Print</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="https://images.unsplash.com/photo-1753162658407-93888aaabfae?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">Web</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

UX research

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

3.2k

Orders

2.9k

Visitors

4.5k

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">
            3.2k
          </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">
            2.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 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">
            4.5k
          </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.

Product DesignerPart time

Engineering · Lisbon

Data AnalystFull time

Customer Support · Seoul

Product DesignerFull time

Marketing · 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">Product Designer</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Engineering &middot; Lisbon</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">Data Analyst</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-muted">Customer Support &middot; Seoul</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">Marketing &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.

How we ran a rebrand in eight weeks

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

#insights

<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 ran a rebrand in eight weeks</a></h3>
    <p class="small">Every detail is handled by people who care about getting it right.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#insights</a> 
  </div>
</div>