---
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.937Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Section Component

<Intro>

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

## React:

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

render(
  <Section variant="information" 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 at all the CSS and JavaScript [helpers](/web/ai-tools-and-resources/utilities) which come included in the package.

---

<IntroFooter
  href="/web/get-started/guided-introduction/15-summary"
  text="Summary"
/>

</Intro>