@dnb/eufemia

--- title: 'Section' description: 'The Section component is a visual helper.' version: 11.0.0 generatedAt: 2026-04-21T13:57:51.641Z checksum: ff487e363e83827b18c01d3bb4b0b0e01cbbeb8b07bdecff46f7994b6a20aeeb --- # 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/uilib/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](/uilib/layout/media-queries/). 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' } }}` ## 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> ) ``` ### Variant: section ```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> ) ``` ## Properties ```json { "props": { "variant": { "doc": "Defines the semantic purpose and subsequently the style of the visual helper.", "type": [ "\"error\"", "\"information\"", "\"warning\"", "\"success\"", "\"divider\"", "string" ], "status": "optional" }, "breakout": { "doc": "Use `true` to enable a fullscreen breakout look. Supports also 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. Supports also media query breakpoints like `{ small: 'black-8' }`.", "type": "string", "status": "optional" }, "outlineWidth": { "doc": "Define a custom border width. Defaults to `var(--card-outline-width)`. Supports also media query breakpoints like `{ small: '2px' }`.", "type": ["string", "number"], "status": "optional" }, "roundedCorner": { "doc": "Use `true` to enable rounded corners (border-radius). Supports also 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. Supports also media query breakpoints like `{ small: 'white' }`.", "type": "string", "status": "optional" }, "dropShadow": { "doc": "Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.", "type": "boolean", "status": "optional" }, "textColor": { "doc": "Define a custom text color to compliment the `backgroundColor`. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.", "type": "string", "status": "optional" }, "innerSpace": { "doc": "Will add a padding around the content. Supports also 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.createRef()` or `React.useRef()`.", "type": "React.RefObject", "status": "optional" }, "[Space](/uilib/layout/space/properties)": { "doc": "Spacing properties like `top` or `bottom` are supported.", "type": ["string", "object"], "status": "optional" } } } ``` ## 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. | ## Styles You can easily [customize the color](/uilib/components/section). | Style | Description | | ------------------- | --------------------------------------------------------------------------------------------------- | | `white` | uses `--color-white`. | | `divider` | uses `--color-white` as background with a border-line on top and bottom. | | `transparent` | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. | | ~~`mint-green-12`~~ | _(default)_ uses `--color-mint-green-12`. | | ~~`mint-green`~~ | uses `--color-mint-green`. | | ~~`lavender`~~ | uses `--color-lavender`. | | ~~`sand-yellow`~~ | uses `--color-sand-yellow`. | | ~~`pistachio`~~ | uses `--color-pistachio`. | | ~~`black-3`~~ | uses `--color-black-3`. | | ~~`emerald-green`~~ | uses `--color-emerald-green`. | | ~~`fire-red`~~ | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status) |