An example of body text.
An example of emphasis
An example of strong text.
An example with
An example of small text.
An example with superscript1 and subscript2.
``` ## Variants and features ### Paragraph `P` is the standard body text element. It renders a `p` tag with responsive font size and appropriate vertical margins. Use it for any block of prose content. ```tsx <>Your direct debit is collected on the 1st of each month.
If you want to change the amount, you can do this in your account settings.
``` ### Small text `Small` reduces the font size to the `small` scale from the design token system. It renders a `small` element and is typically used inline within a `P` or on its own for captions, legal text, or secondary information. ```tsxYour estimated bill is £142. Based on average household usage.
``` ### Bold and semi-bold `Strong` renders a `strong` element with `fontWeights.bold`. Use it to emphasise a word or phrase that is genuinely important within a sentence. `SemiStrong` renders a `strong` element with `fontWeights.semiBold`. Use it for moderate emphasis, such as term labels within a sentence, where full bold would be visually heavy. Note: `SemiStrong` is not exported from the Nebula public API. Use `Strong` for emphasis in application code. ```tsxYour next payment of £142.00 is due on 1 February 2025.
``` ### Italic `Em` renders an `em` element with italic styling. Use it for titles of works, technical terms introduced for the first time, or other cases where italic has semantic meaning. Do not use it for decorative effect. ```tsxThis tariff is known as Flex 12.
``` ### Strikethrough `LineThrough` renders a `span` with `text-decoration: line-through`. Use it to show that a value has been removed or replaced, such as an original price alongside a discounted price. ```tsxYour tariff includes a standing charge1.
Emissions are measured in CO2e.
``` ## Rules and guidance ### Usage - **Body text** SHOULD use Nebula Text components (P, Small, Strong, Em, etc.) rather than raw HTML elements. Rationale: Nebula text components apply responsive font sizes, spacing, and color from the design token system. Raw elements bypass these. [id: text.no-raw-elements; testability: auto] - **P** SHOULD be used for any block of prose content that is not a heading or list. [id: text.p-for-prose; testability: manual] - **P** MUST NOT be used to visually style text to look like a heading. Rationale: Applying heading-like styling to a P element breaks document structure for screen reader users. Use a Heading component instead. [id: text.no-heading-from-text; testability: manual] - **Small** SHOULD be used for supplementary text such as captions, legal disclaimers, or secondary labels. Rationale: Small text is harder to read at small viewport sizes. Reserve it for genuinely secondary content. [id: text.small-for-secondary; testability: manual] - **LineThrough** SHOULD be accompanied by surrounding text or a visually hidden label that conveys the same meaning for screen reader users. Rationale: The CSS text-decoration line-through value is not announced by all screen readers. [id: text.linethrough-accessible-context; testability: manual] - **P** SHOULD NOT have its color overridden outside the theme. Rationale: P color is set to colors.body. Overriding it may break contrast ratios against background tokens. [id: text.color-not-overridden; testability: manual] ### Content - **Strong** SHOULD be used to emphasise genuinely important information, not for decorative styling. Rationale: Strong maps to the strong HTML element, which has semantic weight. Overuse dilutes its meaning. [id: text.strong-for-meaning; testability: manual] - **Em** SHOULD be used when italic has semantic meaning (titles, technical terms, stress emphasis), not for decorative effect. Rationale: Em maps to the em HTML element, which has semantic meaning for screen readers. Decorative use of italic is misleading. [id: text.em-for-semantic-emphasis; testability: manual] - **LineThrough** SHOULD be used only to indicate that a value has been removed or superseded, not for decoration. Rationale: Screen readers may not convey strikethrough styling. A visually hidden label may be needed to communicate the meaning to screen reader users. [id: text.linethrough-for-removed-value; testability: manual] ### Composition - **Strong, Em, Small, LineThrough, Sup, Sub** SHOULD be used inside a block-level element such as P rather than as standalone block elements. Rationale: These are inline elements. Using them as standalone blocks may produce unexpected layout and is semantically incorrect. [id: text.inline-elements-inside-block; testability: auto] ## Accessibility ### In brief Text is made of native text elements: `p`, `small`, `strong`, `em`, `sup` and `sub`. The words are what a screen reader reads, so the meaning has to be in them. `LineThrough` is a `span` with a line through it, which a screen reader does not announce. ### What Nebula provides - `P`, `Small`, `Strong`, `SemiStrong`, `Em`, `Sup` and `Sub` render native elements (`SemiStrong` is a `strong` with a lighter weight). - The font sizes are smaller below the `small` breakpoint. - Text is never a tab stop. ### Accessible design #### Put the meaning in the words, not in the style Italics, a line through the text and a smaller size are only visual. A screen reader user does not hear a struck-through price as removed, so write "Was £10, now £8" and not a crossed-out £10 beside "£8". WCAG: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) #### Check the colour contrast at the mobile font size as well The text is smaller below the `small` breakpoint, and the contrast ratio a text needs depends on its size. WCAG: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) ### Accessible development #### Use `Strong` and `Em` only for importance and stress A `strong` or `em` element says the text is important or stressed. For appearance alone, use a style on a plain element, and use `Sup` and `Sub` only for real superscript and subscript. WCAG: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) #### Use one `P` for each paragraph Line breaks inside one paragraph, or a `div` of loose text, give a screen reader user no paragraphs to move between. WCAG: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) ### Accessibility testing status Reviewed on 9 October 2026 against v17.0.1. | Test | Status | Tested with | | --- | --- | --- | | Default state | Tested | axe-core via the Storybook test runner (CI) | | Advanced states | Partially tested | axe-core via the Storybook test runner (CI) | | Keyboard navigation | Manually tested | keyboard (reported by the owner) | | Screen reader | Partially tested | VoiceOver with Chrome (reported by the owner) | What each test covers: - Default state: The component as it first appears, before anything is clicked or changed. - Advanced states: Every other state and variant: error, open, selected, each size and style, and hovering. - Keyboard navigation: Whether every function can be reached and used with the keyboard alone, with a visible focus ring. - Screen reader: Whether a screen reader announces what is on screen correctly: the name, the role and any state. What these statuses mean: - Tested: Every check in this row passed in an automated run that repeats on every pull request. - Manually tested: Every check in this row was run once, by a person or with a tool they started, and all of them passed. It is not re-run on every change. - Partially tested: Some checks in this row were run once and passed; the rest are still to do. - Issue found: A check in this row failed. The ticket is shown beside the status. - Not tested: No check in this row has been run yet. - Not applicable: This row does not apply to the component, for the reason given beside it. The table records which checks were run on this component on its own. It is not a statement of WCAG conformance, and it does not cover how the component is used. ## Properties ### P Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### Strong Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### Em Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### Small Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### Sup Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### Sub Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ### LineThrough Also accepts all props from `HTMLAttributes`. - `as` (type `ElementType`, optional). Renders the component as a different element or component, e.g. `as="section"`. - `forwardedAs` (type `ElementType`, optional). Like `as`, but passed on to the component being wrapped, for when a styled wrapper should keep its own element and change the one beneath it. ## Styles Reference only; you do not need this to use the component. This is the CSS its styled elements use, with theme tokens shown by name. `${...}` is an interpolation (a theme token, a mixin or another value from the code). A `&[prop]` or `@when