Heading

Source

• Heading.css

Example

<h1 class="x-heading">Heading</h1>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/heading/props/default.css" layer(theme);
@import "winduum/src/components/heading/default.css" layer(utilities);
@import "winduum/src/components/heading/lg.css" layer(utilities);
@import "winduum/src/components/heading/sm.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-heading-font-family: var(--font-primary);
    --x-heading-font-weight: var(--font-weight-semibold);
  }
}

Winduum CSS Code

winduum/src/components/heading/props/default.css

:root, :host {
  --x-heading-font-family: var(--font-primary);
  --x-heading-font-weight: var(--font-weight-semibold);
  --x-heading-font-size: var(--text-xl);
  --x-heading-line-height: calc(1em + 0.375rem);
}

winduum/src/components/heading/default.css

.x-heading {
  font-family: var(--x-heading-font-family);
  font-weight: var(--x-heading-font-weight);
  font-size: var(--x-heading-font-size);
  line-height: var(--x-heading-line-height);
  letter-spacing: var(--x-heading-letter-spacing);
  text-wrap: balance;
}

winduum/src/components/heading/lg.css

.x-heading:is(.lg) {
  --x-heading-font-size: var(--text-3xl);
}

winduum/src/components/heading/sm.css

.x-heading:is(.sm) {
  --x-heading-font-size: var(--text-lg);
}