---
title: Section
description: Use Section to give an area of the page a visual background or surface.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.315Z
checksum: 100db4bfc40234058384e5c7380e141f50c9232cd539177b9955876af77650e5
---

# Section

## Import

```tsx
import { Section } from '@dnb/eufemia'
```

## Description

The Section component is a visual helper. It wraps content inside a visual section banner.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/section)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/components/section)

### Breakout / fullscreen

Under the hood, it uses a couple of tricks to achieve an infinite fullscreen size. You do not need to do anything more than you normally would with your content. The background of the Section component will extend beyond a `max-width` when enabled with the `breakout` property.

## Usage

Many of the properties support [media queries](/web/layout-and-typography/breakpoints/). This makes this component well suited to change its look based on screen sizes.

Each of these properties do support either a single value or an object containing one or more media query sizes:

```js
{
  small: false,
  medium: true,
  large: true,
}
```

- `breakout={boolean}` or e.g. `breakout={{ small: boolean }}`
- `roundedCorner={boolean}` or e.g. `roundedCorner={{ small: boolean }}`
- `outline={boolean|string}` or e.g. `outline={{ small: 'black' }}`
- `backgroundColor={string}` or e.g. `backgroundColor={{ small: 'white' }}`
- `textColor={string}` or e.g. `textColor={{ small: 'black-80' }}`
- `innerSpace={string}` or e.g. `innerSpace={{ small: { top: 'small' } }}`


## Related components

Section is part of the [Content and layout](/web/components/overview/#content) category. More components in this category:

- [Accordion](/web/components/accordion/) – to let people open and close sections of related content.
- [AI components](/web/patterns-and-extensions/ai/) – Building blocks for AI chat experiences, from the welcome screen with suggestions to the conversation, streamed markdown responses and the prompt input.
- [Avatar](/web/components/avatar/) – to make a person, company, or profile easier to recognize.
- [Card](/web/components/card/) – to group related content in a clear, separated area.
- [Country flags](/web/components/country-flag/) – to show a country by its flag from an ISO country code.
- [Icons](/web/components/icon/) – to render and size an icon in line with Eufemia styling.

[See all in Content and layout](/web/components/overview/#content)


## Demos

### Default Section


```tsx
render(<Section>
      <P space={0}>
        Visual Section: <Anchor href="#">default</Anchor>
      </P>
    </Section>)
```


### Default Section with inner space


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large',
  left: 'small'
}}>
      <P space={0}>
        Visual Section: <Anchor href="#">default with innerSpace</Anchor>
      </P>
    </Section>)
```


### Responsive inner space (padding)

Where `innerSpace` do respond on different screen sizes.


```tsx
render(<Section innerSpace={{
  small: {
    block: 'small',
    inline: 'x-small'
  },
  medium: {
    block: 'medium',
    inline: 'small'
  },
  large: false
}} backgroundColor="var(--token-color-background-neutral-subtle)" breakout={false}>
      <P space={0}>Responsive innerSpace</P>
    </Section>)
```


### Responsive appearance

Where `breakout`, `outline`, `roundedCorner`, `backgroundColor` and `dropShadow` do respond on different screen sizes.


```tsx
render(<Section breakout={{
  small: true,
  medium: false,
  large: false
}} outline={{
  medium: true,
  large: 'black'
}} roundedCorner={{
  large: true
}} backgroundColor={{
  small: 'var(--token-color-background-neutral)',
  medium: 'var(--token-color-background-neutral-subtle)',
  large: 'var(--token-color-background-neutral-subtle)'
}} dropShadow={{
  small: false,
  medium: true,
  large: true
}} innerSpace>
      <P space={0}>Responsive properties</P>
    </Section>)
```


### No breakout


```tsx
render(<Section breakout={false} backgroundColor="var(--token-color-background-neutral-subtle)">
      <P space={0}>No breakout</P>
    </Section>)
```


### Dark surface

Use [Section](/web/components/section/demos/#dark-surface) or [Theme.Context](/web/styling-and-themes/brands-and-dark-mode/theme#surface-property) with `surface="dark"` to provide dark surface context to supporting components.


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} backgroundColor="var(--token-color-decorative-first-bold-static)" surface="dark">
      <P space={0}>
        Dark surface section: <Anchor href="#">anchor</Anchor>
      </P>
    </Section>)
```


### Variant: divider


```tsx
render(<Section innerSpace={{
  top: 'medium',
  bottom: 'medium'
}} variant="divider">
      <P space={0}>
        Visual Section: <Anchor href="#">divider</Anchor>
      </P>
    </Section>)
```


### Variant: info


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} variant="information">
      <P space={0}>
        Generic information section: <Anchor href="#">info</Anchor>
      </P>
    </Section>)
```


### Variant: error


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} variant="error">
      <P space={0}>
        Error section: <Anchor href="#">error</Anchor>
      </P>
    </Section>)
```


### Variant: warning


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} variant="warning">
      <P space={0}>
        Warning section: <Anchor href="#">warning</Anchor>
      </P>
    </Section>)
```


### Variant: success


```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} variant="success">
      <P space={0}>
        Success section: <Anchor href="#">success</Anchor>
      </P>
    </Section>)
