Four Cs

Canvas

A canvas represents a part of the page that content and controls sit within, they can provide padding and backgrounds for their content area.

Canvases generally sit within a composition element to give them a layout context or they will flow outwards to fill the space.

Canvases can provide padding for their content area, but should not generally dictate any other layout constraints.

Typical examples of canvas components are:

  • Card - a box, often presented with an image, title, text and a call to action
  • Navbar - a floating element at the top of the page, containing the logo and main navigation
  • Hero - the first element in the main content of the page, containing the title and intro

An example of UI with the canvas highlighted

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

previous

Controls

next

Composition