The horizontal counterpart to the listing pattern, row listings allow us to list an arbitrary number of items horizontally without forcing a width for each item as tiles would. A frequent use case for this type of list is tags on an article or blog post, whether the individual content objects within the list items are presented as plain text, links, buttons, or icons.
Common considerations for row listings include modifying the space or separator used between items and ensuring the items are spaced out vertically as well as horizontally when the items can’t all fit on a single line.
.rowList.rowList--small.rowList--small > *
Item OneItem TwoItem Three
Row layouts provide simple mechanisms to control the spacing and alignment of items displayed on a single row. An example of this is the typical lockup of a set of primary actions on the one side of a row and a cancel action on the opposite. Most of what can be done with row layouts can be done with grids, but this layout object can express simple layouts more concisely than a full grid could.
The following example implementation uses two constructs — rows of adjacent items and rows with items split to opposite ends — to compose a moderately complex arrangement of buttons.
.row.row--small.row--small > *.row--adjacent.row--split.row__item// This only acts as an element for margins to be applied to.
<!-- An outer row for items split to either side: -->Cancel<!-- An inner row for Publish and Save Draft buttons next to each other: -->Save DraftPublish