Four Cs

Content

Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information.

Content components are focused around text and images and the base level, but can extend into more specialised areas such as a person or a product. Content components are where the UI library can become more specialised towards the industry or product that the library is serving.

Typical examples of content components are:

  • Heading - title elements, represented in HTML as h1-5
  • Text - a piece of typographic content
  • Icon - a glyph representing something in the app ecosystem
  • Person, ProductSummary, PaymentDetails - product/industry-specific content

An example of UI with content highlighted

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

previous

The solution

next

Controls