```



  
```tsx
render(<Section innerSpace={{
  top: 'large',
  bottom: 'large'
}} backgroundColor="var(--token-color-background-neutral-subtle)">
      token-color-background-neutral-subtle
      <div>
        <Section innerSpace={{
      top: 'large',
      bottom: 'large'
    }} backgroundColor="var(--token-color-background-positive-subtle)">
          token-color-background-positive-subtle
          <div>
            <Section innerSpace={{
          top: 'large',
          bottom: 'large'
        }} textColor="var(--token-color-text-neutral-ondark)" backgroundColor="var(--token-color-background-info)">
              token-color-background-info
              <div>
                <Section innerSpace={{
              top: 'large',
              bottom: 'large'
            }} textColor="var(--token-color-text-neutral-ondark)" backgroundColor="var(--token-color-background-marketing)">
                  token-color-background-marketing
                  <div>
                    <Section innerSpace={{
                  top: 'large',
                  bottom: 'large'
                }} textColor="var(--token-color-text-neutral-ondark)" backgroundColor="var(--token-color-background-error)">
                      token-color-background-error
                      <div>
                        <Section innerSpace={{
                      top: 'large',
                      bottom: 'large'
                    }} backgroundColor="var(--token-color-background-warning-subtle)">
                          token-color-background-warning-subtle
                          <div>
                            <Section innerSpace={{
                          top: 'large',
                          bottom: 'large'
                        }} backgroundColor="var(--token-color-background-neutral-subtle)">
                              token-color-background-neutral-subtle
                              <div>
                                <Section innerSpace={{
                              top: 'large',
                              bottom: 'large'
                            }} backgroundColor="var(--token-color-background-marketing-subtle)">
                                  token-color-background-marketing-subtle
                                  <div>
                                    <Section innerSpace={{
                                  top: 'large',
                                  bottom: 'large'
                                }} variant="divider">
                                      divider
                                    </Section>
                                  </div>
                                </Section>
                              </div>
                            </Section>
                          </div>
                        </Section>
                      </div>
                    </Section>
                  </div>
                </Section>
              </div>
            </Section>
          </div>
        </Section>
      </div>
    </Section>)
```

<!-- 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": {
    "variant": {
      "doc": "Defines the semantic purpose and subsequently the style of the visual helper.",
      "type": [
        "\"error\"",
        "\"information\"",
        "\"warning\"",
        "\"success\"",
        "\"divider\"",
        "\"transparent\"",
        "string"
      ],
      "status": "optional"
    },
    "breakout": {
      "doc": "Use `true` to enable a fullscreen breakout look. Also supports media query breakpoints like `{ small: boolean }`. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "outset": {
      "doc": "Define if the Section should break out negatively on larger screens. You cannot use `breakout` and `outset` together. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "outline": {
      "doc": "Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Also supports media query breakpoints like `{ small: 'black-8' }`.",
      "type": "string",
      "status": "optional"
    },
    "outlineWidth": {
      "doc": "Define a custom border width. Defaults to `var(--card-outline-width)`. Also supports media query breakpoints like `{ small: '2px' }`.",
      "type": [
        "string",
        "number"
      ],
      "status": "optional"
    },
    "roundedCorner": {
      "doc": "Use `true` to enable rounded corners (border-radius). Also supports media query breakpoints like `{ small: boolean }`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "backgroundColor": {
      "doc": "Define a custom background color, instead of a variant. Use a Eufemia color. Also supports media query breakpoints like `{ small: 'white' }`.",
      "type": "string",
      "status": "optional"
    },
    "dropShadow": {
      "doc": "Use `true` to show the default Eufemia DropShadow. Also supports media query breakpoints like `{ small: true }`.",
      "type": "boolean",
      "status": "optional"
    },
    "textColor": {
      "doc": "Define a custom text color to complement the `backgroundColor`. Use a Eufemia color. Also supports media query breakpoints like `{ small: 'black-80' }`.",
      "type": "string",
      "status": "optional"
    },
    "innerSpace": {
      "doc": "Will add a padding around the content. Also supports media query breakpoints like `{small: { top: 'medium' }}`.",
      "type": "string",
      "status": "optional"
    },
    "surface": {
      "doc": "Define the surface color context. When set to `dark`, ondark design tokens will be used for text and outline colors. Use `initial` to reset to the component's default behavior, ignoring any parent surface context. Uses `--token-color-decorative-first-bold-static` as the default background color and `--token-color-text-neutral-ondark` as the text color.",
      "type": [
        "\"dark\"",
        "\"light\"",
        "\"initial\""
      ],
      "status": "optional"
    },
    "element": {
      "doc": "Define what HTML element should be used. Defaults to `<section>`.",
      "type": [
        "string",
        "React.Element"
      ],
      "status": "optional"
    },
    "ref": {
      "doc": "By providing a `React.Ref` we can get the internally used element (DOM), e.g. `ref={myRef}` by using `React.useRef(null)`.",
      "type": "React.RefObject",
      "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)."
}
```


## Variants

| Variant       | Description                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------ |
| `information` | Neutral, informational.                                                                          |
| `error`       | Indicates an erroneous state.                                                                    |
| `warning`     | Draws attention to a potential problem that may or may not require an action on the user's part. |
| `success`     | Indicates a successful state.                                                                    |
| `divider`     | Neutral background with a border line on top and bottom.                                         |
| `transparent` | Transparent background. Used when a Section is needed, but without a background color.           |

To use another color, set `backgroundColor` (and `textColor`) instead of a `variant`.