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
Section titled “How to use it”Housing benefit
Support for people with low incomes and high housing costs.
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.
Last updated 4 March 2026.
<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 --><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>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" })}> 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:
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
Section titled “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
Section titled “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.