diff --git a/content/components/breadcrumb.md b/content/components/breadcrumb.md
index 4c18310..fc3a6f8 100644
--- a/content/components/breadcrumb.md
+++ b/content/components/breadcrumb.md
@@ -17,7 +17,7 @@ Use the `breadcrumb` shortcode to display the current page’s location within t
 The following shortcode displays a breadcrumb for the current page.
 
 <!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
+{{< example lang="hugo" resize="true" >}}
 {{</* breadcrumb */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
diff --git a/content/components/card.md b/content/components/card.md
index ab77d73..c71c1a0 100644
--- a/content/components/card.md
+++ b/content/components/card.md
@@ -21,7 +21,7 @@ Use the `card` shortcode to display a card that links to a content page. When us
 Use `title`, `thumbnail`, `icon`, and inner content to define the card's content inline. You can add `padding` and `class` attributes to further refine the card's layout.
 
 <!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
+{{< example lang="hugo" resize="true" >}}
 {{</* card padding="3" class="col-sm-12 col-lg-8 mx-auto mb-3" title="Title"
     icon="fa address-card" */>}}
     This is the `body` of the card. It supports Markdown.
diff --git a/content/components/carousel.md b/content/components/carousel.md
index f16659e..e9cc477 100644
--- a/content/components/carousel.md
+++ b/content/components/carousel.md
@@ -19,7 +19,7 @@ Use the `carousel` shortcode to display a carousel of several images, with simil
 Set the `ratio` to `1x1` for a square aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
+{{< example lang="hugo" resize="true" >}}
 {{</* carousel id="carousel-1x1" ratio="1x1" class="col-sm-12 col-lg-6 mx-auto" */>}}
   {{</* img src="img/placeholder.png" caption="slide 1" */>}}
   {{</* img src="img/placeholder.png" caption="slide 2" */>}}
diff --git a/content/components/example.md b/content/components/example.md
index 6179188..87d96fa 100644
--- a/content/components/example.md
+++ b/content/components/example.md
@@ -78,6 +78,31 @@ This is a lead paragraph. It stands out from regular paragraphs.
 {{</* /example */>}}
 ```
 
+### Resizable preview
+
+{{< release version="v3.2.0" >}}
+
+Set `resize` to `true` to add a grip to the lower-right corner of the preview. Drag it to narrow the preview and observe how the component reflows.
+
+> [!IMPORTANT]
+> The grip demonstrates *fluid* reflow — content wrapping, text truncation, tables gaining a scrollbar, images scaling. It does **not** trigger responsive breakpoints. Bootstrap 5's responsive classes (`navbar-expand-*`, `col-md-*`, and similar) are viewport media queries, so they respond to the size of the browser window, not the size of the preview. To preview breakpoint behavior, resize the browser window instead.
+
+#### Preview
+
+{{< example lang="hugo" resize="true" >}}
+This is a lead paragraph. It stands out from regular paragraphs.
+{.lead}
+{{< /example >}}
+
+#### Input
+
+```go-html-template
+{{</* example resize="true" */>}}
+This is a lead paragraph. It stands out from regular paragraphs.
+{.lead}
+{{</* /example */>}}
+```
+
 ## Arguments
 
 The shortcode supports the following arguments:
diff --git a/content/components/image.md b/content/components/image.md
index 93a44aa..ea45e03 100644
--- a/content/components/image.md
+++ b/content/components/image.md
@@ -21,7 +21,7 @@ As an example, the following shortcodes display a centered image with various as
 Set the `ratio` to `1x1` for a square aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
+{{< example lang="hugo" resize="true" >}}
 {{</* image src="img/placeholder.png" ratio="1x1" wrapper="col-6 mx-auto" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
diff --git a/content/components/navs-and-tabs.md b/content/components/navs-and-tabs.md
index f4aefbd..f6b5242 100644
--- a/content/components/navs-and-tabs.md
+++ b/content/components/navs-and-tabs.md
@@ -21,7 +21,7 @@ By default, navs are left-aligned, but you can easily change them to center or r
 Centered with `.justify-content-center`:
 
 <!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
+{{< example lang="hugo" resize="true" >}}
 {{</* nav class="justify-content-center" */>}}
   {{</* nav-item title="Nav Item #1" show="true" /*/>}}
   {{</* nav-item title="Nav Item #2" /*/>}}
diff --git a/content/components/table.md b/content/components/table.md
index 0193911..f0710cd 100644
--- a/content/components/table.md
+++ b/content/components/table.md
@@ -21,7 +21,7 @@ weight: 330
 Use the table shortcode to make your markdown table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens. The following example illustrates how this works.
 
 <!-- markdownlint-disable MD037 MD058 -->
-{{< example lang="markdown" >}}
+{{< example lang="markdown" resize="true" >}}
 {{</* table */>}}
 | #  | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
 |----|---------|---------|---------|---------|---------|---------|---------|---------|---------|