#Section

#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' } }}