Import#
import { Section } from '@dnb/eufemia'
Description#
The Section component is a visual helper. It wraps content inside a visual section banner.
Relevant links#
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.
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.