@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-size.mdx

@@ -0,0 +1,184 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "font-size";
+export const description = "Utilities for controlling the font size of an element.";
+
+<ApiTable
+  rows={[
+    [
+      "text-xs",
+      "font-size: var(--text-xs); /* 0.75rem (12px) */ \nline-height: var(--text-xs--line-height); /* calc(1 / 0.75) */",
+    ],
+    [
+      "text-sm",
+      "font-size: var(--text-sm); /* 0.875rem (14px) */ \nline-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */",
+    ],
+    [
+      "text-base",
+      "font-size: var(--text-base); /* 1rem (16px) */ \nline-height: var(--text-base--line-height); /* calc(1.5 / 1) */",
+    ],
+    [
+      "text-lg",
+      "font-size: var(--text-lg); /* 1.125rem (18px) */ \nline-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */",
+    ],
+    [
+      "text-xl",
+      "font-size: var(--text-xl); /* 1.25rem (20px) */ \nline-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */",
+    ],
+    [
+      "text-2xl",
+      "font-size: var(--text-2xl); /* 1.5rem (24px) */ \nline-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */",
+    ],
+    [
+      "text-3xl",
+      "font-size: var(--text-3xl); /* 1.875rem (30px) */ \nline-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */",
+    ],
+    [
+      "text-4xl",
+      "font-size: var(--text-4xl); /* 2.25rem (36px) */ \nline-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */",
+    ],
+    ["text-5xl", "font-size: var(--text-5xl); /* 3rem (48px) */ \nline-height: var(--text-5xl--line-height); /* 1 */"],
+    [
+      "text-6xl",
+      "font-size: var(--text-6xl); /* 3.75rem (60px) */ \nline-height: var(--text-6xl--line-height); /* 1 */",
+    ],
+    [
+      "text-7xl",
+      "font-size: var(--text-7xl); /* 4.5rem (72px) */ \nline-height: var(--text-7xl--line-height); /* 1 */",
+    ],
+    ["text-8xl", "font-size: var(--text-8xl); /* 6rem (96px) */ \nline-height: var(--text-8xl--line-height); /* 1 */"],
+    ["text-9xl", "font-size: var(--text-9xl); /* 8rem (128px) */ \nline-height: var(--text-9xl--line-height); /* 1 */"],
+    ["text-(length:<custom-property>)", "font-size: var(<custom-property>);"],
+    ["text-[<value>]", "font-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `text-sm` and `text-lg` to set the font size of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm</span>
+        <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-base</span>
+        <p className="text-base font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-lg</span>
+        <p className="text-lg font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-xl</span>
+        <p className="text-xl font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-2xl</span>
+        <p className="text-2xl font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-sm,text-base,text-lg,text-xl,text-2xl] -->
+<p class="text-sm ...">The quick brown fox ...</p>
+<p class="text-base ...">The quick brown fox ...</p>
+<p class="text-lg ...">The quick brown fox ...</p>
+<p class="text-xl ...">The quick brown fox ...</p>
+<p class="text-2xl ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Setting the line-height
+
+Use utilities like `text-sm/6` and `text-lg/7` to set the font size and line-height of an element at the same time:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/6</span>
+        <p className="text-sm/6 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/7</span>
+        <p className="text-sm/7 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/8</span>
+        <p className="text-sm/8 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-sm/6,text-sm/7,text-sm/8] -->
+<p class="text-sm/6 ...">So I started to walk into the water...</p>
+<p class="text-sm/7 ...">So I started to walk into the water...</p>
+<p class="text-sm/8 ...">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="text" name="font size" value="14px" variable="text-size" dataType="length" />
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="font-size" defaultClass="text-sm" featuredClass="text-base" />
+
+## Customizing your theme
+
+<CustomizingYourTheme utility="text" name="font size" customValue="0.625rem" customName="tiny">
+
+You can also provide default `line-height`, `letter-spacing`, and `font-weight` values for a font size:
+
+```css
+@theme {
+  --text-tiny: 0.625rem;
+  --text-tiny--line-height: 1.5rem; /* [!code highlight] */
+  --text-tiny--letter-spacing: 0.125rem; /* [!code highlight] */
+  --text-tiny--font-weight: 500; /* [!code highlight] */
+}
+```
+
+</CustomizingYourTheme>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-smoothing.mdx

@@ -0,0 +1,67 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "font-smoothing";
+export const description = "Utilities for controlling the font smoothing of an element.";
+
+<ApiTable
+  rows={[
+    ["antialiased", "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;"],
+    ["subpixel-antialiased", "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;"],
+  ]}
+/>
+
+## Examples
+
+### Grayscale antialiasing
+
+Use the `antialiased` utility to render text using grayscale antialiasing:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 antialiased dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:antialiased] -->
+<p class="antialiased ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Subpixel antialiasing
+
+Use the `subpixel-antialiased` utility to render text using subpixel antialiasing:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 subpixel-antialiased dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:subpixel-antialiased] -->
+<p class="subpixel-antialiased ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="p"
+  properties={["-webkit-font-smoothing", "-moz-osx-font-smoothing"]}
+  defaultClass="antialiased"
+  featuredClass="subpixel-antialiased"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-stretch.mdx

@@ -0,0 +1,138 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "font-stretch";
+export const description = "Utilities for selecting the width of a font face.";
+
+<ApiTable
+  rows={[
+    ["font-stretch-ultra-condensed", "font-stretch: ultra-condensed; /* 50% */"],
+    ["font-stretch-extra-condensed", "font-stretch: extra-condensed; /* 62.5% */"],
+    ["font-stretch-condensed", "font-stretch: condensed; /* 75% */"],
+    ["font-stretch-semi-condensed", "font-stretch: semi-condensed; /* 87.5% */"],
+    ["font-stretch-normal", "font-stretch: normal; /* 100% */"],
+    ["font-stretch-semi-expanded", "font-stretch: semi-expanded; /* 112.5% */"],
+    ["font-stretch-expanded", "font-stretch: expanded; /* 125% */"],
+    ["font-stretch-extra-expanded", "font-stretch: extra-expanded; /* 150% */"],
+    ["font-stretch-ultra-expanded", "font-stretch: ultra-expanded; /* 200% */"],
+    ["font-stretch-<percentage>", "font-stretch: <percentage>;"],
+    ["font-stretch-(<custom-property>)", "font-stretch: var(<custom-property>);"],
+    ["font-stretch-[<value>]", "font-stretch: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `font-stretch-condensed` and `font-stretch-expanded` to set the width of a font face:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          font-stretch-extra-condensed
+        </span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-condensed dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          font-stretch-condensed
+        </span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-condensed dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-normal</span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-normal dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          font-stretch-expanded
+        </span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-expanded dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          font-stretch-extra-expanded
+        </span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-expanded dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:font-stretch-extra-condensed,font-stretch-condensed,font-stretch-normal,font-stretch-expanded,font-stretch-extra-expanded] -->
+<p class="font-stretch-extra-condensed">The quick brown fox...</p>
+<p class="font-stretch-condensed">The quick brown fox...</p>
+<p class="font-stretch-normal">The quick brown fox...</p>
+<p class="font-stretch-expanded">The quick brown fox...</p>
+<p class="font-stretch-extra-expanded">The quick brown fox...</p>
+```
+
+</Figure>
+
+This only applies to fonts that have multiple width variations available, otherwise the browser selects the closest match.
+
+### Using percentages
+
+Use `font-stretch-<percentage>` utilities like `font-stretch-50%` and `font-stretch-125%` to set the width of a font face using a percentage:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-50%</span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-50% dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-100%</span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-100% dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-150%</span>
+        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-150% dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:font-stretch-50%,font-stretch-100%,font-stretch-150%] -->
+<p class="font-stretch-50%">The quick brown fox...</p>
+<p class="font-stretch-100%">The quick brown fox...</p>
+<p class="font-stretch-150%">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="font-stretch" value="66.66%" name="font width" variable="font-width" />
+
+### Responsive design
+
+<ResponsiveDesign property="font-stretch" defaultClass="font-stretch-normal" featuredClass="font-stretch-expanded" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-style.mdx

@@ -0,0 +1,62 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "font-style";
+export const description = "Utilities for controlling the style of text.";
+
+<ApiTable
+  rows={[
+    ["italic", "font-style: italic;"],
+    ["not-italic", "font-style: normal;"],
+  ]}
+/>
+
+## Examples
+
+### Italicizing text
+
+Use the `italic` utility to make text italic:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 italic dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:italic] -->
+<p class="italic ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Displaying text normally
+
+Use the `not-italic` utility to display text normally:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 not-italic dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:not-italic] -->
+<p class="not-italic ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="font-style" defaultClass="italic" featuredClass="not-italic" element="p" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-variant-numeric.mdx

@@ -0,0 +1,228 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "font-variant-numeric";
+export const description = "Utilities for controlling the variant of numbers.";
+
+<ApiTable
+  rows={[
+    ["normal-nums", "font-variant-numeric: normal;"],
+    ["ordinal", "font-variant-numeric: ordinal;"],
+    ["slashed-zero", "font-variant-numeric: slashed-zero;"],
+    ["lining-nums", "font-variant-numeric: lining-nums;"],
+    ["oldstyle-nums", "font-variant-numeric: oldstyle-nums;"],
+    ["proportional-nums", "font-variant-numeric: proportional-nums;"],
+    ["tabular-nums", "font-variant-numeric: tabular-nums;"],
+    ["diagonal-fractions", "font-variant-numeric: diagonal-fractions;"],
+    ["stacked-fractions", "font-variant-numeric: stacked-fractions;"],
+  ]}
+/>
+
+## Examples
+
+### Using ordinal glyphs
+
+Use the `ordinal` utility to enable special glyphs for the ordinal markers in fonts that support them:
+
+<Figure>
+
+<Example>{<p className="text-center font-source text-lg text-gray-900 ordinal dark:text-gray-200">1st</p>}</Example>
+
+```html
+<!-- [!code classes:ordinal] -->
+<p class="ordinal ...">1st</p>
+```
+
+</Figure>
+
+### Using slashed zeroes
+
+Use the `slashed-zero` utility to force a zero with a slash in fonts that support them:
+
+<Figure>
+
+<Example>{<p className="text-center font-source text-lg text-gray-900 slashed-zero dark:text-gray-200">0</p>}</Example>
+
+```html
+<!-- [!code classes:slashed-zero] -->
+<p class="slashed-zero ...">0</p>
+```
+
+</Figure>
+
+### Using lining figures
+
+Use the `lining-nums` utility to use numeric glyphs that are aligned by their baseline in fonts that support them:
+
+<Figure>
+
+<Example>
+  {<p className="text-center font-source text-lg text-gray-900 lining-nums dark:text-gray-200">1234567890</p>}
+</Example>
+
+```html
+<!-- [!code classes:lining-nums] -->
+<p class="lining-nums ...">1234567890</p>
+```
+
+</Figure>
+
+### Using oldstyle figures
+
+Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders in fonts that support them:
+
+<Figure>
+
+<Example>
+  {<p className="text-center font-source text-lg text-gray-900 oldstyle-nums dark:text-gray-200">1234567890</p>}
+</Example>
+
+```html
+<!-- [!code classes:oldstyle-nums] -->
+<p class="oldstyle-nums ...">1234567890</p>
+```
+
+</Figure>
+
+### Using proportional figures
+
+Use the `proportional-nums` utility to use numeric glyphs that have proportional widths in fonts that support them:
+
+<Figure>
+
+<Example>
+  {
+    <div className="max-w-xs text-right">
+      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">12121</p>
+      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">90909</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:proportional-nums] -->
+<p class="proportional-nums ...">12121</p>
+<p class="proportional-nums ...">90909</p>
+```
+
+</Figure>
+
+### Using tabular figures
+
+Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths in fonts that support them:
+
+<Figure>
+
+<Example>
+  {
+    <div className="max-w-xs text-right">
+      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">12121</p>
+      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">90909</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:tabular-nums] -->
+<p class="tabular-nums ...">12121</p>
+<p class="tabular-nums ...">90909</p>
+```
+
+</Figure>
+
+### Using diagonal fractions
+
+Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions in fonts that support them:
+
+<Figure>
+
+<Example>
+  {<p className="text-center font-source text-lg text-gray-900 diagonal-fractions dark:text-gray-200">1/2 3/4 5/6</p>}
+</Example>
+
+```html
+<!-- [!code classes:diagonal-fractions] -->
+<p class="diagonal-fractions ...">1/2 3/4 5/6</p>
+```
+
+</Figure>
+
+### Using stacked fractions
+
+Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions in fonts that support them:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center font-ubuntu-mono text-lg text-gray-900 stacked-fractions dark:text-gray-200">
+      1/2 3/4 5/6
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:stacked-fractions] -->
+<p class="stacked-fractions ...">1/2 3/4 5/6</p>
+```
+
+</Figure>
+
+### Stacking multiple utilities
+
+The `font-variant-numeric` utilities are composable so you can enable multiple variants by combining them:
+
+<Figure>
+
+<Example>
+  {
+    <dl className="mx-auto grid max-w-2xs grid-cols-2 text-gray-900 dark:text-gray-200">
+      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Subtotal</dt>
+      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
+        $100.00
+      </dd>
+      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Tax</dt>
+      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
+        $14.50
+      </dd>
+      <dt className="py-2 font-medium">Total</dt>
+      <dd className="py-2 text-right font-medium slashed-zero tabular-nums">$114.50</dd>
+    </dl>
+  }
+</Example>
+
+```html
+<!-- [!code classes:slashed-zero,tabular-nums] -->
+<dl class="...">
+  <dt class="...">Subtotal</dt>
+  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
+  <dt class="...">Tax</dt>
+  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
+  <dt class="...">Total</dt>
+  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
+</dl>
+```
+
+</Figure>
+
+### Resetting numeric font variants
+
+Use the `normal-nums` property to reset numeric font variants:
+
+```html
+<!-- [!code classes:slashed-zero,tabular-nums,normal-nums] -->
+<p class="slashed-zero tabular-nums md:normal-nums ...">
+  <!-- ... -->
+</p>
+```
+
+### Responsive design
+
+<ResponsiveDesign
+  property="font-variant-numeric"
+  defaultClass="proportional-nums"
+  featuredClass="tabular-nums"
+  element="p"
+/>