CSS Map

HTML option tables - master schema

Structure and layout primitives

Node Type	Allowed Option Groups	Exact Options (from zip)
`Row`	`containerWidth` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity` `hover` `childHover` `animationSpeed` `animationEffects`	containerWidth `(none)`, `container-lg`, `container-md`, `container-sm`, `container-xl`, `container-full` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg` animationSpeed `(none)`, `anim`, `anim-fast`, `anim-filter`, `anim-instant`, `anim-slow`, `anim-snail` animationEffects `(none)`, `fade-in`, `fade-out`, `slide-in-down`, `slide-in-left`, `slide-in-right`, `slide-in-up`, `slide-out-down`, `slide-out-left`, `slide-out-right`, `slide-out-up`, `stagger-example`, `stagger-slide-in-down`, `stagger-slide-in-left`, `stagger-slide-in-right`, `stagger-slide-in-up`
`Container`	`containerWidth` `containerModifier` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity` `hover` `childHover` `animationSpeed` `animationEffects`	containerWidth `(none)`, `container-lg`, `container-md`, `container-sm`, `container-xl`, `container-full` containerModifier `(none)`, `container-fixed` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg` animationSpeed `(none)`, `anim`, `anim-fast`, `anim-filter`, `anim-instant`, `anim-slow`, `anim-snail` animationEffects `(none)`, `fade-in`, `fade-out`, `slide-in-down`, `slide-in-left`, `slide-in-right`, `slide-in-up`, `slide-out-down`, `slide-out-left`, `slide-out-right`, `slide-out-up`, `stagger-example`, `stagger-slide-in-down`, `stagger-slide-in-left`, `stagger-slide-in-right`, `stagger-slide-in-up`
`Grid`	`gridDisplay` `gridCols` `gap` `padding` `margin` `border` `radius` `shadow` `opacity`	gridDisplay `(none)`, `grid` gridCols Options (49) `(none)`, `grid-cols-1`, `grid-cols-10`, `grid-cols-11`, `grid-cols-12`, `grid-cols-2`, `grid-cols-3`, `grid-cols-4`, `grid-cols-5`, `grid-cols-6`, `grid-cols-7`, `grid-cols-8`, `grid-cols-9`, `lg:grid-cols-1`, `lg:grid-cols-10`, `lg:grid-cols-11`, `lg:grid-cols-12`, `lg:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4`, `lg:grid-cols-5`, `lg:grid-cols-6`, `lg:grid-cols-7`, `lg:grid-cols-8`, `lg:grid-cols-9`, `md:grid-cols-1`, `md:grid-cols-10`, `md:grid-cols-11`, `md:grid-cols-12`, `md:grid-cols-2`, `…` (Full list is in the JS schema file.) gap Options (73) `(none)`, `gap-lg`, `gap-md`, `gap-sm`, `gap-x-lg`, `gap-x-md`, `gap-x-sm`, `gap-x-xl`, `gap-x-xs`, `gap-x-xxs`, `gap-xl`, `gap-xs`, `gap-xxs`, `gap-y-lg`, `gap-y-md`, `gap-y-sm`, `gap-y-xl`, `gap-y-xs`, `gap-y-xxs`, `lg:gap-lg`, `lg:gap-md`, `lg:gap-sm`, `lg:gap-x-lg`, `lg:gap-x-md`, `lg:gap-x-sm`, `lg:gap-x-xl`, `lg:gap-x-xs`, `lg:gap-x-xxs`, `lg:gap-xl`, `lg:gap-xs`, `…` (Full list is in the JS schema file.) padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm`
`Flex`	`flexDirection` `flexWrap` `justify` `align` `gap` `padding` `margin`	flexDirection `(none)`, `flex`, `flex-h`, `flex-h-rev`, `flex-v`, `flex-v-rev`, `lg:flex-h`, `lg:flex-h-rev`, `lg:flex-v`, `lg:flex-v-rev`, `md:flex-h`, `md:flex-h-rev`, `md:flex-v`, `md:flex-v-rev`, `xl:flex-h`, `xl:flex-h-rev`, `xl:flex-v`, `xl:flex-v-rev` flexWrap `(none)`, `lg:wrap`, `lg:wrap-rev`, `md:wrap`, `md:wrap-rev`, `wrap`, `wrap-rev`, `xl:wrap`, `xl:wrap-rev` justify `(none)`, `around`, `between`, `center`, `even`, `left`, `md:around`, `md:between`, `md:center`, `md:even`, `md:left`, `md:right`, `right` align `(none)`, `baseline`, `bottom`, `md:baseline`, `md:bottom`, `md:middle`, `md:stretch`, `md:top`, `middle`, `stretch`, `top` gap Options (73) `(none)`, `gap-lg`, `gap-md`, `gap-sm`, `gap-x-lg`, `gap-x-md`, `gap-x-sm`, `gap-x-xl`, `gap-x-xs`, `gap-x-xxs`, `gap-xl`, `gap-xs`, `gap-xxs`, `gap-y-lg`, `gap-y-md`, `gap-y-sm`, `gap-y-xl`, `gap-y-xs`, `gap-y-xxs`, `lg:gap-lg`, `lg:gap-md`, `lg:gap-sm`, `lg:gap-x-lg`, `lg:gap-x-md`, `lg:gap-x-sm`, `lg:gap-x-xl`, `lg:gap-x-xs`, `lg:gap-x-xxs`, `lg:gap-xl`, `lg:gap-xs`, `…` (Full list is in the JS schema file.) padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`LayoutItem`	`gridColSpan` `itemPlacement` `flexBasis` `flexGrow` `flexShrink` `order` `padding` `margin` `background` `textColor` `border` `radius` `shadow` `opacity` `hover` `childHover` `animationSpeed` `animationEffects`	gridColSpan Options (49) `(none)`, `col-span-1`, `col-span-10`, `col-span-11`, `col-span-12`, `col-span-2`, `col-span-3`, `col-span-4`, `col-span-5`, `col-span-6`, `col-span-7`, `col-span-8`, `col-span-9`, `lg:col-span-1`, `lg:col-span-10`, `lg:col-span-11`, `lg:col-span-12`, `lg:col-span-2`, `lg:col-span-3`, `lg:col-span-4`, `lg:col-span-5`, `lg:col-span-6`, `lg:col-span-7`, `lg:col-span-8`, `lg:col-span-9`, `md:col-span-1`, `md:col-span-10`, `md:col-span-11`, `md:col-span-12`, `md:col-span-2`, `…` (Full list is in the JS schema file.) itemPlacement Options (61) `(none)`, `item-b`, `item-b-c`, `item-b-l`, `item-b-r`, `item-c`, `item-c-l`, `item-c-m`, `item-c-r`, `item-l`, `item-m`, `item-r`, `item-t`, `item-t-c`, `item-t-l`, `item-t-r`, `lg:item-b`, `lg:item-b-c`, `lg:item-b-l`, `lg:item-b-r`, `lg:item-c`, `lg:item-l`, `lg:item-m`, `lg:item-m-c`, `lg:item-m-l`, `lg:item-m-r`, `lg:item-r`, `lg:item-t`, `lg:item-t-c`, `lg:item-t-l`, `…` (Full list is in the JS schema file.) flexBasis Options (401) `(none)`, `base-10`, `base-100`, `base-1000`, `base-110`, `base-120`, `base-130`, `base-140`, `base-150`, `base-160`, `base-170`, `base-180`, `base-190`, `base-20`, `base-200`, `base-210`, `base-220`, `base-230`, `base-240`, `base-250`, `base-260`, `base-270`, `base-280`, `base-290`, `base-30`, `base-300`, `base-310`, `base-320`, `base-330`, `base-340`, `…` (Full list is in the JS schema file.) flexGrow Options (53) `(none)`, `grow-0`, `grow-1`, `grow-10`, `grow-11`, `grow-12`, `grow-2`, `grow-3`, `grow-4`, `grow-5`, `grow-6`, `grow-7`, `grow-8`, `grow-9`, `lg:grow-0`, `lg:grow-1`, `lg:grow-10`, `lg:grow-11`, `lg:grow-12`, `lg:grow-2`, `lg:grow-3`, `lg:grow-4`, `lg:grow-5`, `lg:grow-6`, `lg:grow-7`, `lg:grow-8`, `lg:grow-9`, `md:grow-0`, `md:grow-1`, `md:grow-10`, `…` (Full list is in the JS schema file.) flexShrink Options (53) `(none)`, `lg:shrink-0`, `lg:shrink-1`, `lg:shrink-10`, `lg:shrink-11`, `lg:shrink-12`, `lg:shrink-2`, `lg:shrink-3`, `lg:shrink-4`, `lg:shrink-5`, `lg:shrink-6`, `lg:shrink-7`, `lg:shrink-8`, `lg:shrink-9`, `md:shrink-0`, `md:shrink-1`, `md:shrink-10`, `md:shrink-11`, `md:shrink-12`, `md:shrink-2`, `md:shrink-3`, `md:shrink-4`, `md:shrink-5`, `md:shrink-6`, `md:shrink-7`, `md:shrink-8`, `md:shrink-9`, `shrink-0`, `shrink-1`, `shrink-10`, `…` (Full list is in the JS schema file.) order Options (57) `(none)`, `lg:order-1`, `lg:order-10`, `lg:order-11`, `lg:order-12`, `lg:order-2`, `lg:order-3`, `lg:order-4`, `lg:order-5`, `lg:order-6`, `lg:order-7`, `lg:order-8`, `lg:order-9`, `lg:order-first`, `lg:order-last`, `md:order-1`, `md:order-10`, `md:order-11`, `md:order-12`, `md:order-2`, `md:order-3`, `md:order-4`, `md:order-5`, `md:order-6`, `md:order-7`, `md:order-8`, `md:order-9`, `md:order-first`, `md:order-last`, `order-1`, `…` (Full list is in the JS schema file.) padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg` animationSpeed `(none)`, `anim`, `anim-fast`, `anim-filter`, `anim-instant`, `anim-slow`, `anim-snail` animationEffects `(none)`, `fade-in`, `fade-out`, `slide-in-down`, `slide-in-left`, `slide-in-right`, `slide-in-up`, `slide-out-down`, `slide-out-left`, `slide-out-right`, `slide-out-up`, `stagger-example`, `stagger-slide-in-down`, `stagger-slide-in-left`, `stagger-slide-in-right`, `stagger-slide-in-up`
`LayoutItem`	`gridColSpan` `itemPlacement` `flexBasis` `flexGrow` `flexShrink` `order` `padding` `margin` `background` `textColor` `border` `radius` `shadow` `opacity` `hover` `childHover` `animationSpeed` `animationEffects`	gridColSpan Options (49) `(none)`, `col-span-1`, `col-span-10`, `col-span-11`, `col-span-12`, `col-span-2`, `col-span-3`, `col-span-4`, `col-span-5`, `col-span-6`, `col-span-7`, `col-span-8`, `col-span-9`, `lg:col-span-1`, `lg:col-span-10`, `lg:col-span-11`, `lg:col-span-12`, `lg:col-span-2`, `lg:col-span-3`, `lg:col-span-4`, `lg:col-span-5`, `lg:col-span-6`, `lg:col-span-7`, `lg:col-span-8`, `lg:col-span-9`, `md:col-span-1`, `md:col-span-10`, `md:col-span-11`, `md:col-span-12`, `md:col-span-2`, `…` (Full list is in the JS schema file.) itemPlacement Options (61) `(none)`, `item-b`, `item-b-c`, `item-b-l`, `item-b-r`, `item-c`, `item-c-l`, `item-c-m`, `item-c-r`, `item-l`, `item-m`, `item-r`, `item-t`, `item-t-c`, `item-t-l`, `item-t-r`, `lg:item-b`, `lg:item-b-c`, `lg:item-b-l`, `lg:item-b-r`, `lg:item-c`, `lg:item-l`, `lg:item-m`, `lg:item-m-c`, `lg:item-m-l`, `lg:item-m-r`, `lg:item-r`, `lg:item-t`, `lg:item-t-c`, `lg:item-t-l`, `…` (Full list is in the JS schema file.) flexBasis Options (401) `(none)`, `base-10`, `base-100`, `base-1000`, `base-110`, `base-120`, `base-130`, `base-140`, `base-150`, `base-160`, `base-170`, `base-180`, `base-190`, `base-20`, `base-200`, `base-210`, `base-220`, `base-230`, `base-240`, `base-250`, `base-260`, `base-270`, `base-280`, `base-290`, `base-30`, `base-300`, `base-310`, `base-320`, `base-330`, `base-340`, `…` (Full list is in the JS schema file.) flexGrow Options (53) `(none)`, `grow-0`, `grow-1`, `grow-10`, `grow-11`, `grow-12`, `grow-2`, `grow-3`, `grow-4`, `grow-5`, `grow-6`, `grow-7`, `grow-8`, `grow-9`, `lg:grow-0`, `lg:grow-1`, `lg:grow-10`, `lg:grow-11`, `lg:grow-12`, `lg:grow-2`, `lg:grow-3`, `lg:grow-4`, `lg:grow-5`, `lg:grow-6`, `lg:grow-7`, `lg:grow-8`, `lg:grow-9`, `md:grow-0`, `md:grow-1`, `md:grow-10`, `…` (Full list is in the JS schema file.) flexShrink Options (53) `(none)`, `lg:shrink-0`, `lg:shrink-1`, `lg:shrink-10`, `lg:shrink-11`, `lg:shrink-12`, `lg:shrink-2`, `lg:shrink-3`, `lg:shrink-4`, `lg:shrink-5`, `lg:shrink-6`, `lg:shrink-7`, `lg:shrink-8`, `lg:shrink-9`, `md:shrink-0`, `md:shrink-1`, `md:shrink-10`, `md:shrink-11`, `md:shrink-12`, `md:shrink-2`, `md:shrink-3`, `md:shrink-4`, `md:shrink-5`, `md:shrink-6`, `md:shrink-7`, `md:shrink-8`, `md:shrink-9`, `shrink-0`, `shrink-1`, `shrink-10`, `…` (Full list is in the JS schema file.) order Options (57) `(none)`, `lg:order-1`, `lg:order-10`, `lg:order-11`, `lg:order-12`, `lg:order-2`, `lg:order-3`, `lg:order-4`, `lg:order-5`, `lg:order-6`, `lg:order-7`, `lg:order-8`, `lg:order-9`, `lg:order-first`, `lg:order-last`, `md:order-1`, `md:order-10`, `md:order-11`, `md:order-12`, `md:order-2`, `md:order-3`, `md:order-4`, `md:order-5`, `md:order-6`, `md:order-7`, `md:order-8`, `md:order-9`, `md:order-first`, `md:order-last`, `order-1`, `…` (Full list is in the JS schema file.) padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg` animationSpeed `(none)`, `anim`, `anim-fast`, `anim-filter`, `anim-instant`, `anim-slow`, `anim-snail` animationEffects `(none)`, `fade-in`, `fade-out`, `slide-in-down`, `slide-in-left`, `slide-in-right`, `slide-in-up`, `slide-out-down`, `slide-out-left`, `slide-out-right`, `slide-out-up`, `stagger-example`, `stagger-slide-in-down`, `stagger-slide-in-left`, `stagger-slide-in-right`, `stagger-slide-in-up`

Core content containers

Node Type	Allowed Option Groups	Exact Options (from zip)
`Card`	`cardVariants` `cardStructural` `cardContentVariants` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity` `hover` `childHover` `animationSpeed` `animationEffects`	cardVariants `(none)`, `card`, `card-ghost`, `card-lifted`, `card-outline`, `card-secondary`, `card-soft` cardStructural `(none)`, `card-list`, `card-list-rail`, `card-list-zebra`, `card-stack`, `stack-card` cardContentVariants `(none)`, `callout-card`, `double-outline`, `feature-card`, `info-card`, `quote-card` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg` animationSpeed `(none)`, `anim`, `anim-fast`, `anim-filter`, `anim-instant`, `anim-slow`, `anim-snail` animationEffects `(none)`, `fade-in`, `fade-out`, `slide-in-down`, `slide-in-left`, `slide-in-right`, `slide-in-up`, `slide-out-down`, `slide-out-left`, `slide-out-right`, `slide-out-up`, `stagger-example`, `stagger-slide-in-down`, `stagger-slide-in-left`, `stagger-slide-in-right`, `stagger-slide-in-up`
`Panel`	`panelVariants` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity`	panelVariants `(none)`, `panel` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm`
`Tile`	`tileVariants` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity` `hover` `childHover`	tileVariants `(none)`, `tile`, `tile-ghost`, `tile-lifted`, `tile-outline`, `tile-soft` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg` childHover `(none)`, `child-hover-dark`, `child-hover-green`, `child-hover-soft`, `child-hover-super-green`, `child-hover-wolverine`, `child-hover-lift-sm`, `child-hover-lift-md`, `child-hover-lift-lg`
`PageBanner`	`bannerVariants` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity` `headingHook`	bannerVariants `(none)`, `page-banner` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` headingHook `(none)`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
`HeroSurface`	`heroVariants` `padding` `margin` `background` `textColor` `textAlign` `border` `radius` `shadow` `opacity`	heroVariants `(none)`, `hero-surface` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` textAlign `(none)`, `text-left`, `text-center`, `text-right` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm`

Typography and text

Node Type	Allowed Option Groups	Exact Options (from zip)
`Heading`	`fontFamily` `fontSize` `fontWeight` `lineHeight` `letterSpacing` `textTransform` `textAlign` `textColor` `margin`	A11y notes Use heading levels in order where possible; don’t jump levels for styling. If you only need visual size, prefer fs-* classes instead of changing heading level. fontFamily `(none)`, `font-primary`, `font-secondary`, `font-body` fontSize Responsive enum (56 classes) Breakpoints: base (14), md (14), lg (14), xl (14) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` lineHeight `(none)`, `lh-1`, `lh-2`, `lh-3`, `lh-4`, `lh-5`, `lh-6`, `lh-lg`, `lh-p`, `lh-sm`, `lh-xl`, `lh-xxl` letterSpacing `(none)`, `ls-lg`, `ls-md`, `ls-sm`, `ls-xl`, `ls-xxl`, `ls-xxxl` textTransform `(none)`, `uppercase`, `lowercase`, `capitalize`, `title-case`, `sentence-case` textAlign `(none)`, `text-left`, `text-center`, `text-right` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Paragraph`	`fontFamily` `fontSize` `fontWeight` `lineHeight` `letterSpacing` `textTransform` `textAlign` `textColor` `margin`	fontFamily `(none)`, `font-primary`, `font-secondary`, `font-body` fontSize Responsive enum (56 classes) Breakpoints: base (14), md (14), lg (14), xl (14) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` lineHeight `(none)`, `lh-1`, `lh-2`, `lh-3`, `lh-4`, `lh-5`, `lh-6`, `lh-lg`, `lh-p`, `lh-sm`, `lh-xl`, `lh-xxl` letterSpacing `(none)`, `ls-lg`, `ls-md`, `ls-sm`, `ls-xl`, `ls-xxl`, `ls-xxxl` textTransform `(none)`, `uppercase`, `lowercase`, `capitalize`, `title-case`, `sentence-case` textAlign `(none)`, `text-left`, `text-center`, `text-right` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`TextSpan`	`fontFamily` `fontSize` `fontWeight` `letterSpacing` `textTransform` `textColor`	fontFamily `(none)`, `font-primary`, `font-secondary`, `font-body` fontSize Responsive enum (56 classes) Breakpoints: base (14), md (14), lg (14), xl (14) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` letterSpacing `(none)`, `ls-lg`, `ls-md`, `ls-sm`, `ls-xl`, `ls-xxl`, `ls-xxxl` textTransform `(none)`, `uppercase`, `lowercase`, `capitalize`, `title-case`, `sentence-case` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green`
`TextBlock`	`fontFamily` `fontSize` `fontWeight` `lineHeight` `letterSpacing` `textTransform` `textAlign` `textColor` `background` `border` `radius` `shadow` `opacity` `padding` `margin`	fontFamily `(none)`, `font-primary`, `font-secondary`, `font-body` fontSize Responsive enum (56 classes) Breakpoints: base (14), md (14), lg (14), xl (14) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` lineHeight `(none)`, `lh-1`, `lh-2`, `lh-3`, `lh-4`, `lh-5`, `lh-6`, `lh-lg`, `lh-p`, `lh-sm`, `lh-xl`, `lh-xxl` letterSpacing `(none)`, `ls-lg`, `ls-md`, `ls-sm`, `ls-xl`, `ls-xxl`, `ls-xxxl` textTransform `(none)`, `uppercase`, `lowercase`, `capitalize`, `title-case`, `sentence-case` textAlign `(none)`, `text-left`, `text-center`, `text-right` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Link`	`fontFamily` `fontSize` `fontWeight` `letterSpacing` `textTransform` `textColor` `hover`	Attributes: `href` (string required), `target` (enum), `rel` (string), `ariaLabel` (string) fontFamily `(none)`, `font-primary`, `font-secondary`, `font-body` fontSize Responsive enum (56 classes) Breakpoints: base (14), md (14), lg (14), xl (14) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` letterSpacing `(none)`, `ls-lg`, `ls-md`, `ls-sm`, `ls-xl`, `ls-xxl`, `ls-xxxl` textTransform `(none)`, `uppercase`, `lowercase`, `capitalize`, `title-case`, `sentence-case` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg`

