Skip to content
Home

Flex.Stack

Info
Demos
Properties

Description

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

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

Text only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.

Code Editor
<Flex.Stack>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
  </P>
</Flex.Stack>

With paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo lobortis lorem, maximus posuere mi justo et ipsum.

Code Editor
<Flex.Stack>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
  </P>
  <P>
    Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae
    metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue
    dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo
    lobortis lorem, maximus posuere mi justo et ipsum.
  </P>
</Flex.Stack>

With main heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.

Code Editor
<Flex.Stack>
  <Form.MainHeading>Heading</Form.MainHeading>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
  </P>
</Flex.Stack>

With Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

Code Editor
<Flex.Stack>
  <Card>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. 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. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.

Code Editor
<Flex.Stack>
  <Form.MainHeading>Main heading</Form.MainHeading>
  <Card>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. 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. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. 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>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.
    </P>
  </Card>
</Flex.Stack>