Lead

Intro-paragraph styling. Apply .lead to the first paragraph of an article or section: it raises the font size, drops the weight, and opens up the line-height so the opening line reads as a lede rather than body copy.

Live

.lead paragraph above default body

Live

Krysalicss is an extremely modular, multi-theme CSS framework. The compiled output ships zero JavaScript.

This second paragraph uses default body sizing. The contrast between the two paragraphs is the whole point of the .lead class.

HTML

<div>
<p class="lead" style="margin: 0 0 1rem;">Krysalicss is an extremely modular, multi-theme CSS framework. The compiled output ships zero JavaScript.</p>
<p style="margin: 0;">This second paragraph uses default body sizing. The contrast between the two paragraphs is the whole point of the .lead class.</p>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-lead')
);

Playground

Standalone lede

Live

A standalone .lead, useful as a section opener or a card eyebrow.

HTML

<p class="lead" style="margin: 0;">A standalone .lead, useful as a section opener or a card eyebrow.</p>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-lead')
);

Playground

Markup

<p class="lead">
  A short introductory paragraph that sets up the article. Larger, lighter, and
  slightly more breathable than body copy.
</p>
<p>
  Subsequent paragraphs use default body styling.
</p>

Variables

Variable	Default	Notes
`$selector`	`'.lead'`	Class-only; apply to any paragraph or block-level element.
`$font-size`	`1.25rem`	About 20% larger than body copy.
`$font-weight`	`300`	Light weight — requires the font family to ship a 300 cut.
`$line-height`	`1.5`	Slightly opener than body for the introductory feel.

Override example

@use '@adnap/krysalicss/typography/lead' with (
  $font-size: 1.375rem,
  $font-weight: 400,
  $line-height: 1.55,
);

Tokens consumed

None — this module has no runtime --kc-* tokens. Text colour inherits from the surrounding context (so .lead works inside any theme or surface without extra overrides).