Skip to content
Home

Flex.Stack

Info
Demos
Properties

Import

import { Flex } from '@dnb/eufemia'

Description

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

It stretches its content horizontally (100%).

It uses Flex.Container under the hood.

Accessibility

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

Code Editor
<Flex.Stack 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

Code Editor
<Flex.Stack>
  <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.

Code Editor
<Flex.Stack>
  <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.

Code Editor
<Flex.Stack>
  <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.

Code Editor
<Flex.Stack>
  <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.

Code Editor
<Flex.Stack>
  <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.

Code Editor
<Flex.Stack>
  <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>