Line height

Bootstrap-style line-height utilities. All classes use !important — utilities exist to override component-level line-height regardless of source order or specificity.

How it works

  • Four unitless values keyed off familiar Bootstrap names:
    • .lh-1 → 1 (single line, no leading)
    • .lh-sm → 1.25 (compact)
    • .lh-base → 1.5 (default reading)
    • .lh-lg → 2 (airy)
  • Values are unitless on purpose: child elements with their own font-size will compute leading relative to their own size, not the ancestor's.
  • Pair with the font-size helpers for one-off layout tweaks, or with .t-* semantic typography for responsive type.

Live

.lh-1 through .lh-lg

.lh-1 — tight single-line. Multi-line wrapping collapses leading to zero.

.lh-sm — compact 1.25 leading, useful for dense sidebars.

.lh-base — comfortable 1.5, the default reading baseline.

.lh-lg — airy 2.0 for hero copy or pull quotes that should breathe.

<div class="vstack" style="--kc-stack-gap: 0.75rem; max-width: 24rem;">
<p class="lh-1" style="margin: 0; border-left: 2px solid var(--kc-primary-bg); padding-left: 0.5rem;">.lh-1 — tight single-line. Multi-line wrapping collapses leading to zero.</p>
<p class="lh-sm" style="margin: 0; border-left: 2px solid var(--kc-success-bg); padding-left: 0.5rem;">.lh-sm — compact 1.25 leading, useful for dense sidebars.</p>
<p class="lh-base" style="margin: 0; border-left: 2px solid var(--kc-warning-bg); padding-left: 0.5rem;">.lh-base — comfortable 1.5, the default reading baseline.</p>
<p class="lh-lg" style="margin: 0; border-left: 2px solid var(--kc-danger-bg); padding-left: 0.5rem;">.lh-lg — airy 2.0 for hero copy or pull quotes that should breathe.</p>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-line-height')
);
Playground

Markup

markup
<!-- Tight, single-line — headings, badges, button labels -->
<h2 class="lh-1">Single-line heading</h2>

<!-- Compact body — dense UI, sidebars -->
<p class="lh-sm">Short copy with reduced leading.</p>

<!-- Comfortable reading -->
<p class="lh-base">The default reading baseline.</p>

<!-- Airy, for hero or pull-quote layouts -->
<p class="lh-lg">Loose leading for long-form or dramatic copy.</p>

Variables

VariableDefaultNotes
$selector-prefix-lh'.lh-'Prefix prepended to each $values entry. Bootstrap parity by default; override to "#variables.$selector-prefix-islh-" (i.e. .is-lh-) for strict alignment with the framework's .is-* convention. Renamed from $selector-prefix in this release.
$values(1: 1, sm: 1.25, base: 1.5, lg: 2)Map of suffix → line-height value. Each entry emits <prefix><key> with the configured value and !important. Keep values unitless so they scale with the child's font-size.

Override example

app.scss
@use '@adnap/krysalicss/helper/line-height' with (
  // Tweak the ladder without changing class names:
  $values: (
    1:    1,
    sm:   1.3,
    base: 1.55,
    lg:   1.85,
  ),
);

Tokens consumed

None — values are baked at SCSS-compile time rather than read from --kc-* tokens. Use the override above to change them.