Section Component#

A commonly used visual style is the DNB section divider. To make it easy to achieve this in your layout setup, have a look at the Section component.

React:#

import { Section } from '@dnb/eufemia'

render(
  <Section variant="information" spacing>
    Visual DNB Section
  </Section>
)

CSS:#

<div
  className="dnb-section dnb-section--info"
  style="padding: var(--spacing-large) 0"
>
  Visual DNB Section
</div>

Demo:#

More helpers#

You may have a look at all the CSS and JavaScript helpers which come included in the package.