#Flex Stack

#Import

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

#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.

#Relevant links

• Source code
• Docs code

#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 aria-labelledby="unique-id">
  <Form.SubHeading id="unique-id">Heading</Form.SubHeading>
  <Card>
    <P>Content inside a landmark ...</P>
  </Card>
</Flex.Stack>