CSS UI patterns

Row

Row listings

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 {
  display: flex;
  flex-wrap: wrap;
}

.rowList--small {
  margin: -1.2rem 0 0 -1.2rem;
}

.rowList--small > * {
  margin: 1.2rem 0 0 1.2rem;
}

<ul class="rowList rowList--small">
  <li><span class="tag tag--small">Item One</span></li>
  <li><span class="tag tag--small">Item Two</span></li>
  <li><span class="tag tag--small">Item Three</span></li>
</ul>

Row layouts

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 {
  display: flex;
  flex-direction: column; // Defaults to row content to stacking vertically in small viewports.
}

.row--small {
  margin: -1.2rem 0 0 -1.2rem;
}

.row--small > * {
  margin: 1.2rem 0 0 1.2rem;
}

.row--adjacent {
  flex-direction: row;
}

.row--split {
  flex-direction: row;
  justify-content: space-between;
}

// This only acts as an element for margins to be applied to:
.row__item {
}

@media (min-width: $BREAKPOINT_SMALL) {
  .row--adjacent\@small {
    flex-direction: row;
  }

  .row--split\@small {
    flex-direction: row;
    justify-content: space-between;
  }
}

<!-- An outer row for items split to either side: -->
<div class="row row--small row--split@small">
  <div class="row__item">
    <button class="button button--cancel">Cancel</button>
    <div>
      <div class="row__item">
        <!-- An inner row for Publish and Save Draft buttons next to each other: -->
        <div class="row row--small row--adjacent">
          <div class="row__item">
            <button class="button button--secondary">Save Draft</button>
          </div>
          <div class="row__item">
            <button class="button button--primary">Publish</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>