# Paragraph

> Body text and lead paragraphs with a limited line length. A CSS component with one class and no JavaScript.

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

**Plain HTML**

```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 -->
```

```html
<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**

```ts
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:

```tsx
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:

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


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


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

**kotlinx.html**

```kotlin
// 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:

```kotlin
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:

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

See [Customising](/customising.md) 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.