#Layout

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

import { Layout } from '@dnb/eufemia/extensions/forms'
render(<Layout.Card />)

#ButtonRow

Layout.ButtonRow is a wrapper for horizontally separated buttons.

#Card

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

#Column

Layout.Column is a simplified wrapper for FlexContainer with direction column.

#FlexContainer

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

#FlexItem

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

#MainHeading

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

#Row

Layout.Row is a simplified wrapper for FlexContainer with direction row.

#Section

Layout.Section is an outer block element for wrapping content to get the correnct layout and spacing between sections and section headings.

#SubHeading

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