Paragraph

Body text with a readable line length. The width is limited to 70 characters, because longer lines make it hard to find the start of the next one. That is the most common reason a text is hard to read even when the font is large enough.

How to use it

Example

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/paragraph/paragraph.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/heading/heading.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/lotek.css -->

<h2 class="lt-heading">The small print</h2>

<p class="lt-paragraph" data-variant="lead">
Everything a runner's policy covers, and everything it does not.
</p>

<p class="lt-paragraph">
The premium is drawn on the first of every month. A claim must be filed within 30 days, with a death certificate and the runner's last log. Black ICE, power surges and other runners count as acts of God, and are not covered.
</p>

<p class="lt-paragraph" data-size="small">
Last updated 4 March 2079.
</p>

TypeScript

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/paragraph.css"
import "@lo-tek/interfaces/heading.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<p {...lt.paragraph({ variant: "lead" })}>
  A runner's policy pays out when the runner flatlines, within the terms.
</p>

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If the element is already there, set them on it. That is the way when you enhance HTML a server or a template has sent:

import { lt } from "@lo-tek/interfaces"

const lead = document.querySelector<HTMLParagraphElement>("#lead")

lt.setAttributes(lead, lt.paragraph({ variant: "lead" }))

kotlinx.html

// Once for the whole app, in the page template: every stylesheet, from the WebJar.
head { link(rel = "stylesheet", href = LotekWebJar.CSS) }

On a Kotlin or Java server, the same with kotlinx.html and lo-tek-kotlinx-html. The builder functions are in Lt, with an enum for each list of values:

import kotlinx.html.*
import no.lotek.*
import no.lotek.html.lt

fun FlowContent.smallPrint() {
    h2 { lt(Lt.heading()); +"The small print" }
    p { lt(Lt.paragraph(variant = ParagraphVariant.LEAD)); +"Everything a runner's policy covers, and everything it does not." }
    p {
        lt(Lt.paragraph())
        +"The premium is drawn on the first of every month. A claim must be filed within 30 days, with a death certificate and the runner's last log. Black ICE, power surges and other runners count as acts of God, and are not covered."
    }
    p { lt(Lt.paragraph(size = Size.SMALL)); +"Last updated 4 March 2079." }
}

Attribute	Used for
(omitted)	Body text
data-variant="lead"	The lead paragraph right below the heading
data-size="large"	Text that should stand out
data-size="small"	Asides, dates, source references

Consecutive paragraphs get space between them on their own.

Classes you can style

Class	What it is
.lt-paragraph	The paragraph. The size comes from data-size, the lead from data-variant.

Variable	Default
--lt-paragraph-width	70ch
--lt-paragraph-gap	var(--lt-spacing-3)
--lt-paragraph-line-height	var(--lt-line-height-article)

--lt-paragraph-line-height applies to the default size. data-size="large" and data-variant="lead" set their own line height.

If the paragraph sits in a column that is already narrow enough, the limit can be removed:

.lt-card .lt-paragraph {
  --lt-paragraph-width: none;
}

See Customising for how the variables and the layer work.

Accessibility

• Do not use <br> to make paragraphs. A new <p> is what screen readers can jump between.
• data-size="small" should not be used for anything the user has to read. Terms in small print are as hard on screen as on paper.
• Leave the line length alone. It is the simplest difference between a text that is read and one that is skimmed.