Overview

Lead Text is a larger introductory paragraph used directly below a heading or hero title. It summarises the page, section, onboarding step, empty state, documentation article, or product workflow before the user reads the detailed body content. Lead Text supports headings in SaaS dashboard overview pages, admin panels, onboarding flows, empty states, settings pages, ecommerce back-office pages, ERP/POS workflow screens, documentation intros, and marketing or landing sections. It is a pure CSS/Tailwind pattern — a semantic <p> element with Byteion typography tokens and no JavaScript component dependency.

Why this exists

Without a shared Lead Text style, introductory copy becomes inconsistent: too small, too bold, too muted, or visually competing with the heading. Some pages use text-lg font-semibold for intros, others use text-base text-muted-foreground, creating a fractured reading hierarchy. Lead Text establishes a consistent relationship between the page title and its supporting summary — larger than body copy, lighter than a heading, and visually distinct from both.

Mental model

• Heading tells users where they are — the page or section title establishes context.
• Lead Text tells users why the page or section matters — it summarises the purpose, workflow, or value proposition in one or two sentences.
• Paragraph provides the detailed body content — after the intro, standard body copy delivers the full explanation.
• One lead per section — use Lead Text once per page or major section, directly below its heading.
• No JavaScript required — Lead Text is pure HTML and Tailwind utility classes. No import, no component, no runtime.

Lead Text vs Heading vs Paragraph vs Text

All four share the Byteion typography schema but serve distinct roles in page hierarchy:

• Heading — structural page and section titles. Controls the document outline using h1–h4 semantic tags and display/heading variants.
• Lead Text — short introductory paragraph directly below a heading. Larger than body copy, lighter than a heading, and optimised for one or two summary sentences.
• Paragraph — normal readable body copy. Full sentences and multi-line prose for descriptions, documentation, settings copy, empty states, and modal text.
• Text — inline labels, captions, metadata, helper text, inline code, and keyboard shortcuts. Short, scannable text elements that accompany or annotate other content.

In practice: a page has a Heading title, a Lead Text intro sentence, one or more Paragraph body blocks, and Text(caption) for timestamps or metadata.

When to use

• Below a page title — the primary heading on any screen should be followed by a lead intro
• Below a hero headline — landing pages and marketing sections where the headline needs a supporting summary
• Onboarding screens — welcome steps that explain what the user is about to do
• Empty states — descriptive intro text that tells the user why the section is empty and what to do next
• Documentation and article intros — the first paragraph below a docs page title that outlines what the article covers
• Settings or billing pages — a summary sentence at the top of settings, billing, or profile sections
• Before a complex dashboard or report section — lead text that frames the metrics or chart below
• Starter-kit landing pages — hero sections in SaaS starter kits, admin panels, and marketing pages

When not to use

• Do not use Lead Text for every paragraph — reserve it for the single introductory summary below a heading; use Paragraph for body copy
• Do not use it as a replacement for Heading — Lead Text is not a title; it supports the heading and must not compete with it visually
• Do not use it for labels, captions, table metadata, or form helper text — these belong in Text
• Do not use it for dense card copy — cards have limited space; use text-sm leading-6 paragraph style inside cards instead
• Do not use it for critical warnings or errors — lead text looks like soft introductory copy; warnings need Alert or prominent text-foreground styling
• Do not write long multi-paragraph content as Lead Text — keep it to one or two sentences; longer content belongs in Paragraph

Basic example

A page header with a title, lead text summary, and standard body paragraph:

<h1 class="text-3xl font-semibold tracking-tight text-foreground">Analytics</h1>
<p class="text-lg text-foreground leading-8">
  Track your store's performance, monitor key metrics, and identify
  growth opportunities.
</p>
<p class="text-base text-muted-foreground leading-relaxed">
  Use the charts below to compare revenue, orders, and conversion rates
  over time. Export reports for your team or schedule automated digests.
</p>

Usage patterns

Lead Text adapts to several common page layouts. Each pattern pairs a heading with a single lead intro sentence:

<!-- Onboarding page -->
<h2 class="text-2xl font-semibold tracking-tight text-foreground">Onboarding</h2>
<p class="text-lg text-foreground leading-8">
  Welcome to Byteion. Let us set up your workspace in just a few steps.
</p>

<!-- Billing section -->
<h2 class="text-2xl font-semibold tracking-tight text-foreground">Billing</h2>
<p class="text-lg text-foreground leading-8">
  Manage your subscription, invoices, and payment methods.
</p>

<!-- Empty state -->
<h2 class="text-2xl font-semibold tracking-tight text-foreground">No orders yet</h2>
<p class="text-lg text-foreground leading-8">
  Create your first order to start selling products.
