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 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
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.
Stack makes it easy to provide consistent vertical spacing between components.
Cluster is similar to
Stack, except it lays out its children horizontally and wraps them if they would overflow the container.
alignY props allow you control horizontal and vertical alignment, respectively.
Column components allow you to lay out content on a traditional 12-column grid.
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 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.
PageContainer provides vertical spacing around page content to ensure consistent alignment of content between pages.
CenteredContainer centers page content on the page and ensures that appropriate horizontal spacing is used at different viewport sizes.
PageContainer are most often used together to ensure correct layout of page content.