Layout is a set of organizational components that follow the patterns of Flexbox.

Layout.Group

Used to align elements in a row.

space

alignLayout

alignItems

grow

<Layout.Group>
  <Box color="#D0F1F5" padding={20}>
    <Text>Group 1</Text>
  </Box>
  <Box color="#D0F1F5" padding={15}>
     <Text>Group 2</Text>
  </Box>
  <Box color="#D0F1F5" padding={10}>
     <Text>Group 3</Text>
  </Box>
</Layout.Group>

Layout.Stack

Used to align elements in a column.

space

alignLayout

alignItems

grow

<Layout.Stack>
    <Box color="#D0F1F5" padding={20} >
      <Text>Stack 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15} >
       <Text>Stack 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
       <Text>Stack 3</Text>
    </Box>
</Layout.Stack>

Layout.Group and Layout.Stack Props

Space

Use the space property to set the spacing for a Group or Stack. The default is set to 8.

AlignLayout

Use the alignLayout property to indicate the horizontal alignment of the items in a Group or Stack. For a Group, the possible options are left, center, and right. For a Stack, the possible options are left, center, and right. The default is set to left in both cases.

AlignItems

Use the alignItems property to indicate the alignment of the items in a Group or Stack. For a Group the vertical alignment is adjusted, whereas for a Stack the horizontal alignment is adjusted. For a Group, the possible options are top, center, and bottom. For a Stack, the possible options are left, center, and right. The default is set to center in both cases.

Grow

Use the grow property to indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to false.

Shrink

Use the shrink property to indicate whether the grouped components should be shrunk to fill the space horizontally in a Group, to prevent an overflow. The default is set to false.

Layout.Insert

Used to place elements before and after a central component. Padding is $semantic.spacing.sm and direction is rowby default.

Layout.Space

Adds a space of height space. Default is 16px.

Layout.Group Props

Prop Name	Type	Default	Description
alignItems	top | center | bottom	center	Adjust the vertical alignment of items in the group
alignLayout	left | center | right	left	Set the position of the group
children	ReactNode	-	The element the group wraps
grow	boolean	false	Flag to stretch grouped components to fit evenly or not
shrink	boolean	false	Flag to indicate whether the grouped components should be shrunk to ill the space horizontally in a Group, to prevent an overflow
space	number	$layout-group.space	Distance between elements in the Group component
width	number | string	-	Set the width of the group
wrap	boolean	false	Flag indicating if the elements should wrap to a new line
wrap	boolean	-	Flag indicating if the elements should wrap to a new line

Layout.Stack Props

Prop Name	Type	Default	Description
alignItems	left | center | right	center	Adjust the horizontal alignment of items in the stack
alignLayout	left | center | right	left	Set the position of the stack
children	ReactNode	-	The element the stack wraps
grow	boolean	false	Flag to stretch grouped components to fit evenly or not
space	number	8	Distance between elements in the Group component
width	number | string	-	Set the width of the stack

Layout.Insert Props

Prop Name	Type	Default	Description
after	node	-	Element displayed after children
before	node	-	Element displayed before children
children	ReactNode	-	The elements in the center
direction	row | column	row	Position of before and after nodes
grow	boolean	false	Flag to stretch grouped components to fit evenly or not
padding	number	$semantic.spacing.sm	Padding between elements

Layout.Space Props

Prop Name	Type	Default	Description
space	number | string	16	The height of the space

Layout.Group Classes

Class Name	Description
abyss-layout-group	Group root element

Layout.Stack Classes

Class Name	Description
abyss-layout-stack	Stack root element

Layout.Insert Classes

Class Name	Description
abyss-layout-insert-after	Insert after element
abyss-layout-insert-before	Insert before element
abyss-layout-insert-root	Insert root element

Layout.Space Classes

Class Name	Description
abyss-layout-space-root	Space root element