How to Use

Components

Components are the Design System’s backbone. They are one of the key building blocks. Their systematic reuse helps to create visual and functional consistency across products.

Each component has been designed and coded to solve a specific UI problem, such as presenting a list of options, enabling submission of a form, providing feedback to the user, and so on. All of the components in GDL have been designed to work harmoniously together, as parts of a greater whole.

When create a component

Create a component whenever you need to reuse an element in a modular way in your interface.

Pages

Pages represent specific website layouts. Their purpose is for testing a layout in a real context. They are organized in groups:

  • Homepage, Homepage layout variants
  • Channel, global or specific channel layouts
  • Item, global item layouts (Article, Event, AMP, etc)
  • User, user-related layouts (Sign-in, Sign-out, New account)

Check the groups categories before creating a new page. It always should be part of one of them.

Templates

Templates consist mostly of groups of components stitched together to form pages. They are commonly related to news templates like lists.

When create a Template

Create a new template every time you need to reuse a specific group of elements in multiple layouts.