Buttons and icons

Node Type	Allowed Option Groups	Exact Options (from zip)
`Button`	`variant` `size` `utility` `padding` `margin` `textColor` `background` `border` `radius` `shadow` `hover`	Attributes: `text` (string required), `href` (string), `type` (enum), `target` (enum), `rel` (string), `ariaLabel` (string) Subcomponents: `icon` A11y notes Use <a> for navigation, <button> for actions. Do not use click-div patterns for buttons. If the button opens a new tab, include rel='noopener noreferrer'. variant `(none)`, `btn-primary`, `btn-secondary` size `(none)`, `btn-lg`, `btn-md`, `btn-sm`, `btn-xs` utility `(none)`, `btn`, `btn-full` padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` background `(none)`, `bg-black`, `bg-border`, `bg-brand-drift`, `bg-callout-feature-bg`, `bg-callout-feature-text`, `bg-callout-important-bg`, `bg-callout-important-text`, `bg-callout-tip-bg`, `bg-callout-tip-text`, `bg-dark-green`, `bg-dark-grey`, `bg-error-bg`, `bg-error-text`, `bg-grey`, `bg-info-bg`, `bg-info-text`, `bg-light-grey`, `bg-meadow-green`, `bg-off-white`, `bg-sage-green`, `bg-seahaze-green`, `bg-site-bg-color`, `bg-success-bg`, `bg-success-text`, `bg-super-green`, `bg-uvu-green`, `bg-valley-green`, `bg-warm-grey`, `bg-warning-bg`, `bg-warning-text`, `bg-white`, `bg-wolverine-green` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` hover `(none)`, `hover-dark`, `hover-green`, `hover-soft`, `hover-super-green`, `hover-wolverine`, `hover-lift-sm`, `hover-lift-md`, `hover-lift-lg`
`Icon`	`base` `glyph` `style` `textColor`	Attributes: `ariaHidden` (boolean), `ariaLabel` (string) base `(none)`, `icon` glyph Options (91) `(none)`, `icon--arrow-down-wide-short`, `icon--arrow-left`, `icon--arrow-pointer`, `icon--arrow-right`, `icon--arrow-up-right`, `icon--arrow-up-right-from-square`, `icon--arrow-up-wide-short`, `icon--asterisk`, `icon--bars`, `icon--bell`, `icon--bookmark`, `icon--box`, `icon--brand-facebook-f`, `icon--brand-instagram`, `icon--brand-linkedin`, `icon--brand-x-twitter`, `icon--brand-youtube`, `icon--building-columns`, `icon--building-flag`, `icon--building-user`, `icon--calendar`, `icon--calendar-check`, `icon--caret-down`, `icon--caret-up`, `icon--certificate`, `icon--chevron-down`, `icon--chevron-left`, `icon--chevron-right`, `icon--chevron-up`, `…` (Full list is in the JS schema file.) style `(none)`, `icon--regular`, `icon--solid` textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green`

Media, ratios, and surfaces

Node Type	Allowed Option Groups	Exact Options (from zip)
`Image`	`radius` `shadow` `opacity` `border` `margin`	Attributes: `src` (string required), `alt` (string required), `width` (number), `height` (number), `loading` (enum), `decoding` (enum) A11y notes alt is required: describe the image’s purpose; use empty alt only for purely decorative images. radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` opacity `(none)`, `opacity-lg`, `opacity-md`, `opacity-sm` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Ratio`	`ratioWrapper` `ratio` `radius` `shadow` `border` `margin`	Use as a wrapper for <img>/<video>/<iframe>. The ratio utilities live here. ratioWrapper `(none)`, `ratio` ratio Responsive enum (46 classes) Breakpoints: base (10), sm (9), md (9), lg (9), xl (9) Rule: one value per breakpoint; selecting nothing writes no class. (Full per-breakpoint lists are in the JS schema file.) radius `(none)`, `radius-full`, `radius-lg`, `radius-md`, `radius-none`, `radius-sm` shadow `(none)`, `shadow-inset-lg`, `shadow-inset-md`, `shadow-inset-sm`, `shadow-lg`, `shadow-md`, `shadow-sm` border `(none)`, `bs-b-0`, `bs-b-lg`, `bs-b-md`, `bs-b-sm`, `bs-l-0`, `bs-l-lg`, `bs-l-md`, `bs-l-sm`, `bs-lg`, `bs-md`, `bs-none`, `bs-r-0`, `bs-r-lg`, `bs-r-md`, `bs-r-sm`, `bs-sm`, `bs-t-0`, `bs-t-lg`, `bs-t-md`, `bs-t-sm`, `bs-x-0`, `bs-x-lg`, `bs-x-md`, `bs-x-sm`, `bs-y-0`, `bs-y-lg`, `bs-y-md`, `bs-y-sm` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Surface`	`surfaceBase` `surfaceVariant` `surfaceTheme` `surfacePattern` `surfaceSlope` `glass` `plus` `legacySurface`	Surface is a child layer (often <span class='surface ...'>) inside a host element. surfaceBase `(none)`, `surface` surfaceVariant `(none)`, `surface-color-dark`, `surface-color-light`, `surface-dark`, `surface-dark-green`, `surface-gloss`, `surface-glow`, `surface-img-ref1`, `surface-img-ref10`, `surface-img-ref2`, `surface-img-ref3`, `surface-img-ref4`, `surface-img-ref5`, `surface-img-ref6`, `surface-img-ref7`, `surface-img-ref8`, `surface-img-ref9`, `surface-light`, `surface-meadow-green`, `surface-shimmer`, `surface-slope`, `surface-uvu-green`, `surface-valley-green`, `surface-wolverine-green` surfaceTheme `(none)`, `surface-theme-1`, `surface-theme-2`, `surface-theme-3`, `surface-theme-4` surfacePattern `(none)`, `surface-pattern-checker`, `surface-pattern-cross`, `surface-pattern-dots`, `surface-pattern-grid`, `surface-pattern-lines`, `surface-pattern-plus`, `surface-pattern-zigzag` surfaceSlope `(none)`, `slope-35`, `slope-50`, `slope-65`, `slope-a-ink`, `slope-a-uvu`, `slope-b-dark`, `slope-b-light`, `slope-lr`, `slope-tb`, `slope-tlbr`, `slope-trbl`, `surface-slope` glass `(none)`, `glass-lg`, `glass-md`, `glass-sm` plus `(none)`, `plus-color-green`, `plus-color-haze`, `plus-color-wolverine`, `plus-faint`, `plus-mid`, `plus-step-16`, `plus-step-20`, `plus-step-24`, `plus-step-28`, `plus-step-32`, `plus-step-40`, `plus-strong`, `skin`, `skin-pattern-plus` legacySurface `(none)`, `surface--light-grey-lines`, `surface--map`

