Skip to content

Layout components

Currency provides a variety of layout primitives that can be infinitely nested and composed to create complex, responsive components and page layouts (see layout templates for more details). This page provides an overview of their components; visit the individual component pages for more detailed examples and documentation.

Box

Box is the foundational primitive of Currency. It provides a simple props-based interface to Currency colors, backgrounds, spacing, and a commonly-used subset of CSS. Think of it like an opinionated <div>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Box supports "responsive props", which allow you to use different values at different screen sizes. Resize your browser window to see it in action here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Stack

Stack makes it easy to provide consistent vertical spacing between components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Integer quis auctor elit sed vulputate.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Integer quis auctor elit sed vulputate.

Cluster

Cluster is similar to Stack, except it lays out its children horizontally and wraps them if they would overflow the container.

The align and alignY props allow you control horizontal and vertical alignment, respectively.

Columns

The Columns and Column components allow you to lay out content on a traditional 12-column grid.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Integer quis auctor elit sed vulputate.

Sidebar

Tiles

Tiles renders a homogenous collection of content in a grid.

It can optionally collapse its content to a vertical stack or a horizontally-scrolling list on narrow viewports.

Sections

The Sections component is an opinionated form of Stack that provides fixed spacing between sections on a page. The related Section component provides styling and spacing for section titles and their content.

First section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Integer quis auctor elit sed vulputate.

Second section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Integer quis auctor elit sed vulputate.

PageContainer

PageContainer provides vertical spacing around page content to ensure consistent alignment of content between pages.

Page content

CenteredContainer

CenteredContainer centers page content on the page and ensures that appropriate horizontal spacing is used at different viewport sizes.

Page content

CenteredContainer and PageContainer are most often used together to ensure correct layout of page content.

Page content