Skip to content
Home

Layout

Info
Demos

Description

To make it easier to build application layout and form-views in line with defined design sketches, there are a number of components for layout.

import { Layout } from '@dnb/eufemia'
render(
  <Layout.FlexContainer>
    <Layout.FlexItem>content</Layout.FlexItem>
    <Layout.FlexItem>content</Layout.FlexItem>
  </Layout.FlexContainer>,
)

Layout helpers

Flex layout

  • FlexContainer is a building block for CSS flexbox based layout of contents and components.

    • <Layout.Vertical> can be used as an alias instead of the property direction="vertical".
    • <Layout.Horizontal> can be used as an alias instead of the property direction="horizontal".

  • FlexItem is a building block for CSS flexbox based layout of contents and components.

Wrappers

  • Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.

  • Stack is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.

Headings

  • MainHeading is a standardized main heading for sections, ensuring default layout, spacing etc.

  • SubHeading is a standardized sub heading for sections, ensuring default layout, spacing etc.