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.

Campaign production

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

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">Campaign production</h3>
    <p class="card-text small">Friendly people answer your questions quickly, by phone, chat or email.</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

Choosing colours that sell

Sep 29, 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">Choosing colours that sell</a></h3>
    <p class="small text-body-secondary mb-0">Sep 29, 2025</p>
  </div>
</div>

3Media object

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

Lessons from a year of client workshops

Websites we build are fast, accessible and easy for your team to update.

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <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 flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">Lessons from a year of client workshops</h3>
    <p class="small mb-1">Websites we build are fast, accessible and easy for your team to update.</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

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

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-1742440710193-3547e0b9d4db?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">Start in minutes and get help from a real person whenever you need it.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Brand sprint

$4,850

Explainer animation

$5,750

UX audit

$2,600

<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">Brand sprint</a></h3>
        <span class="fw-semibold">$4,850</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">Explainer animation</a></h3>
        <span class="fw-semibold">$5,750</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-12.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">UX audit</a></h3>
        <span class="fw-semibold">$2,600</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Inside our design process

14 hours ago

Designing packaging that survives the shelf

just now

Looking back at a busy season

yesterday

<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">Inside our design process</a>
      <p class="small text-body-secondary mb-0">14 hours ago</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">Designing packaging that survives the shelf</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">Looking back at a busy season</a>
      <p class="small text-body-secondary mb-0">yesterday</p>
    </div>
  </div>
</div>

7Team member cards

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

Priya Kim

Customer Success

Liam Patel

Frontend Engineer

Lea Sato

Data Analyst

<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-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">Priya Kim</a></h3>
        <small class="text-body-secondary">Customer Success</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-7.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">Liam Patel</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-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">Lea Sato</a></h3>
        <small class="text-body-secondary">Data Analyst</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Why motion matters for modern brands

We measure success in sign-ups, sales and brand recall, not just awards.

<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-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">Why motion matters for modern brands</a></h3>
        <p class="small mb-0 d-none d-sm-block">We measure success in sign-ups, sales and brand recall, not just awards.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$21.67

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.67</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.

Fast turnaround

Clients stay with us for years because we treat their brand like our own.

Fast turnaround

Senior designers lead every project from the first sketch to the final file.

Fast turnaround

Small teams, short feedback loops and no handoffs lost in translation.

<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">Fast turnaround</h3>
      <p class="small mb-0">Clients stay with us for years because we treat their brand like our own.</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">Fast turnaround</h3>
      <p class="small mb-0">Senior designers lead every project from the first sketch to the final file.</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">Fast turnaround</h3>
      <p class="small mb-0">Small teams, short feedback loops and no handoffs lost in translation.</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.

brioera.example/launch

What makes a brand memorable

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

brioera.example/process

What our clients asked us most

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

brioera.example/idea

How we ran a rebrand in eight weeks

We combine strategy, design and technology to build brands that grow.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">brioera.example/launch</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What makes a brand memorable</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 class="position-relative">
    <small class="text-success">brioera.example/process</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What our clients asked us most</a></h3>
    <p class="small text-body-secondary mb-0">From logo to launch campaign, everything is designed to work together.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brioera.example/idea</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How we ran a rebrand in eight weeks</a></h3>
    <p class="small text-body-secondary mb-0">We combine strategy, design and technology to build brands that grow.</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">experience-8</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">team-9</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">team-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">experience-40</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV24

Five things we learned this year

Auckland · 13:15

<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">24</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Five things we learned this year</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Auckland &middot; 13:15</small>
    </div>
  </div>
</div>

14Inbox rows

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

Felix Delgado
Our favourite tips for busy weeks
12:30
Finn Ashford
How to choose the right project
15:00
Isla Nguyen
Five website mistakes that cost you leads
12: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-9.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 Delgado</a><p class="small text-body-secondary mb-0">Our favourite tips for busy weeks</p></div><small class="text-body-secondary text-nowrap">12:30</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">Finn Ashford</a><p class="small text-body-secondary mb-0">How to choose the right project</p></div><small class="text-body-secondary text-nowrap">15: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">Isla Nguyen</a><p class="small text-body-secondary mb-0">Five website mistakes that cost you leads</p></div><small class="text-body-secondary text-nowrap">12: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.

UX research 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">UX research</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.

Social

Web

Motion

<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-1752650736252-dff5244c8a7a?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">Social</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1787647561978-df268f9e9ec2?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">Web</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1753162658407-93888aaabfae?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">Motion</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Campaign production

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

3.9k

Orders

7.6k

Visitors

2.5k

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">
            3.9k
          </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">
            7.6k
          </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">
            2.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.

Art DirectorFull time

Sales · Copenhagen

Product DesignerRemote

Engineering · Denver

Data AnalystPart time

Marketing · Vancouver

<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">Art Director</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Sales &middot; Copenhagen</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">Product Designer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Engineering &middot; Denver</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">Data Analyst</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Marketing &middot; Vancouver</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.

Planning a month of social content in a day

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

#guide

<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">Planning a month of social content in a day</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 text-decoration-none position-relative z-2">#guide</a> 
  </div>
</div>