Typography Components

List

A container for displaying a series of related items in an ordered or unordered fashion. Documents both List and its ListItem entries.

Source Edit this page

Basic usage

List renders an unordered list with bullet points by default. Each entry is a ListItem, which renders an <li> and carries the core typography props (appearance, size, weight, alignment) minus the margin, letter-spacing, and cursor props that Text has. Always render ListItem inside a List, which supplies the marker style and size.

First item in the list
Second item in the list
Third item in the list

<List>
  <ListItem>First item in the list</ListItem>
  <ListItem>Second item in the list</ListItem>
  <ListItem>Third item in the list</ListItem>
</List>

Sizes

Lists come in different sizes: xs, sm, md (default), lg, xl. Font size, line height, padding, and the gap between items all scale together via the CSS-variable pipeline. ListItem has no size default of its own. It inherits from the parent List, so <List xl> propagates to every item without repeating the prop.

Extra small item
Extra small item two

Small list item
Another small item

Large list item
Another large item

Extra large item
Another extra large item

<Col>
  <List xs>
    <ListItem>Extra small item</ListItem>
    <ListItem>Extra small item two</ListItem>
  </List>
  <List sm>
    <ListItem>Small list item</ListItem>
    <ListItem>Another small item</ListItem>
  </List>
  <List lg>
    <ListItem>Large list item</ListItem>
    <ListItem>Another large item</ListItem>
  </List>
  <List xl>
    <ListItem>Extra large item</ListItem>
    <ListItem>Another extra large item</ListItem>
  </List>
</Col>

Appearances

Lists use inheritAppearance appearance by default: they inherit color from their parent and stay transparent with no background of their own. Use explicit appearances like primary, success, danger to override the text color. Because a List has no background of its own, place it inside a filled container like Card when you want a surface behind it.

Primary colored item
Another primary item

Success colored item
Another success item

Danger colored item
Another danger item

List on a filled Card surface
The Card provides the background

<Col>
  <List primary>
    <ListItem>Primary colored item</ListItem>
    <ListItem>Another primary item</ListItem>
  </List>
  <List success>
    <ListItem>Success colored item</ListItem>
    <ListItem>Another success item</ListItem>
  </List>
  <List danger>
    <ListItem>Danger colored item</ListItem>
    <ListItem>Another danger item</ListItem>
  </List>
  <Card secondary filled>
    <List>
      <ListItem>List on a filled Card surface</ListItem>
      <ListItem>The Card provides the background</ListItem>
    </List>
  </Card>
</Col>

Variants

List is outline and transparent by default, so an appearance colours the text and the list paints nothing behind it. List is the one typography component that still wires a background mapper, so clearing transparent lets filled paint the appearance's surface behind the whole list. Left alone, filled only switches the text to the "on this fill" colour, for a list sitting on a filled surface of the same appearance.

outline info, on the page surface

filled danger, with the surface switched on

filled info, on a matching filled Card

<Col>
  <List info>
    <ListItem>outline info, on the page surface</ListItem>
  </List>
  <List danger filled transparent={false}>
    <ListItem>filled danger, with the surface switched on</ListItem>
  </List>
  <Card info filled>
    <List info filled>
      <ListItem>filled info, on a matching filled Card</ListItem>
    </List>
  </Card>
</Col>

List style types

List supports six marker types: listDisc (default for unordered), listDecimal (default for ordered), listCircle, listSquare, listLowerAlpha, and listLowerRoman. Setting listDecimal, listLowerAlpha, or listLowerRoman switches the element from <ul> to <ol>.

Unordered (disc)

Bullet point one
Bullet point two

circle

Hollow circle marker
Second item

square

Filled square marker
Second item

Ordered (decimal)

Step one
Step two

lowerAlpha

Lowercase letters
Second item

lowerRoman

Lowercase roman
Second item

<Col>
  <div>
    <Text fontSemibold>Unordered (disc)</Text>
    <List listDisc>
      <ListItem>Bullet point one</ListItem>
      <ListItem>Bullet point two</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>circle</Text>
    <List listCircle>
      <ListItem>Hollow circle marker</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>square</Text>
    <List listSquare>
      <ListItem>Filled square marker</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>Ordered (decimal)</Text>
    <List listDecimal>
      <ListItem>Step one</ListItem>
      <ListItem>Step two</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>lowerAlpha</Text>
    <List listLowerAlpha>
      <ListItem>Lowercase letters</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>lowerRoman</Text>
    <List listLowerRoman>
      <ListItem>Lowercase roman</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
</Col>

Marker position (inside vs outside)

