Skip to content
Home

Flex.Stack#

Info
Demos
Properties

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