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 and by using a custom color. Yes, we use the color property for that.

Define a custom Section color

  • Create a custom CSS style declaration
.dnb-section--custom-section::after {
color: var(--color-ocean-green);
}
  • and use that custom CSS class
<Section style_type="custom-section">...</Section>

Custom Section color in plain HTML

  • Create a custom CSS style declaration
.custom-section::after {
color: var(--color-ocean-green);
}
  • and use that custom CSS class
<div className="dnb-section custom-section">...</div>

Demos

Default Section

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

Emerald-Green Section

Visual DNB Section: emerald-green

Lavender Section

Visual DNB Section: lavender

Sand-Yellow Section

Visual DNB Section: sand-yellow

Pistachio Section

Visual DNB Section: pistachio

Fire-Red Section

Visual DNB Section: fire-red