</p>

Variants and sizing

Lead Text intentionally has one default style: larger than body copy, lighter than a heading, and optimised for short summaries. Apply it as a Tailwind utility class on a <p> element:

The recommended usage is one or two sentences, placed directly below an h1 or display heading. Lead Text should not compete visually with the heading — keep it in text-foreground with normal weight, not bold or muted. For display sizes, heading variants, and inline text, refer to the Heading and Text pages.

Anatomy

• Paragraph element — a semantic <p> tag
• Size class — text-lg for the larger font size
• Line-height class — leading-8 for generous vertical spacing
• Color class — text-foreground for primary content
• Position — placed directly below the heading, above the first body paragraph

Usage guidelines

• Use exactly once per page or per major section, directly below the heading
• Keep Lead Text to one or two sentences — it is a summary, not a full explanation
• Use text-lg leading-8 text-foreground for the standard lead style
• Constrain with max-w-2xl or max-w-prose to keep line length readable
• Use Paragraph for the body copy that follows the lead intro
• Do not make Lead Text muted or too bold — it should bridge the heading and body copy

Do and Don't

Accessibility

Lead Text has no keyboard behavior by itself. It renders a semantic <p> element that screen readers announce as a paragraph:

• Lead Text should not replace semantic headings — the page outline must still use h1–h4 tags for structure; Lead Text is a paragraph that supports the heading
• Keep contrast strong — text-foreground passes WCAG AA (4.5:1) against background in light mode, dark mode, and branded themes
• Do not communicate required warnings or errors only through Lead Text — lead text looks like a friendly introduction; use Alert for critical messages
• If Lead Text contains links, links must remain visually identifiable — use underline or distinct colour so users can distinguish them from surrounding text
• Keyboard behavior — Lead Text has no keyboard interaction by itself. Interactive children (links, buttons) manage their own focus

Customization

Lead Text typography is customized through Byteion tokens — font size, line height, text color, max width, and spacing rhythm. The default lead style uses text-lg leading-8 text-foreground from the standard Tailwind token scale. Avoid arbitrary one-off sizes unless intentionally extending the token scale. For line-length control, wrap Lead Text in a container with max-w-2xl or max-w-prose.

HTML example

<!-- Page header: Heading + Lead Text + Paragraph -->
<div>
  <h1 class="text-3xl font-semibold tracking-tight text-foreground">Orders</h1>
  <p class="text-lg text-foreground leading-8">
    View, manage, and fulfil all customer orders in one place.
  </p>
  <p class="text-base text-muted-foreground leading-relaxed">
    Track order status, print invoices, update shipping details, and
    handle returns directly from this view.
  </p>
</div>

<!-- Onboarding or empty-state intro -->
<div class="text-center max-w-lg mx-auto">
  <h2 class="text-2xl font-semibold tracking-tight text-foreground">
    Welcome to Byteion
  </h2>
  <p class="text-lg text-foreground leading-8">
    Connect your first data source to get started with real-time analytics.
  </p>
</div>

<!-- Dashboard or report intro -->
<div>
  <h2 class="text-2xl font-semibold tracking-tight text-foreground">
    Revenue overview
  </h2>
  <p class="text-lg text-foreground leading-8">
    Your store generated $24,500 this month, up 12% from last period.
  </p>
</div>

<!-- Documentation article intro -->
<div>
  <h1 class="text-3xl font-semibold tracking-tight text-foreground">
    Getting started with Byteion
  </h1>
  <p class="text-lg text-foreground leading-8">
    Learn how to set up your workspace, invite your team, and publish
    your first dashboard.
  </p>
</div>

React example

Lead Text is a pure HTML/Tailwind pattern — there is no React component. Apply the className attributes directly on a <p> element:

function PageHeader() {
  return (
    <div>
      <h1 className="text-3xl font-semibold tracking-tight text-foreground">
        Orders
      </h1>
      <p className="text-lg text-foreground leading-8">
        View, manage, and fulfil all customer orders in one place.
      </p>
      <p className="text-base text-muted-foreground leading-relaxed">
        Track order status, print invoices, update shipping details.
      </p>
    </div>
  );
}

function OnboardingIntro() {
  return (
    <div className="text-center max-w-lg mx-auto">
      <h2 className="text-2xl font-semibold tracking-tight text-foreground">
        Welcome to Byteion
      </h2>
      <p className="text-lg text-foreground leading-8">
        Connect your first data source to get started with real-time analytics.
      </p>
    </div>
  );
}

function SettingsIntro() {
  return (
    <div>
      <h2 className="text-2xl font-semibold tracking-tight text-foreground">
        Billing
      </h2>
      <p className="text-lg text-foreground leading-8">
        Manage your subscription, invoices, and payment methods.
      </p>
    </div>
  );
}

