#Section

#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

#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

#White Section

Will be default in v11.

#Divider Section

#Variant: info

#Variant: error

#Variant: warning

#Variant: success