Skip to content
Home

Flex.Stack#

Info
Demos
Properties

Import#

import { Flex } from '@dnb/eufemia'
render(<Flex.Stack layoutEngine="css" />)

Description#

Flex.Stack is an outer block element that wraps content to ensure proper layout and spacing between form elements, larger regions and headings.

Relevant links#

It stretches its content horizontally (100%).

It uses Flex.Container under the hood.

Relevant links#

Accessibility#

It uses a section element. Which allows you to add an aria-label or aria-labelledby to provide screen readers with landmarks.

<Flex.Stack layoutEngine="css" aria-labelledby="unique-id">
  <Form.SubHeading id="unique-id">Heading</Form.SubHeading>
  <Card>
    <P>Content inside a landmark ...</P>
  </Card>
</Flex.Stack>

Demos#

With input fields#

<Flex.Stack layoutEngine="css">
  <Field.String label="Label" value="Foo" />
  <Field.String label="Label" value="Foo" />
  <Form.SubmitButton />
</Flex.Stack>

With paragraphs#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum.

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

<Flex.Stack layoutEngine="css">
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum.
  </P>
  <P>
    Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae
    metus.
  </P>
</Flex.Stack>

With main heading#

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

<Flex.Stack layoutEngine="css">
  <Form.MainHeading>Heading</Form.MainHeading>
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
  <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
</Flex.Stack>

With Card#

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

<Flex.Stack layoutEngine="css">
  <Card gap="medium">
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
    <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
  </Card>
  <Card gap="medium">
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
    <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
  </Card>
</Flex.Stack>

With Card and heading#

Main heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

<Flex.Stack layoutEngine="css">
  <Form.MainHeading>Main heading</Form.MainHeading>
  <Card gap="medium">
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
    <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
  </Card>
</Flex.Stack>

With Card and headings#

Main heading

Sub heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

<Flex.Stack layoutEngine="css">
  <Form.MainHeading>Main heading</Form.MainHeading>
  <Form.SubHeading>Sub heading</Form.SubHeading>
  <Card gap="medium">
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
    <P>Aliquam at felis rutrum, luctus dui at, bibendum ipsum.</P>
  </Card>
</Flex.Stack>
Suggest an edit