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 direction="horizontal">
    <Layout.FlexItem>content</Layout.FlexItem>
    <Layout.FlexItem>content</Layout.FlexItem>
  </Layout.FlexContainer>,
)

Layout helpers

Flex layout

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

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

Wrappers

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

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

Headings

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

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

Demos

Responsive FlexItem

With the default 12 columns.

FlexItem (8)
FlexItem (4)
FlexItem (small: 8, medium: 4)
FlexItem (small: 4, medium: 8)
Code Editor
<Layout.FlexContainer direction="horizontal" wrap>
  <Layout.FlexItem size={8}>
    <TestElement style={colors[0]}>FlexItem (8)</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem size={4}>
    <TestElement style={colors[1]}>FlexItem (4)</TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem
    size={{
      small: 12,
      medium: 4,
    }}
  >
    <TestElement style={colors[2]}>
      FlexItem (small: 8, medium: 4)
    </TestElement>
  </Layout.FlexItem>
  <Layout.FlexItem
    size={{
      small: 12,
      medium: 8,
    }}
  >
    <TestElement style={colors[3]}>
      FlexItem (small: 4, medium: 8)
    </TestElement>
  </Layout.FlexItem>
</Layout.FlexContainer>

Customized FlexItem sizes

With a custom amount of 4 columns as well as custom breakpoints and media queries.

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
const breakpoints = {
  ...defaultBreakpoints,
  xsmall: '30em',
}
const queries = {
  ...defaultQueries,
  xsmall: {
    min: 0,
    max: 'xsmall',
  },
  small: {
    min: 'xsmall',
    max: 'small',
  },
}
const CustomMediaQuery = styled.div`
  .dnb-layout__flex-container[data-media-key='xsmall']
    .dnb-layout__flex-item--responsive {
    --size: var(--xsmall);
  }
`
render(
  <CustomMediaQuery>
    <Layout.FlexContainer
      direction="horizontal"
      wrap
      columns={4}
      breakpoints={breakpoints}
      queries={queries}
    >
      <Layout.FlexItem
        size={{
          small: 2,
          medium: 3,
          large: 1,
        }}
      >
        <TestElement style={colors[0]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          small: 2,
          medium: 1,
          large: 2,
        }}
      >
        <TestElement style={colors[1]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          xsmall: 4,
          small: 2,
          medium: 1,
          large: 1,
        }}
      >
        <TestElement style={colors[2]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          xsmall: 4,
          small: 2,
          medium: 3,
          large: 4,
        }}
      >
        <TestElement style={colors[3]}>FlexItem</TestElement>
      </Layout.FlexItem>
    </Layout.FlexContainer>
  </CustomMediaQuery>,
)