From 99b318ce165bfa7742dd236a0c67146d663b4495 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 8 Sep 2026 00:30:17 +0200
Subject: [PATCH] Name classes instead of Astro props in preview card
 descriptions (#2995)

---
 .changeset/preview-subtitles-classes.md |  5 +++++
 preview/pages/accordion.astro           | 10 +++++-----
 preview/pages/alerts.astro              | 10 +++++-----
 preview/pages/avatars.astro             | 10 +++++-----
 preview/pages/buttons.astro             |  2 +-
 preview/pages/charts-advanced.astro     |  2 +-
 preview/pages/pagination.astro          |  4 ++--
 preview/pages/patterns.astro            |  4 ++--
 preview/pages/progress.astro            | 12 ++++++------
 preview/pages/segmented-control.astro   | 16 ++++++++--------
 preview/pages/stars-rating.astro        |  6 +++---
 preview/pages/tables.astro              |  2 +-
 preview/pages/tags.astro                |  4 ++--
 13 files changed, 46 insertions(+), 41 deletions(-)
 create mode 100644 .changeset/preview-subtitles-classes.md

diff --git a/.changeset/preview-subtitles-classes.md b/.changeset/preview-subtitles-classes.md
new file mode 100644
index 000000000..75d9db3b7
--- /dev/null
+++ b/.changeset/preview-subtitles-classes.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Updated the preview card descriptions to name CSS classes and markup instead of Astro component props.
diff --git a/preview/pages/accordion.astro b/preview/pages/accordion.astro
index 3dfe1588b..3d08467af 100644
--- a/preview/pages/accordion.astro
+++ b/preview/pages/accordion.astro
@@ -25,7 +25,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Flush</CardTitle>
-          <CardSubtitle>Add <code>flush</code> to remove the card border and rounded corners.</CardSubtitle>
+          <CardSubtitle>Add <code>accordion-flush</code> to remove the card border and rounded corners.</CardSubtitle>
         </CardBody>
         <Accordion type={['flush']} id="flush" />
       </Card>
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Tabs</CardTitle>
-          <CardSubtitle>Add <code>tabs</code> for a tab-like header instead of the default style.</CardSubtitle>
+          <CardSubtitle>Add <code>accordion-tabs</code> for a tab-like header instead of the default style.</CardSubtitle>
           <Accordion type={['tabs']} id="tabs" />
         </CardBody>
       </Card>
@@ -43,7 +43,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Inverted</CardTitle>
-          <CardSubtitle>Add <code>inverted</code> to flip the toggle icon to the start of the header.</CardSubtitle>
+          <CardSubtitle>Add <code>accordion-inverted</code> to flip the toggle icon to the start of the header.</CardSubtitle>
           <Accordion type={['inverted']} id="inverted" />
         </CardBody>
       </Card>
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Inverted with plus icon</CardTitle>
-          <CardSubtitle>Combine <code>inverted</code> with a custom <code>toggleIcon</code>.</CardSubtitle>
+          <CardSubtitle>Combine <code>accordion-inverted</code> with <code>accordion-button-toggle-plus</code> and a custom icon in the toggle.</CardSubtitle>
           <Accordion id="inverted-plus" type={['inverted']} toggleIcon="plus" />
         </CardBody>
       </Card>
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With icons</CardTitle>
-          <CardSubtitle>Add <code>showIcon</code> to show an icon next to each panel's title.</CardSubtitle>
+          <CardSubtitle>Add an <code>accordion-button-icon</code> next to each panel's title.</CardSubtitle>
           <Accordion id="icons" showIcon />
         </CardBody>
       </Card>
diff --git a/preview/pages/alerts.astro b/preview/pages/alerts.astro
index 01889e5af..0eef41f83 100644
--- a/preview/pages/alerts.astro
+++ b/preview/pages/alerts.astro
@@ -28,7 +28,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With action</CardTitle>
-          <CardSubtitle>Add a link with the <code>action</code> prop to give users something to do next.</CardSubtitle>
+          <CardSubtitle>Add an <code>alert-action</code> link to give users something to do next.</CardSubtitle>
           <Alert showClose action="Link" color="danger" title="An error occurred!" />
           <Alert showClose action="Link" color="warning" title="Some information is missing!" />
           <Alert showClose action="Link" color="success" title="Completed successfully!" />
@@ -40,7 +40,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Dismissible</CardTitle>
-          <CardSubtitle>Add <code>showClose</code> to let users close the alert.</CardSubtitle>
+          <CardSubtitle>Add <code>alert-dismissible</code> and a <code>btn-close</code> button to let users close the alert.</CardSubtitle>
           <Alert showClose color="danger" title="An error occurred!" />
           <Alert showClose color="warning" title="Some information is missing!" />
           <Alert showClose color="success" title="Completed successfully!" />
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With a description</CardTitle>
-          <CardSubtitle>Add a <code>description</code> or a <code>list</code> when the title alone isn't enough context.</CardSubtitle>
+          <CardSubtitle>Add an <code>alert-description</code> or an <code>alert-list</code> when the title alone isn't enough context.</CardSubtitle>
           <Alert showClose color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
           <Alert showClose color="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
           <Alert showClose color="success" title="Completed successfully!" description="This is a custom alert box with a description." />
@@ -64,7 +64,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Important</CardTitle>
-          <CardSubtitle>Add <code>important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
+          <CardSubtitle>Add <code>alert-important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
           <Alert showClose variant="important" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
           <Alert showClose variant="important" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
           <Alert showClose variant="important" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
@@ -78,7 +78,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Minor</CardTitle>
-          <CardSubtitle>Add <code>minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
+          <CardSubtitle>Add <code>alert-minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
           <Alert showClose variant="minor" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
           <Alert showClose variant="minor" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
           <Alert showClose variant="minor" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
diff --git a/preview/pages/avatars.astro b/preview/pages/avatars.astro
index e38305739..a6ad680f2 100644
--- a/preview/pages/avatars.astro
+++ b/preview/pages/avatars.astro
@@ -42,7 +42,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
       <Card>
         <CardBody>
           <CardTitle>Avatar with icon</CardTitle>
-          <CardSubtitle>Use an icon instead of a photo with the <code>icon</code> prop.</CardSubtitle>
+          <CardSubtitle>Put an icon inside the <code>avatar</code> instead of a photo.</CardSubtitle>
           <div class="avatar-list">
             {iconIcons.map((icon) => <Avatar icon={icon} />)}
           </div>
@@ -64,7 +64,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
       <Card>
         <CardBody>
           <CardTitle>Simple avatar</CardTitle>
-          <CardSubtitle>Pass a <code>person</code> object to render their photo.</CardSubtitle>
+          <CardSubtitle>Show a photo by setting it as the <code>background-image</code> of the avatar.</CardSubtitle>
           <div class="avatar-list">
             {people8.map((person) => <Avatar person={person} />)}
           </div>
@@ -75,7 +75,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
       <Card>
         <CardBody>
           <CardTitle>Avatar placeholder</CardTitle>
-          <CardSubtitle>Fall back to initials with the <code>placeholder</code> prop when there's no photo.</CardSubtitle>
+          <CardSubtitle>Fall back to initials as the avatar text when there's no photo.</CardSubtitle>
           <div class="avatar-list">
             {people8.map((person) => <Avatar placeholder={firstLetters(person.full_name ?? '')} />)}
           </div>
@@ -99,7 +99,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
       <Card>
         <CardBody>
           <CardTitle>Avatar sizes</CardTitle>
-          <CardSubtitle>Six sizes from <code>xxs</code> to <code>xl</code>, for both photos and placeholders.</CardSubtitle>
+          <CardSubtitle>Six sizes from <code>avatar-xxs</code> to <code>avatar-xl</code>, for both photos and placeholders.</CardSubtitle>
           <div class="row">
             <div class="col-6">
               <div class="avatar-list">
@@ -160,7 +160,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
       <Card>
         <CardBody>
           <CardTitle>Avatar statuses</CardTitle>
-          <CardSubtitle>Add a <code>status</code> dot to show online, away, or busy state.</CardSubtitle>
+          <CardSubtitle>Add a <code>badge</code> inside the avatar for an online, away, or busy status dot.</CardSubtitle>
           {statusColors.map((color, i) => <Avatar person={personById(i + 1)} class="rounded-circle" status={color} />)}
         </CardBody>
       </Card>
diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro
index ad83c0d1e..94f8b7525 100644
--- a/preview/pages/buttons.astro
+++ b/preview/pages/buttons.astro
@@ -83,7 +83,7 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
       <Card>
         <CardBody>
           <CardTitle>Sizes</CardTitle>
-          <CardSubtitle>Scale a button from <code>sm</code> to <code>xl</code> without changing its icon layout.</CardSubtitle>
+          <CardSubtitle>Scale a button from <code>btn-sm</code> to <code>btn-xl</code> without changing its icon layout.</CardSubtitle>
           <div class="space-y">
             {
               sizes.map((size) => (
diff --git a/preview/pages/charts-advanced.astro b/preview/pages/charts-advanced.astro
index a4a2aa83d..f30ff96e4 100644
--- a/preview/pages/charts-advanced.astro
+++ b/preview/pages/charts-advanced.astro
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Two y-axes</CardTitle>
-          <CardSubtitle>Plot values with different units together. Bind each axis to a serie with <code>seriesName</code> and move the second one to the right with <code>opposite</code>.</CardSubtitle>
+          <CardSubtitle>Plot values with different units together. Bind each axis to a series with the <code>yaxis.seriesName</code> chart option and move the second one to the right with <code>opposite</code>.</CardSubtitle>
           <Chart chartId="revenue-vs-orders" height={16} label="Revenue in dollars and order count per month" />
         </CardBody>
       </Card>
diff --git a/preview/pages/pagination.astro b/preview/pages/pagination.astro
index aa38386d9..18916d47d 100644
--- a/preview/pages/pagination.astro
+++ b/preview/pages/pagination.astro
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Numbered</CardTitle>
-          <CardSubtitle>Page numbers, with or without <code>text</code> Prev/Next labels.</CardSubtitle>
+          <CardSubtitle>Page numbers, with or without Prev/Next text labels (<code>page-text</code>).</CardSubtitle>
           <Pagination count={5} activeItem={3} />
           <Pagination count={5} activeItem={3} text />
         </CardBody>
@@ -26,7 +26,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With descriptions</CardTitle>
-          <CardSubtitle>Add <code>prevDescription</code>/<code>nextDescription</code> to name the adjacent page.</CardSubtitle>
+          <CardSubtitle>Name the adjacent page with <code>page-item-subtitle</code> for the direction and <code>page-item-title</code> for the page name.</CardSubtitle>
           <Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" />
         </CardBody>
       </Card>
diff --git a/preview/pages/patterns.astro b/preview/pages/patterns.astro
index a356abde0..bbecac14e 100644
--- a/preview/pages/patterns.astro
+++ b/preview/pages/patterns.astro
@@ -59,7 +59,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
       <Card>
         <CardBody>
           <CardTitle>Pattern sizes</CardTitle>
-          <CardSubtitle>Scale the pattern from <code>sm</code> to <code>xl</code>.</CardSubtitle>
+          <CardSubtitle>Scale the pattern from <code>bg-pattern-sm</code> to <code>bg-pattern-xl</code>.</CardSubtitle>
           <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
             {
               patternSizes.map((size) => (
@@ -77,7 +77,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
       <Card>
         <CardBody>
           <CardTitle>Pattern opacity</CardTitle>
-          <CardSubtitle>Scale the pattern strength with <code>lighter</code>, <code>light</code>, <code>dark</code>, or <code>darker</code>.</CardSubtitle>
+          <CardSubtitle>Scale the pattern strength with the <code>bg-pattern-opacity-*</code> utilities.</CardSubtitle>
           <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
             {
               patternOpacities.map((opacity) => (
diff --git a/preview/pages/progress.astro b/preview/pages/progress.astro
index f78b159db..7a67a55d6 100644
--- a/preview/pages/progress.astro
+++ b/preview/pages/progress.astro
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With value</CardTitle>
-          <CardSubtitle>Show the exact percentage inside a larger bar with <code>showValue</code>.</CardSubtitle>
+          <CardSubtitle>Show the exact percentage as the <code>progress-bar</code> text inside a larger bar.</CardSubtitle>
           <div class="space-y">
             <Progress value={10} showValue size="lg" />
             <Progress value={20} showValue size="lg" />
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Sizes</CardTitle>
-          <CardSubtitle>Scale a bar from <code>sm</code> to <code>xl</code>.</CardSubtitle>
+          <CardSubtitle>Scale a bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
           <div class="space-y">
             <Progress value={20} size="sm" />
             <Progress value={40} />
@@ -75,7 +75,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Indeterminate</CardTitle>
-          <CardSubtitle>Animate a bar with no known end point using <code>indeterminate</code>.</CardSubtitle>
+          <CardSubtitle>Animate a bar with no known end point with <code>progress-bar-indeterminate</code>.</CardSubtitle>
           <div class="space-y">
             <Progress indeterminate />
           </div>
@@ -98,7 +98,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Striped</CardTitle>
-          <CardSubtitle>Add diagonal stripes with <code>striped</code> for a textured look.</CardSubtitle>
+          <CardSubtitle>Add diagonal stripes with <code>progress-bar-striped</code> for a textured look.</CardSubtitle>
           <div class="space-y">
             <Progress color="blue" value={20} striped />
             <Progress color="green" value={40} striped />
@@ -112,7 +112,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Animated</CardTitle>
-          <CardSubtitle>Combine <code>striped</code> with <code>animated</code> to keep the stripes moving.</CardSubtitle>
+          <CardSubtitle>Combine <code>progress-bar-striped</code> with <code>progress-bar-animated</code> to keep the stripes moving.</CardSubtitle>
           <div class="space-y">
             <Progress value={20} striped animated />
             <Progress value={40} color="green" striped animated />
@@ -241,7 +241,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle> Progress Description Sizes </CardTitle>
-          <CardSubtitle>Scale the labeled progress bar from <code>sm</code> to <code>xl</code>.</CardSubtitle>
+          <CardSubtitle>Scale the labeled progress bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
           <div class="space-y">
             <ProgressDescription label="Small progress" value={60} size="sm" color="blue" />
             <ProgressDescription label="Default progress" value={70} color="green" />
diff --git a/preview/pages/segmented-control.astro b/preview/pages/segmented-control.astro
index 1b655facc..639a19ff0 100644
--- a/preview/pages/segmented-control.astro
+++ b/preview/pages/segmented-control.astro
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Basic</CardTitle>
-          <CardSubtitle>A list of <code>items</code> is enough for a plain control.</CardSubtitle>
+          <CardSubtitle>A <code>nav-segmented</code> with text <code>nav-link</code> items is enough for a plain control.</CardSubtitle>
           <NavSegmented items={['1', '2', '3', '4']} />
         </CardBody>
       </Card>
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Icons only</CardTitle>
-          <CardSubtitle>Pass <code>icons</code> without <code>items</code> for an icon-only control.</CardSubtitle>
+          <CardSubtitle>Put only an icon in each <code>nav-link</code> for an icon-only control.</CardSubtitle>
           <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} />
         </CardBody>
       </Card>
@@ -43,7 +43,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>With icons</CardTitle>
-          <CardSubtitle>Combine <code>items</code> and <code>icons</code> to label each option.</CardSubtitle>
+          <CardSubtitle>Combine an icon and text in each <code>nav-link</code> to label each option.</CardSubtitle>
           <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} />
         </CardBody>
       </Card>
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Vertical</CardTitle>
-          <CardSubtitle>Add <code>vertical</code> to stack the options in a column.</CardSubtitle>
+          <CardSubtitle>Add <code>nav-segmented-vertical</code> to stack the options in a column.</CardSubtitle>
           <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical />
         </CardBody>
       </Card>
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Vertical with disabled items</CardTitle>
-          <CardSubtitle>Pass indexes to <code>disabled</code> to make specific options unselectable.</CardSubtitle>
+          <CardSubtitle>Add <code>disabled</code> to a <code>nav-link</code> to make that option unselectable.</CardSubtitle>
           <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} />
         </CardBody>
       </Card>
@@ -88,7 +88,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Independent group</CardTitle>
-          <CardSubtitle>Set a unique <code>name</code> so this control doesn't share selection state with others using the same items.</CardSubtitle>
+          <CardSubtitle>Use radio inputs with a unique <code>name</code> so this control doesn't share selection state with others using the same items.</CardSubtitle>
           <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" />
         </CardBody>
       </Card>
@@ -97,7 +97,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Full width</CardTitle>
-          <CardSubtitle>Add <code>block</code> to stretch the control across its container.</CardSubtitle>
+          <CardSubtitle>Add <code>w-100</code> to stretch the control across its container.</CardSubtitle>
           <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} block={true} />
         </CardBody>
       </Card>
@@ -118,7 +118,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Sizes</CardTitle>
-          <CardSubtitle>Set <code>size</code> to <code>sm</code> or <code>lg</code> — with text, icons, or both.</CardSubtitle>
+          <CardSubtitle>Add <code>nav-sm</code> or <code>nav-lg</code> to change the size — with text, icons, or both.</CardSubtitle>
           <div class="space-y">
             <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div>
             <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div>
diff --git a/preview/pages/stars-rating.astro b/preview/pages/stars-rating.astro
index c8b58c19f..3d4f85be4 100644
--- a/preview/pages/stars-rating.astro
+++ b/preview/pages/stars-rating.astro
@@ -25,7 +25,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Icons</CardTitle>
-          <CardSubtitle>Swap the star for any icon with the <code>icon</code> prop.</CardSubtitle>
+          <CardSubtitle>Swap the star for any icon by passing a different SVG to the <code>stars</code> option.</CardSubtitle>
           <div class="space-y">
             <Rating id="icon-star" value={4} />
             <Rating id="icon-heart" icon="heart" value={4} color="red" />
@@ -39,7 +39,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Sizes</CardTitle>
-          <CardSubtitle>Match the rating to surrounding text with <code>size</code>.</CardSubtitle>
+          <CardSubtitle>Match the rating to surrounding text with an <code>icon-sm</code> or <code>icon-lg</code> class on the star.</CardSubtitle>
           <div class="space-y">
             <Rating id="size-sm" value={3} size="sm" />
             <Rating id="size-md" value={3} size="md" />
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
       <Card>
         <CardBody>
           <CardTitle>Colors</CardTitle>
-          <CardSubtitle>Set <code>color</code> to any theme or extended color to match the rest of the page.</CardSubtitle>
+          <CardSubtitle>Color the star with a <code>text-*</code> class, any theme or extended color, to match the rest of the page.</CardSubtitle>
           <div class="space-y">
             <Rating id="color-default" value={3} />
             <Rating id="color-primary" color="primary" value={3} />
diff --git a/preview/pages/tables.astro b/preview/pages/tables.astro
index 89f76c5b5..a9cbd91d8 100644
--- a/preview/pages/tables.astro
+++ b/preview/pages/tables.astro
@@ -35,7 +35,7 @@ import DocsLink from '@ui/DocsLink.astro'
         <CardHeader>
           <div>
             <CardTitle>Striped rows</CardTitle>
-            <CardSubtitle>Alternate row shading with <code>striped</code> to make wide tables easier to scan.</CardSubtitle>
+            <CardSubtitle>Alternate row shading with <code>table-striped</code> to make wide tables easier to scan.</CardSubtitle>
           </div>
         </CardHeader>
         <Table card={true} striped={true} offset={5} />
diff --git a/preview/pages/tags.astro b/preview/pages/tags.astro
index c7caea9e8..4556d6302 100644
--- a/preview/pages/tags.astro
+++ b/preview/pages/tags.astro
@@ -101,7 +101,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
       <Card>
         <CardBody>
           <CardTitle>Selectable tags</CardTitle>
-          <CardSubtitle>Add <code>checkbox</code> to let users toggle a tag on and off.</CardSubtitle>
+          <CardSubtitle>Add a <code>tag-check</code> checkbox to let users toggle a tag on and off.</CardSubtitle>
           <TagList>
             {range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)}
             {range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)}
@@ -114,7 +114,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
       <Card>
         <CardBody>
           <CardTitle>Tags with badge</CardTitle>
-          <CardSubtitle>Add a <code>badge</code> count to the end of the tag.</CardSubtitle>
+          <CardSubtitle>Add a <code>tag-badge</code> count to the end of the tag.</CardSubtitle>
           <TagList>
             {range(1, 12).map((i) => <Tag text="Label" badge={i} />)}
           </TagList>