Vue example

Lead Text is a pure HTML/Tailwind pattern — there is no Vue component. Apply classes directly on a <p> element:

<template>
  <!-- Page header -->
  <div>
    <h1 class="text-3xl font-semibold tracking-tight text-foreground">
      Orders
    </h1>
    <p class="text-lg text-foreground leading-8">
      View, manage, and fulfil all customer orders in one place.
    </p>
    <p class="text-base text-muted-foreground leading-relaxed">
      Track order status, print invoices, update shipping details.
    </p>
  </div>

  <!-- Onboarding intro -->
  <div class="text-center max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold tracking-tight text-foreground">
      Welcome to Byteion
    </h2>
    <p class="text-lg text-foreground leading-8">
      Connect your first data source to get started with real-time analytics.
    </p>
  </div>

  <!-- Settings or billing intro -->
  <div>
    <h2 class="text-2xl font-semibold tracking-tight text-foreground">
      Billing
    </h2>
    <p class="text-lg text-foreground leading-8">
      Manage your subscription, invoices, and payment methods.
    </p>
  </div>
</template>

API Reference

Lead Text uses the standard HTML <p> element with Byteion typography tokens applied via Tailwind utility classes. There is no component, no props, and no JavaScript import:

React and Vue projects use the same approach: a plain <p> element with Byteion Tailwind classes. No import needed. For display sizes, heading variants, code, kbd, caption, and inline text, refer to the Heading and Text documentation.

Developer tips

• Pair Lead Text with a clear Heading — every lead intro should be preceded by a heading so users know the section context
• Keep it short — Lead Text should be one or two sentences; if you are writing three or more sentences, use Paragraph instead
• Use max-width for readable line length — constrain with max-w-2xl or max-w-prose to prevent lines stretching too wide on large screens
• Test mobile wrapping — lead text reflows naturally at 375 px; verify no orphans or awkward breaks
• Test long translated copy — a concise English lead sentence may expand significantly in German or Russian
• Do not overuse it inside dense dashboards — Lead Text is for page and section intros, not for every widget or card

Common mistakes

• Using Lead Text as a heading — applying text-lg to an h2 or making a Lead Text <p> look like a title breaks the document outline
• Using it for every paragraph — if every paragraph on the page is "lead" text, none of them stand out; reserve Lead Text for the single intro below each heading
• Writing too much text — Lead Text longer than two sentences becomes a paragraph; use Paragraph for body copy
• Making it too muted for important context — lead text should use text-foreground, not text-muted-foreground; muted lead text looks like a footnote, not an introduction
• Using it for labels or metadata — SKUs, timestamps, helper text, and captions belong in Text
• Not testing mobile wrapping — long lead text on a small screen may overflow or wrap awkwardly; verify the layout at 375 px

Production usage tips

• Test responsive wrapping — verify lead text reflow at 375 px, 768 px, and 1024 px breakpoints
• Test translated content — enable a long-language locale (German, Russian) and verify no horizontal overflow
• Test dark mode contrast — ensure text-foreground passes WCAG AA against background in both light and dark themes
• Check page hierarchy — verify that Heading always comes before Lead Text, and Lead Text always comes before Paragraph
• Keep React and Vue output aligned with the core typography schema — all frameworks use the same Tailwind classes; there is no component API to synchronise

Premium examples

Pro patterns available in Byteion Pro:

• Hero section with headline, lead text, and actions — a landing hero pairing a display heading with a lead intro sentence and primary/secondary CTAs
• Dashboard overview header with metrics — a page header with text-lg lead text summarising the period-over-period performance
• Empty-state intro copy with CTA — centred empty state with text-lg lead text, muted secondary description, and a primary action button
• Onboarding step intro — multi-step wizard where each step has a heading and a single lead sentence explaining what the user will configure
• Ecommerce admin page intro — admin pages (Orders, Products, Customers) each starting with a heading and lead summary of the current view
• Documentation article intro block — docs articles with a page title, lead intro outlining the article scope, and a table of contents

Related components

• Heading — page and section titles that pair with Lead Text as the supporting summary
• Paragraph — standard body copy used below Lead Text for detailed content
• Text — inline labels, captions, metadata, helper text, inline code, and keyboard shortcuts
• Button — primary action that often accompanies Lead Text in hero and empty-state layouts
• Card — surface container where Lead Text may appear as the intro above card content

API Reference

Related components

Pair this component with adjacent Byteion primitives from the same workflow: form controls for data entry, feedback components for validation, and layout primitives for spacing.

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX