#Section

#Import

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
• Docs code

#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. 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:

{
  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 category. Other components for similar needs:

• Accordion — to let people open and close sections of related content.
• Avatar — to make a person, company, or profile easier to recognize.
• Card — to group related content in a clear, separated area.
• CountryFlag — to show a country by its flag from an ISO country code.
• DateFormat — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.

See all in Content →

#Demos

#Default Section

#Default Section with inner space

#Responsive inner space (padding)

Where innerSpace do respond on different screen sizes.

#Responsive appearance

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

#No breakout

#Dark surface

Use Section or Theme.Context with surface="dark" to provide dark surface context to supporting components.

#Variant: divider

#Variant: info

#Variant: error

#Variant: warning

#Variant: success