Lists and tables

Node Type	Allowed Option Groups	Exact Options (from zip)
`List`	`listStyle` `margin` `padding` `textColor`	A11y notes Use <ul> for unordered items; use <ol> when order matters. listStyle `(none)`, `list-box`, `list-check`, `list-circle`, `list-dash`, `list-none`, `list-standard` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green`
`ListItem`	`textColor`	textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green`
`TableWrapper`	`tableWrapper` `margin`	responsive-table is a wrapper utility used throughout the guide pages. tableWrapper `(none)`, `responsive-table` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Table`	`margin`	Attributes: `caption` (string) A11y notes Use <th scope='col\|row'> for headers; do not use tables for layout. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.

Forms

Node Type	Allowed Option Groups	Exact Options (from zip)
`Form`	`padding` `margin`	Attributes: `action` (string), `method` (enum), `novalidate` (boolean) A11y notes Prefer real <label for='id'> connections for every input. Use aria-describedby only when needed (hints/errors). padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Field`	`field` `margin`	Use .field for form field blocks per wg-components.css. Pick only 'field' from UI classes here. field `(none)`, `field` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Label`	`textColor` `fontWeight`	Attributes: `for` (string) textColor `(none)`, `color-black`, `color-brand-drift`, `color-dark-green`, `color-dark-grey`, `color-grey`, `color-light-grey`, `color-meadow-green`, `color-off-white`, `color-sage-green`, `color-seahaze-green`, `color-super-green`, `color-swatch`, `color-uvu-green`, `color-valley-green`, `color-warm-grey`, `color-white`, `color-wolverine-green` fontWeight `(none)`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900`
`Input`	`margin`	Attributes: `type` (enum), `id` (string), `name` (string), `value` (string), `placeholder` (string), `required` (boolean), `disabled` (boolean) margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Textarea`	`margin`	Attributes: `id` (string), `name` (string), `placeholder` (string), `required` (boolean), `disabled` (boolean), `rows` (number) margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Select`	`margin`	Attributes: `id` (string), `name` (string), `required` (boolean), `disabled` (boolean) margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.

