Lead Paragraph Styles

Use a lead paragraph to introduce a page or section with a short summary. It can be plain, framed, rounded, or themed to match the site’s palette.

1. Quick Reference

  • Base: [.lead] — slightly larger text only

  • Framed: [.lead.panel] — subtle background, thin border, accent bar

  • Rounded: add .rounded to any framed variant

  • Admonition themes: .note, .tip, .warning, .important, .caution

  • Brand themes: .theme-accent, .theme-blue, .theme-purple, .theme-orange, .theme-silver

2. Plain Lead

This is a plain lead paragraph. It increases the font size for a softer, introductory tone.

3. Framed Lead

This framed lead uses a subtle panel background, thin border, and a small accent bar on the left.

4. Framed + Rounded

Rounded corners create a friendlier, card-like feel while keeping the same framing.

5. Framed Intensities

Subtle frame: slightly thinner accent bar and the default soft background and border.

Strong frame: a touch darker background and border with a thicker accent bar.

6. Admonition-Themed Variants

“Note” theme: uses the same hues as note admonitions for light emphasis.

“Tip” theme: a gentle green accent suitable for helpful hints or best practices.

“Warning” theme: a warm tone for important caveats without being overpowering.

“Important” theme: stronger emphasis for critical information.

“Caution” theme: attention-grabbing but still subtle and friendly.

7. Brand-Themed Variants

Brand accent theme: tinted background and border derived from the site’s accent color.

Brand blue theme: soft blue tint with a blue accent bar.

Brand purple theme: soft purple tint that pairs well with headings.

Brand orange theme: warm, approachable accent and tint.

Neutral silver theme: understated background for general emphasis.

8. Usage Examples

Use roles on a paragraph block to apply styles. You can combine multiple roles.

[.lead]
This is a plain lead.

[.lead.panel]
This is a framed lead.

[.lead.panel.rounded]
This is a rounded, framed lead.

[.lead.panel.note.rounded]
This is a rounded, note-themed lead.

[.lead.panel.theme-accent.rounded]
This is a rounded, brand-accent themed lead.

9. Theming Notes

  • Framed variants support CSS variables for customization via the theme:

  • --lead-accent: color of the left accent bar

  • --lead-bg: background color of the panel

  • --lead-border: border color of the panel

  • Predefined roles set these variables based on the UI palette. Prefer roles over inline styles to keep content portable.