Skip to content
Home

Flex.Stack

Info
Demos
Properties

Demos

With input fields

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

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

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

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

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

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