@dnb/eufemia

--- title: 'Section' description: 'The Section component is a visual helper.' version: 10.104.0 generatedAt: 2026-04-17T18:46:09.961Z checksum: 7a5ab1cc1e8ed325f1aed76822a14252e60891ce1dd829d858f12dd11639b923 --- # 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' } }}` ### Deprecated color styles These [color styles](/uilib/components/section/deprecated/) are deprecated and will be removed in v11 of Eufemia. ## 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="pistachio" 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: 'white', medium: 'pistachio', large: 'pistachio', }} dropShadow={{ small: false, medium: true, large: true, }} innerSpace > <P space={0}>Responsive properties</P> </Section> ) ``` ### No breakout ```tsx render( <Section breakout={false} backgroundColor="pistachio"> <P space={0}>No breakout</P> </Section> ) ``` ### White Section Will be default in v11. ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="white" > <P space={0}> Visual Section: <Anchor href="#">white</Anchor> </P> </Section> ) ``` ### Divider 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="info" > <P space={0}> Generic info 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="mint-green-12" > mint-green-12 <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="mint-green" > mint-green <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="white" backgroundColor="sea-green" > sea-green <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="mint-green" backgroundColor="emerald-green" > emerald-green <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="white" backgroundColor="fire-red" > fire-red <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="black-80" backgroundColor="sand-yellow" > sand-yellow <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="black-80" backgroundColor="pistachio" > pistachio <div> <Section innerSpace={{ top: 'large', bottom: 'large', }} textColor="black-80" backgroundColor="lavender" > lavender <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. Will take precedence over the style_type property.", "type": "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 Card 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" }, "innerRef": { "doc": "By providing a React Ref we can get the internally used element (DOM). E.g. `inner_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 | | --------- | ------------------------------------------------------------------------------------------------ | | `info` | 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#customize-color). | 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) |