Components

Node Type	Allowed Option Groups	Exact Options (from zip)
`Tabs`	`tabs`	A11y notes Tabs require proper ARIA roles and keyboard support (left/right arrows). Use existing JS patterns in the project when wiring behavior. tabs `(none)`, `tabs`
`TabList`	`tabList`	tabList `(none)`, `tab-list`
`Tab`	`tab` `active`	tab `(none)`, `tab` active `(none)`, `active`
`TabPanel`	`tabPanel` `active`	tabPanel `(none)`, `tab-panel` active `(none)`, `active`
`Tooltip`	`tooltipWrapper` `tooltipTrigger` `tooltip`	tooltipWrapper `(none)`, `tooltip-wrapper` tooltipTrigger `(none)`, `tooltip-trigger` tooltip `(none)`, `tooltip`
`Breadcrumb`	`breadcrumb`	breadcrumb `(none)`, `breadcrumb`
`Pagination`	`pagination` `page` `active`	pagination `(none)`, `pagination` page `(none)`, `page` active `(none)`, `active`
`Progress`	`progressWrapper` `progressBar` `progressFill` `progressIcon`	progressWrapper `(none)`, `progress-wrapper` progressBar `(none)`, `progress-bar` progressFill `(none)`, `progress-fill` progressIcon `(none)`, `progress-icon`
`Toggle`	`toggle` `trigger` `content` `options` `on` `off` `selected`	toggle `(none)`, `ui-toggle` trigger `(none)`, `ui-toggle-trigger` content `(none)`, `ui-toggle-content` options `(none)`, `ui-toggle-options` on `(none)`, `on` off `(none)`, `off` selected `(none)`, `selected`
`Slider`	`sliderTrack` `sliderThumb` `sliderLabel` `sliderToggle` `uiSliderTrack` `uiSliderTrackWrapper` `uiSlide`	Slider UI classes from wg-components.css (used in internal demos/tools). sliderTrack `(none)`, `slider-track` sliderThumb `(none)`, `slider-thumb` sliderLabel `(none)`, `slider-label` sliderToggle `(none)`, `slider-toggle` uiSliderTrack `(none)`, `ui-slider-track` uiSliderTrackWrapper `(none)`, `ui-slider-track-wrapper` uiSlide `(none)`, `ui-slide`

