Plastic Design System

Layout

Box

Stack

Inline

Space

Center

Row

Levee

Card

Levee

Use Levee when you want space split between one element with a fixed size (head) and another which should fill the remaining space (tail), such as a sidebar. The anchor prop determines where the head should be positioned:

<Levee
  anchor="left"
  gap="md"
  head={<Box h="5xl" w="10xl" bg="red200" />}
  tail={<Box h="5xl" bg="orange200" />}
/>