Winnie CSS
  1. Primitives
  2. text

text

Foundational text primitive.

Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-size="3">
  Thin crust pizza topped with melting mozzarella and basil
</span>

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.

<span data-component="text" />

Examples

Size

Use the data-size attribute to change the size.

Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-size="<size>">
  Thin crust pizza topped with melting mozzarella and basil
</span>

Color

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

Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-accent-color="<color>">
  Thin crust pizza topped with melting mozzarella and basil
</span>

Contrast

Use the data-contrast attribute to change the contrast.

Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-contrast="<contrast>">
  Thin crust pizza topped with melting mozzarella and basil
</span>

Weight

Use the data-weight attribute to change the weight.

Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-weight="<weight>">
  Thin crust pizza topped with melting mozzarella and basil
</span>

Alignment

Use the data-align attribute to change the alignment.

Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil Thin crust pizza topped with melting mozzarella and basil 
<span data-component="text" data-align="<align>">
  Thin crust pizza topped with melting mozzarella and basil
</span>

Reference

text

Represents the text 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-text-font-family
--wui-text-letter-spacing