docs(components): enable and document the resizable example preview

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 -->

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.

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" */>}}

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:

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 -->

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" /*/>}}

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 |
 |----|---------|---------|---------|---------|---------|---------|---------|---------|---------|