Lily Design System™

Body Text

A body text is a rendered text block within a content width container. It wraps article body content for consistent typography targeting by the consumer's stylesheet.

This headless component uses a <div> element to wrap body text content such as paragraphs, lists, and other block-level elements.

Example

BodyText
Show demo markup 
<div class="body-text" aria-label="a rendered text block within a content width container">BodyText</div>
Usage example 
<ContentBlock width="normal">
  <BodyText>
    <p>First paragraph of article body text.</p>
    <p>Second paragraph with more detail.</p>
  </BodyText>
</ContentBlock>
Show Svelte source 
// In your Svelte component:
import BodyText from "lily-design-system-svelte-headless/components/BodyText/BodyText.svelte";

<BodyText>
  <!-- content -->
</BodyText>

Usage

<ContentBlock width="normal">
  <BodyText>
    <p>First paragraph of article body text.</p>
    <p>Second paragraph with more detail.</p>
  </BodyText>
</ContentBlock>
<BodyText>
  <p>The research findings indicate a significant shift in consumer behavior
  over the past decade.</p>
  <ul>
    <li>Online purchases increased by 45%</li>
    <li>In-store visits declined by 20%</li>
  </ul>
  <p>These trends are expected to continue into the next quarter.</p>
</BodyText>
<BodyText>
  <p>Healthcare providers across the region reported improved patient outcomes
  following the implementation of the new protocol.</p>
  <blockquote>
    <p>"The results exceeded our expectations," said Dr. Smith.</p>
  </blockquote>
</BodyText>

Props

  • children: slot (required) -- text content (paragraphs, lists, etc.)
  • ...restProps: Any additional HTML attributes

Keyboard Interactions

  • None

ARIA

  • None -- semantic content comes from child elements (<p>, <ul>, <ol>, <blockquote>, etc.)

When to Use

  • Use for article body text that needs consistent typography styling
  • Use inside editorial layouts to wrap running text content
  • Use in combination with ContentBlock for width-constrained body text

When Not to Use

  • Do not use for standalone headings or captions -- use Headline or Caption
  • Do not use for navigation or interactive content
  • Do not use for short inline text -- this is for block-level body content

Headless

This component provides a <div> container for body text content, with zero visual styling. The consumer is responsible for all CSS including font family, font size, line height, paragraph spacing, list styling, blockquote formatting, and responsive typography.

Styles

The consumer provides all CSS styling. The component renders with a .body-text class for targeting. No default styles are included -- this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class body-text
  • Verify child content is rendered correctly
  • Verify pass-through attributes are applied

Advice

  • Designers: Use appropriate line height and measure (characters per line) for readability. Ensure sufficient contrast between text and background. Consider responsive font sizing.
  • Developers: Use semantic HTML elements within BodyText (paragraphs, lists, blockquotes). Do not nest BodyText components. Pair with ContentBlock for width constraint.

Implementation Notes

  • Uses <div> element as container
  • Wraps body text content for consistent typography targeting
  • Consumer applies typography styles via .body-text class
  • Intended to be used inside ContentBlock for width constraint
  • Inspired by Reuters Graphics BodyText component

Related components

  • blockquote — a block-level quotation with optional source citation
  • section-heading — a styled heading introducing a major content section, with optional eyebrow and subtitle

References

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: body-text
  • PascalCase: BodyText
  • Description: a rendered text block within a content width container
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .body-text
  • Interactive: no

ARIA

  • None -- semantic content comes from child elements (p, ul, ol, etc.)

Keyboard

  • None

Props

  • children: slot (required) -- text content (paragraphs, lists, etc.)
  • ...restProps: Any additional HTML attributes