---
title: Introductory paragraph
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.010Z
checksum: 3800f13f6cc6734878db13a6613c635526ec29a25b1efacb53b7fdb4efb9e915
---

# Introductory paragraph

## Import

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

## Description

An ingress is a brief, introductory paragraph that follows immediately after the title of an article.

Ingress uses Medium by default, matching Eufemia Web in Figma. Use an
explicit weight only when the design calls for it:

```tsx
<Ingress weight="regular">A short introduction to the article.</Ingress>
```

## Relevant links

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


## Demos


```tsx
render(<div>
        <Ingress>Default ingress</Ingress>
        <Ingress>
          Ingress with <Anchor href="/">Anchor / Text Link</Anchor> looks
          great!
        </Ingress>
      </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)."
}
```