#Section

#Description

The Section component is a visual helper. It wraps content inside a visual section banner. Under the hood it uses a couple of tricks to get an infinite wide look background. You don't need to do anything more than you else would do regarding your content and the max-width. The background from the Section component will go beyond a max-width.

#Usage

The following example shows form sections with different styling. The helper prop spacing adds spacing to the section if needed.

#Customize color

Example of how to change the background color and by using a custom color. Yes, we use the color property for that.

#Define a custom Section color

1. Create a custom CSS style declaration

.dnb-section--custom-section::after {
  color: var(--color-ocean-green);
}

2. and use that custom CSS class

<Section style_type="custom-section">...</Section>

#Custom Section color in plain HTML

1. Create a custom CSS style declaration

.custom-section::after {
  color: var(--color-ocean-green);
}

2. and use that custom CSS class

<div className="dnb-section custom-section">...</div>

#Demos

#Default Section without spacing

#Default Section with large spacing

#White Section

#Divider Section

#Mint-Green Section

#Sea-Green Section

#Emerald-Green Section

#Lavender Section

<Section spacing="small" style_type="lavender">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">lavender</Anchor>
  </P>
</Section>

#Grey Section

<Section spacing style_type="black-3">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">black-3</Anchor>
  </P>
</Section>

#Sand-Yellow Section

<Section spacing style_type="sand-yellow">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">sand-yellow</Anchor>
  </P>
</Section>

#Pistachio Section

<Section spacing style_type="pistachio">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">pistachio</Anchor>
  </P>
</Section>

#Fire-Red Section

<Section spacing style_type="fire-red">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">fire-red</Anchor>
  </P>
</Section>

#Fire-Red-8 Section

<Section spacing style_type="fire-red-8">
  <P space={0}>
    Visual DNB Section: <Anchor href="#">fire-red-8</Anchor>
  </P>
</Section>