Skip to content

Import

import { Section } from '@dnb/eufemia'

Description

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

Breakout / fullscreen

Under the hood it uses a couple of tricks to get an infinite fullscreen size. You don't need to do anything more than you else would do with your content. The background from the Section component will go beyond a max-width when enabled with the breakout property.

Usage

Many of the properties to support media queries. This makes this component a well suited component 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:

{
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 are deprecated and will be removed in v11 of Eufemia.

Demos

Default Section

Visual Section: default

Default Section with inner space

Visual Section: default with innerSpace

Responsive inner space (padding)

Where innerSpace do respond on different screen sizes.

Responsive innerSpace

Responsive appearance

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

Responsive properties

No breakout

No breakout

White Section

Will be default in v11.

Visual Section: white

Divider Section

Visual Section: divider

Variant: info

Variant: error

Error section: error

Variant: warning

Warning section: warning

Variant: success

Success section: success