Layout components
We have a few layout components that you can use to build your page.
These are all inspired by every-layout.dev.
Cluster
A layout component which allows children of differing lengths to wrap nicely.
Takes one prop:
space: The space (margin) between the child elements
Example component
Example component
Example component
Switcher
A layout component which will switch it’s children from a horizontal layout to a vertical one when the content no longer fits the page width.
Takes two props:
threshold: The container width at which the component switches between a horizontal and vertical layoutspace: The space (margin) between the child elements
Example component
Example component
Example component
Stack
A layout component which will stack its children, taking care of margins and spaces between them.
Takes one prop:
space: The space (margin) between the child elements
Example component
Example component
Example component
Wrap
A layout component which will simply add a space and flex grow to its’ children, so they will wrap nicely. Add nested components for a more “grouped” wrapping behaviour.
Takes one prop:
space: The space (margin) between the child elements
Example component
Example component
Example component
Example component
Example component
Example component