Title

Source

• Title.css

Example

<div class="x-title">
    Title
</div>

More examples can be found in the Winduum docs.

Example CSS

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

/* Example customization */
@layer theme {
  :root, :host {
    --x-title-font-weight: var(--font-weight-semibold);
    --x-title-font-size: 0.875rem;
  }
}

Winduum CSS Code

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

:root, :host {
  --x-title-font-weight: var(--font-weight-semibold);
  --x-title-font-size: var(--text-sm);
  --x-title-line-height: calc(1em + 0.25rem);
}

winduum/src/components/title/default.css

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

winduum/src/components/title/lg.css

.x-title:is(.lg) {
  --x-title-font-size: var(--text-base);
}

winduum/src/components/title/sm.css

.x-title:is(.sm) {
  --x-title-font-size: var(--text-xs);
}