Skip to content
Home

Layout#

Info
Demos

Demos#

Horizontal aligned Cards#

Grid wraps the Cards nicely on smaller screens. More examples in the Card section.

Heading

Text

Heading

Pariatur officia sit adipisicing pariatur commodo enim do quis

Heading

Text

<Grid.Container
  columns={{
    small: 1,
    medium: 3,
    large: 3,
  }}
  columnGap="small"
>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Grid.Container>

Accordion in two columns#

This is a demo of how to outline accordions in two columns, including the correct tab order.

Accordion in columns

const items = [
  <Accordion key="one" variant="filled">
    <Accordion.Header>
      Sit amet suscipit ipsum tincidunt id?
    </Accordion.Header>
    <Accordion.Content space>
      <P>
        Sociis sapien sociosqu vel sollicitudin accumsan laoreet gravida
        himenaeos nostra mollis volutpat bibendum convallis cum condimentum
        dictumst blandit rutrum vehicula
      </P>
    </Accordion.Content>
  </Accordion>,
  <Accordion key="two" variant="filled">
    <Accordion.Header>
      Cras eget quam eget tortor placerat viverra?
    </Accordion.Header>
    <Accordion.Content space>
      <P>
        Morbi condimentum odio ut enim vulputate, rutrum ullamcorper sem
        vestibulum. Ut luctus tempus leo vel finibus. Pellentesque ultrices
        interdum nisi, sit amet suscipit ipsum tincidunt id. Praesent
        sodales vel eros ut accumsan.
      </P>
    </Accordion.Content>
  </Accordion>,
  <Accordion key="three" variant="filled">
    <Accordion.Header>Nam porta nec ipsum id porta</Accordion.Header>
    <Accordion.Content space>
      <P>
        Nam porta nec ipsum id porta. Cras eget quam eget tortor placerat
        viverra.
      </P>
    </Accordion.Content>
  </Accordion>,
]
render(
  <>
    <Heading size="large">Accordion in columns</Heading>
    <Grid.Container columns={2} columnGap="small" rowGap="x-small">
      <Grid.Item
        span={{
          small: [1, 2],
          medium: [1, 1],
          large: [1, 1],
        }}
      >
        <Flex.Stack gap="x-small">{items}</Flex.Stack>
      </Grid.Item>
      <Grid.Item
        span={{
          small: [1, 2],
          medium: [2, 2],
          large: [2, 2],
        }}
      >
        <Flex.Stack gap="x-small">{[...items].reverse()}</Flex.Stack>
      </Grid.Item>
    </Grid.Container>
  </>
)

Responsive application Grid usage#

Item A
Item B
Item C
Item D

Responsive Flex usage#

With the default sizeCount of 12 parts.

FlexItem (8)
FlexItem (4)
FlexItem (small: 8, medium: 4)
FlexItem (small: 4, medium: 8)

Customized Flex.Item spans#

With a custom amount of 4 parts (sizeCount) as well as custom breakpoints and media queries.

FlexItem
FlexItem
FlexItem
FlexItem

Flex usage in Forms#

Profile

Name

More information

Suggest an edit