Layouts

List of patterns

Breadcrumb

A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.

• Card

  A card component, which displays in a grid of cards

• Center an element

  Center an item horizontally and vertically

• Column layouts

  Multi-column layout, flexbox, grid

• Grid wrapper

  Align grid content within a central wrapper, while also allowing items to break out

• List group with badges

  A list of items with a badge to display a count.

• Media objects

  A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.

• Pagination

  Links to pages of content (such as search results).

• Split navigation

  A navigation pattern where some links are visually separated from the others.

• Sticky footers

  Creating a footer which sits at the bottom of the container or viewport when the content is shorter.

Reference

• MDN: CSS Layout Cookbook