Layout

Layouts used for positioning content inside of pages, cards, or containers.

Colors


Transparent


Sizes


Collection Layout


Layout can leverage the max-width property. Learn more in our visual guidelines.

Collection Detail Layout


The left element on Collection Detail can be used for things such as navigation or secondary content to the element on the right. The right content can be used the same way that you would use Collection. The element on the right should be the primary focus and can be used for repeating elements such as cards.

Kanban Layout


Content Layout


Masonry Layout


Bracket Layout


Use <Layout.RoundLabel>, <Layout.Round>, <Layout.Game>, and/or <Layout.Participant> to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.

On mobile devices, <Layout.RoundLabel> will display (on desktop these components are hidden) and the bracket will be in one column.

Ensure that each <Layout.Game> maintains a consistent height for the bracket lines to lay out properly.


Available Props