Use listOutside (the default) to hang markers outside the content box so multi-line items align under the first character. Use listInside to place markers inline with text. Compact, but wrapped lines flow under the marker.

outside (default)

A short item.
A much longer item that wraps onto a second line so you can see the hanging marker behaviour.

inside

A short item.
A much longer item that wraps onto a second line, markers flow inline with the text.

<Col>
  <div>
    <Text fontSemibold>outside (default)</Text>
    <List listOutside className="w-64">
      <ListItem>A short item.</ListItem>
      <ListItem>A much longer item that wraps onto a second line so you can see the hanging marker behaviour.</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>inside</Text>
    <List listInside className="w-64">
      <ListItem>A short item.</ListItem>
      <ListItem>A much longer item that wraps onto a second line, markers flow inline with the text.</ListItem>
    </List>
  </div>
</Col>

Nested lists: automatic marker progression

Nested unordered lists automatically progress listDisc → listCircle → listSquare. Nested ordered lists progress listDecimal → listLowerAlpha → listLowerRoman. Override a specific nested list by forcing the marker with an important utility like list-[square]!. The parent's descendant selector outranks a plain child utility on specificity, so the trailing ! is what makes the override win.

Unordered (ul)

Level 0: disc
Parent
- Level 1: circle
- Parent
  - Level 2: square

Ordered (ol)

Level 0: decimal
Parent
1. Level 1: lowerAlpha
2. Parent
  1. Level 2: lowerRoman

<Col>
  <div>
    <Text fontSemibold>Unordered (ul)</Text>
    <List>
      <ListItem>Level 0: disc</ListItem>
      <ListItem>
        Parent
        <List>
          <ListItem>Level 1: circle</ListItem>
          <ListItem>
            Parent
            <List>
              <ListItem>Level 2: square</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>Ordered (ol)</Text>
    <List listDecimal>
      <ListItem>Level 0: decimal</ListItem>
      <ListItem>
        Parent
        <List listDecimal>
          <ListItem>Level 1: lowerAlpha</ListItem>
          <ListItem>
            Parent
            <List listDecimal>
              <ListItem>Level 2: lowerRoman</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
    </List>
  </div>
</Col>

Item spacing (gap vs noGap)

Lists apply a size-driven gap by default: a sibling margin between items that scales with the list's size prop. Use noGap to remove it entirely for a compact layout (useful for checklists or dense content).

Default gap

Item one
Item two
Item three

noGap

Item one
Item two
Item three

<Col>
  <div>
    <Text fontSemibold>Default gap</Text>
    <List>
      <ListItem>Item one</ListItem>
      <ListItem>Item two</ListItem>
      <ListItem>Item three</ListItem>
    </List>
  </div>
  <div>
    <Text fontSemibold>noGap</Text>
    <List noGap>
      <ListItem>Item one</ListItem>
      <ListItem>Item two</ListItem>
      <ListItem>Item three</ListItem>
    </List>
  </div>
</Col>

Custom item icons

Pass an icon node to a ListItem to replace the native marker on that item only. The icon wrapper is sized to match the text font size (1em) and scales with the list size, so checkmarks, arrows, or any custom SVG align cleanly with the text. For decorative glyphs, include aria-hidden="true" on the icon node.

Ship the feature
Write the tests
Update the docs
Plain item keeps the native marker

<List>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Ship the feature</ListItem>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Write the tests</ListItem>
  <ListItem icon={<span aria-hidden="true">→</span>}>Update the docs</ListItem>
  <ListItem>Plain item keeps the native marker</ListItem>
</List>

Overriding size and color per item

ListItem has no size or appearance default of its own, so both cascade from the parent List: <List xl success> propagates to every item. Set an explicit size or appearance on one item to opt out of just that row while its siblings keep the inherited values.

Inherits xl size and success color
Opts out of size: small, still inherits color
Opts out of color: primary

<List xl success>
  <ListItem>Inherits xl size and success color</ListItem>
  <ListItem sm>Opts out of size: small, still inherits color</ListItem>
  <ListItem primary>Opts out of color: primary</ListItem>
</List>

Styling

Combine font properties like fontBold, italic, fontMono with lists.

Bold list items
Another bold item

code --install extension
npm run build

<Col>
  <List fontSemibold>
    <ListItem>Bold list items</ListItem>
    <ListItem>Another bold item</ListItem>
  </List>
  <List fontMono>
    <ListItem>code --install extension</ListItem>
    <ListItem>npm run build</ListItem>
  </List>
</Col>

