Winnie CSS
  1. Primitives
  2. heading

heading

Foundational heading primitive.

Margherita Pizza 
<h2 data-component="heading" data-size="5" data-weight="medium">
  Margherita Pizza
</h2>

Import

Import just the breadcrumbs styles.

@import "@winnie-ui/css/spatial/typography";
@import "@winnie-ui/css/visual/typography";

Anatomy

Attach the appropriate data attributes in the structure below.

<h1 data-component="heading" />

Examples

Size

Use the data-size attribute to change the size.

Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza 
<h2 data-component="heading" data-size="<size>">
  Margherita Pizza
</h2>

Color

Use the data-accent-color attribute to change the color.

Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza 
<h2 data-component="heading" data-accent-color="<color>">
  Margherita Pizza
</h2>

Contrast

Use the data-contrast attribute to change the contrast.

Margherita Pizza Margherita Pizza Margherita Pizza 
<h2 data-component="heading" data-contrast="<contrast>">
  Margherita Pizza
</h2>

Weight

Use the data-weight attribute to change the weight.

Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza Margherita Pizza 
<h2 data-component="heading" data-weight="<weight>">
  Margherita Pizza
</h2>

Alignment

Use the data-align attribute to change the alignment.

Margherita Pizza Margherita Pizza Margherita Pizza 
<h2 data-component="heading" data-align="<align>">
  Margherita Pizza
</h2>

Reference

heading

Represents the heading element.

AttributeValue
data-accent-color"red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink" | "grey" | "brand"
data-align"left" | "center" | "right"
data-contrast"low" | "normal" | "high"
data-size"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
data-weight"normal" | "medium" | "semibold" | "bold" | "extrabold"
Variable
--wui-heading-font-family
--wui-heading-letter-spacing