Skip to content

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);
}
  1. 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);
}
  1. and use that custom CSS class
<div className="dnb-section custom-section">...</div>

Demos

Default Section without spacing

Visual DNB Section: default

Default Section with large spacing

Visual DNB Section: default with spacing

White Section

Visual DNB Section: white

Divider Section

Visual DNB Section: divider

Mint-Green Section

Visual DNB Section: mint-green

Sea-Green Section

Visual DNB Section: sea-green

Emerald-Green Section

Visual DNB Section: emerald-green

Lavender Section

Visual DNB Section: lavender

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

Grey Section

Visual DNB Section: black-3

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

Sand-Yellow Section

Visual DNB Section: sand-yellow

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

Pistachio Section

Visual DNB Section: pistachio

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

Fire-Red Section

Visual DNB Section: fire-red

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

Fire-Red-8 Section

Visual DNB Section: fire-red-8

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