Skip to content

Section

Description

The Section component is a visual helper. It wraps content inside a visual section banner. Under the hoot 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

In 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 */
.dnb-section:after {
color: var(--color-ocean-green);
}

Demos

Visual DNB Section: default

Default Section

Visual DNB Section: default with spacing

Default Section with large spacing

Visual DNB Section: white

White Section

Visual DNB Section: divider

Divider Section

Visual DNB Section: mint-green

Mint-Green Section

Visual DNB Section: emerald-green

Emerald-Green Section

Visual DNB Section: signal-orange

Signal-Orange Section

Visual DNB Section: fire-red

Fire-Red Section