@dnb/eufemia/docs/uilib/intro/14-helpers.md

DNB Eufemia Design System UI Library

---
version: 11.0.0
generatedAt: 2026-04-21T13:57:53.919Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

<Intro>

# 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](/uilib/components/section).

## React:

```jsx
import { Section } from '@dnb/eufemia'

render(
  <Section backgroundColor="mint-green" spacing>
    Visual DNB Section
  </Section>
)
```

## CSS:

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

## Demo:

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

## More helpers

You may have a look on all the CSS and JavaScript [helpers](/uilib/helpers) which comes included in the package.

---

<IntroFooter href="/uilib/intro/15-summary" text="Summary" />

</Intro>