Four Cs

Composition

Compositions are an invisible element of the page that provides layout.

Compositions are solely concerned with creating structure and spacing.

Typical examples of a composition component are:

  • Grid - creates a layout with grid cells arranged in columns and rows
  • Spacing - creates spacing between components or areas of the page
  • Container - sets a max width for a page, block of content or components

An example of UI with the composition elements highlighted

See the Pen Composition by gavmck (@gavmck) on CodePen.

previous

Canvas

next

Apply Diamond UI