---
title: Lead paragraph
description: A lead paragraph is the opening paragraph of an article, etc.
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.032Z
checksum: 3800f13f6cc6734878db13a6613c635526ec29a25b1efacb53b7fdb4efb9e915
---

# Lead paragraph

## Import

```tsx
import { Lead } from '@dnb/eufemia/elements'
```

## Description

A lead paragraph is the opening paragraph of an article, such as a blog post or news story.

Lead uses the selected brand's text font and lead typography. The DNB UI
theme uses Medium, matching the Eufemia Web Figma library. See
[font roles](/web/layout-and-typography/typography/#font-roles).

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/elements/Lead.ts)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/layout-and-typography/elements/lead)

## Paragraph class modifiers

Eufemia comes with [several styles](/web/layout-and-typography/elements/paragraph/#paragraphs-modifiers) you can use on paragraphs and other HTML text elements, where `.dnb-p--lead` is one of them.


## Demos


```tsx
render(<div>
        <Lead>Default lead</Lead>
        <Lead>
          Lead with <Anchor href="/">Anchor / Text Link</Anchor> looks
          great!
        </Lead>
      </div>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "element": {
      "doc": "Defines the Element Type, like `p`.",
      "type": [
        "HTMLElement",
        "string"
      ],
      "status": "optional"
    },
    "size": {
      "doc": "Sets the font size, also sets the line-height if `lineHeight` property is not set.",
      "type": [
        "\"x-small\"",
        "\"small\"",
        "\"basis\"",
        "\"medium\"",
        "\"large\"",
        "\"x-large\"",
        "\"xx-large\""
      ],
      "status": "optional"
    },
    "lineHeight": {
      "doc": "Sets the line height. Defaults to the size, or the Display line height when family is display.",
      "type": [
        "\"x-small\"",
        "\"small\"",
        "\"basis\"",
        "\"medium\"",
        "\"large\"",
        "\"x-large\"",
        "\"xx-large\""
      ],
      "status": "optional"
    },
    "align": {
      "doc": "Sets the text alignment.",
      "type": [
        "\"center\"",
        "\"left\"",
        "\"right\""
      ],
      "status": "optional"
    },
    "family": {
      "doc": "Sets the font family. Display is experimental. [Contact the Eufemia team](/design-system/contact) before use. Use it only for short, expressive headlines. Display has one upright weight.",
      "type": [
        "\"basis\"",
        "\"default\"",
        "\"heading\"",
        "\"monospace\"",
        "\"display\""
      ],
      "status": "optional"
    },
    "weight": {
      "doc": "Sets the font weight.",
      "type": [
        "\"light\"",
        "\"regular\"",
        "\"medium\"",
        "\"bold\""
      ],
      "status": "optional"
    },
    "decoration": {
      "doc": "Sets the font decoration.",
      "type": "\"underline\"",
      "status": "optional"
    },
    "slant": {
      "doc": "Sets the font style.",
      "type": "\"italic\"",
      "status": "optional"
    },
    "proseMaxWidth": {
      "doc": "Sets the maximum width based on character count for all Typography children. This will limit the text width to approximately the specified number of characters. Use `true` for a default value of 60ch.",
      "type": [
        "number",
        "boolean"
      ],
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```