v0.0.3

Documentation version

Currently searching v0.0.3

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

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.

ComponentsLumos 0.0.1Open component

RichText

Styles a block of HTML you did not write: from a CMS, a Markdown file, or a form.

Content that arrives as a block of HTML (from a CMS, a Markdown file, an editor) has headings, lists, links and bold text in it that you cannot put classes on. RichText styles that block from the outside, so it matches the rest of the site without anyone having to tag it.

astro
<RichText>
  <Fragment set:html={post.body} />
</RichText>

Props

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
variant"inherit" | "display" | "h1"–"h6" | "large" | "main" | "small""inherit"The base text style for the block. Headings inside keep their own sizes.
maxWidthnumberNoneA maximum width in ch units for the whole block.

What it styles

Headings take the site's type scale, lists get markers and spacing, links get the theme's link colors and underline, and the first and last children have their outer margins removed so the block sits flush in its container.