This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
Overview
Flexbox Grid
Currency uses the Flexbox Grid framework for easy distribution of items within a layout. Grids can be nested for alignment on multiple levels. They can also be made responsive by allowing multiple sizes on one element.
12
4
8
6
6
Responsive Grid
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. These classes are stackable to create dynamic responsive behavior. If the smallest viewport chosen isn't reached (ex: no viewport smaller than md is present but the screen is smaller than the md viewport), the content will fill the full 12 columns.
8
6
3
Offsets
Offset a column to the right side of the container using a class modifier. These classes are stackable to create dynamic responsive behavior.
col
col
col
col
col
Auto Width
The auto-width grid lets you add any number of auto sizing columns to a row and the grid will figure it out.
col
col
col
col
col
col
col
Nesting
Nest grids inside grids inside grids. Simply add a new row inside of a grid and repeat as many times as needed.
.l-flex-start--*
.l-flex-center--*
.l-flex-end--*
.l-flex-top--*
.l-flex-middle--*
.l-flex-bottom--*
Alignment
Add classes to elements to align children to the start or end of a row, as well as the top, bottom, or center of a column.
.l-flex-around-*
.l-flex-around-*
.l-flex-between-*
.l-flex-between-*
Distribution
These classes will distribute space as directed around items within the grid. Use .around to move space evenly around an element within a grid and .between to move space between elements within a grid.
Row 1
Row 2
Row Breaks
Insert a row break to separate content in two rows that, combined, do not reach the full width of the grid.
1
2
.l-flex-first--*
2
3
.l-flex-last--*
.l-flex-column--reverse
1
2
3
Reordering
Use Flexbox classes to reorder or reverse elements in a grid without altering their structure in the code.