# 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.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/paragraph/paragraph.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/heading/heading.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->
```

```html
<h2 class="lt-heading">Housing benefit</h2>


<p class="lt-paragraph" data-variant="lead">
Support for people with low incomes and high housing costs.
</p>


<p class="lt-paragraph">
You can apply every month. The deadline is the 25th, and the answer comes around the 20th of the following month. If you have had housing benefit before, your application is renewed automatically.
</p>


<p class="lt-paragraph" data-size="small">
Last updated 4 March 2026.
</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" })}>
  Housing benefit is means-tested support for people with low incomes.
</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" }))
```

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