The same toggles apply per item, so one entry can stand out without affecting the rest of the list.

Bold item
Italic item
monospace-item
Default item

<List>
  <ListItem fontBold>Bold item</ListItem>
  <ListItem italic>Italic item</ListItem>
  <ListItem fontMono>monospace-item</ListItem>
  <ListItem>Default item</ListItem>
</List>

Truncating long items

Use truncate for a single clipped line, or lineClamp2 through lineClamp5 to cap an item at a fixed number of lines.

This item is clipped to one line with an ellipsis when it runs past the width.
This item is clamped to two lines, so longer content wraps once and then cuts off with an ellipsis at the end of the second line.
A short item.

<List className="w-72">
  <ListItem truncate>This item is clipped to one line with an ellipsis when it runs past the width.</ListItem>
  <ListItem lineClamp2>This item is clamped to two lines, so longer content wraps once and then cuts off with an ellipsis at the end of the second line.</ListItem>
  <ListItem>A short item.</ListItem>
</List>

List Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`fontHeading`	Font Family		Heading font family (defaults to sans, customizable via --font-heading) — emits font-heading
`fontMono`	Font Family		Monospace font family — emits font-mono
`fontSans`	Font Family	✓	Sans-serif font family (default) — emits font-sans
`fontSerif`	Font Family		Serif font family — emits font-serif
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`fontBlack`	Font Weight		Black font weight (900) — emits font-black
`fontBold`	Font Weight		Bold font weight (700) — emits font-bold
`fontExtrabold`	Font Weight		Extra bold font weight (800) — emits font-extrabold
`fontExtralight`	Font Weight		Extra light font weight (200) — emits font-extralight
`fontLight`	Font Weight		Light font weight (300) — emits font-light
`fontMedium`	Font Weight		Medium font weight (500) — emits font-medium
`fontNormal`	Font Weight	✓	Normal font weight (400) — emits font-normal
`fontSemibold`	Font Weight		Semibold font weight (600) — emits font-semibold
`fontThin`	Font Weight		Thin font weight (100) — emits font-thin
`inheritBg`	Inherit Bg		Inherit background color from parent via CSS variable cascade
`noInheritBg`	Inherit Bg		Keep own background; do not inherit from parent
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size		Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`listInside`	List Position		Place list markers inside the content area — emits list-inside
`listOutside`	List Position	✓	Hang list markers outside the content area — emits list-outside
`listCircle`	List Style		Hollow circle — typically 2nd-depth unordered marker — emits list-[circle]
`listDecimal`	List Style		Arabic numerals — default for ordered lists — emits list-decimal
`listDisc`	List Style	✓	Filled bullet — default for unordered lists — emits list-disc
`listLowerAlpha`	List Style		Lowercase letters a, b, c — typically 2nd-depth ordered marker — emits list-[lower-alpha]
`listLowerRoman`	List Style		Lowercase roman i, ii, iii — typically 3rd-depth ordered marker — emits list-[lower-roman]
`listSquare`	List Style		Filled square — typically 3rd-depth unordered marker — emits list-[square]
`noPadding`	Padding		Disable internal padding
`padding`	Padding	✓	Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove ALL text-decoration — underline, line-through, and overline (text-decoration: none)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)
`breakAll`	Word Break		Break between any two characters - word-break: break-all
`breakKeep`	Word Break		Do not break CJK text - word-break: keep-all
`breakNormal`	Word Break		Reset breaking - overflow-wrap and word-break normal
`breakWords`	Word Break		Break long words to prevent overflow - overflow-wrap: break-word

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsiveSizing`	Responsive Sizing		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`transparent`	Transparent	✓	Disable background color - makes component background transparent
`whitespaceBreakSpaces`	Whitespace		Preserve whitespace incl. trailing spaces, wrap text (white-space: break-spaces)
`whitespaceNormal`	Whitespace		Normal wrapping - default browser behavior
`whitespaceNowrap`	Whitespace		No wrap - text stays on single line
`whitespacePre`	Whitespace		Preserve whitespace and line breaks
`whitespacePreLine`	Whitespace		Preserve line breaks, collapse spaces, wrap text
`whitespacePreWrap`	Whitespace		Preserve whitespace, wrap text
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint

ListItem Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`fontHeading`	Font Family		Heading font family (defaults to sans, customizable via --font-heading) — emits font-heading
`fontMono`	Font Family		Monospace font family — emits font-mono
`fontSans`	Font Family	✓	Sans-serif font family (default) — emits font-sans
`fontSerif`	Font Family		Serif font family — emits font-serif
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`fontBlack`	Font Weight		Black font weight (900) — emits font-black
`fontBold`	Font Weight		Bold font weight (700) — emits font-bold
`fontExtrabold`	Font Weight		Extra bold font weight (800) — emits font-extrabold
`fontExtralight`	Font Weight		Extra light font weight (200) — emits font-extralight
`fontLight`	Font Weight		Light font weight (300) — emits font-light
`fontMedium`	Font Weight		Medium font weight (500) — emits font-medium
`fontNormal`	Font Weight		Normal font weight (400) — emits font-normal
`fontSemibold`	Font Weight		Semibold font weight (600) — emits font-semibold
`fontThin`	Font Weight		Thin font weight (100) — emits font-thin
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size		Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`lg`	Size		Large size
`md`	Size		Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove ALL text-decoration — underline, line-through, and overline (text-decoration: none)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)
`breakAll`	Word Break		Break between any two characters - word-break: break-all
`breakKeep`	Word Break		Do not break CJK text - word-break: keep-all
`breakNormal`	Word Break		Reset breaking - overflow-wrap and word-break normal
`breakWords`	Word Break		Break long words to prevent overflow - overflow-wrap: break-word

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Description
`block`	Display	Block display - takes full width, new line
`contents`	Display	Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	Flex display - flexbox container
`grid`	Display	Grid display - CSS grid container
`hidden`	Display	Hidden display - element is not visible
`inline`	Display	Inline display - flows with text
`inlineBlock`	Display	Inline-block display - inline but with block properties
`inlineFlex`	Display	Inline-flex display - inline flexbox container
`inlineGrid`	Display	Inline-grid display - inline grid container
`table`	Display	Table display - behaves like table element
`tableCell`	Display	Table-cell display - behaves like td element
`hAuto`	Height	Set height to auto
`hFit`	Height	Set height to fit-content
`hFull`	Height	Set height to 100%
`hScreen`	Height	Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide	Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide	Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide	Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items	Align items to baseline
`itemsCenter`	Items	Align items to center
`itemsEnd`	Items	Align items to end (bottom/right)
`itemsStart`	Items	Align items to start (top/left)
`itemsStretch`	Items	Stretch items to fill container
`justifyAround`	Justify	Distribute items with space around them
`justifyBaseline`	Justify	Align items along their baseline on main axis
`justifyBetween`	Justify	Distribute items with space between them
`justifyCenter`	Justify	Center items along the main axis
`justifyEnd`	Justify	Pack items toward the end of the main axis
`justifyEvenly`	Justify	Distribute items with equal space around them
`justifyStart`	Justify	Pack items toward the start of the main axis
`justifyStretch`	Justify	Stretch items to fill the main axis
`overflowAuto`	Overflow	Auto overflow - show scrollbars if needed
`overflowClip`	Overflow	Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow	Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow	Scroll overflow - always show scrollbars
`overflowVisible`	Overflow	Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow	Auto overflow on X-axis only
`overflowXClip`	Overflow	Clip overflow on X-axis only
`overflowXHidden`	Overflow	Hidden overflow on X-axis only
`overflowXScroll`	Overflow	Scroll overflow on X-axis only
`overflowXVisible`	Overflow	Visible overflow on X-axis only
`overflowYAuto`	Overflow	Auto overflow on Y-axis only
`overflowYClip`	Overflow	Clip overflow on Y-axis only
`overflowYHidden`	Overflow	Hidden overflow on Y-axis only
`overflowYScroll`	Overflow	Scroll overflow on Y-axis only
`overflowYVisible`	Overflow	Visible overflow on Y-axis only
`absolute`	Position	Absolute positioning
`fixed`	Position	Fixed positioning
`relative`	Position	Relative positioning
`static`	Position	Static positioning
`sticky`	Position	Sticky positioning
`responsiveSizing`	Responsive Sizing	Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`whitespaceBreakSpaces`	Whitespace	Preserve whitespace incl. trailing spaces, wrap text (white-space: break-spaces)
`whitespaceNormal`	Whitespace	Normal wrapping - default browser behavior
`whitespaceNowrap`	Whitespace	No wrap - text stays on single line
`whitespacePre`	Whitespace	Preserve whitespace and line breaks
`whitespacePreLine`	Whitespace	Preserve line breaks, collapse spaces, wrap text
`whitespacePreWrap`	Whitespace	Preserve whitespace, wrap text
`wAuto`	Width	Set width to auto
`wFit`	Width	Set width to fit-content
`wFull`	Width	Set width to 100%
`wScreen`	Width	Set width to 100vw (viewport width), removes max-width constraint