Notifications

Node Type	Allowed Option Groups	Exact Options (from zip)
`Alert`	`alertClasses` `state` `margin`	alertClasses `(none)`, `alert`, `alert-close`, `alert-error`, `alert-icon`, `alert-info`, `alert-success`, `alert-warning` state `(none)`, `is-hidden`, `is-visible` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Banner`	`bannerClasses` `state` `margin`	bannerClasses `(none)`, `banner`, `banner-close`, `banner-cookie`, `banner-icon` state `(none)`, `is-hidden`, `is-visible` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.
`Toast`	`toastClasses` `state`	toastClasses `(none)`, `toast`, `toast-container`, `toast-error`, `toast-icon`, `toast-info`, `toast-success`, `toast-warning` state `(none)`, `is-hidden`, `is-visible`
`Callout`	`calloutClasses` `margin` `padding`	calloutClasses `(none)`, `callout`, `callout-feature`, `callout-icon`, `callout-important`, `callout-tip` margin out-* compound options (604 classes) Breakpoints: base (175), md (163), lg (133), xl (133) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class. padding in-* compound options (640 classes) Breakpoints: base (175), md (175), lg (145), xl (145) Modes: direct, jumbo, dwn, dwn2 Sides: all, x, y, t, r, b, l Rule: one class per (breakpoint + mode + side). Selecting nothing writes no class.

Decorative

Node Type	Allowed Option Groups	Exact Options (from zip)
`Deco`	`deco`	Decorative-only classes from template/pages. Use intentionally; avoid for core structure. deco `(none)`, `btn-card`, `checklist-section`, `deco-btn`, `deco-call-out`, `deco-circ`, `deco-girl`, `deco-meadow-h3`, `deco-pulse`, `plus-deco`, `program-deco-graphic`

Dark Mode - needs work

It seems that you have reduce motion enabled!