v0.0.3

Documentation version

Open files in your editor

Project folderVersion

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Open files in

ComponentsLumos 0.0.1Open component

Paragraph

Body text at any size, in any tag.

Paragraph renders body copy. Like Heading, it separates the element from the style: tag decides what it is in the markup, variant decides how it looks.

astro

<Paragraph variant="large" maxWidth={38}>
  A lead paragraph, capped at a comfortable measure.
</Paragraph>

<Paragraph variant="large" maxWidth={38}>
  A lead paragraph, capped at a comfortable measure.
</Paragraph>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`tag`	`"p" \| "span" \| "div"`	`"p"`	The element to render. Use `span` for a run of text inside something else.
`variant`	`"inherit" \| "display" \| "h1"–"h6" \| "large" \| "main" \| "small"`	`"inherit"`	The text style. `inherit` keeps whatever the surrounding context uses.
`maxWidth`	`number`	None	A maximum width in `ch` units. Around 60–70 is a comfortable reading measure.

Measure

Long lines are hard to read. maxWidth is in ch units (the width of a zero in the current font), so the cap follows the type size rather than being a pixel value that stops making sense when the text scales.