Page structure

Describing how a component page in Design Library generally is structured.

A component page contains both description and code. Each component has tags at the top of the page which tells you what area it is used in. If you click on a tag, you can filter out all the other components that belong to the same tag. It also has a component identifier, which we use to gather the variations to the same component (see the Code tab).

In the Usage tab the component is described. Generally it has the following sections:

  • Guidelines:  It says what it is, when to use it and how should it work
  • Do's and don'ts: Here you find recommendations and rules of use

In the Styles tab, we gather the details of how the component is presented. This can be of interest both to the developer that builds it and to the designer who applies it. So, here you can expect information such as

  • The specification (exact pixel sizes)
  • Use of colour and other css-related info
  • What the states look like (hover, focus, inactive, etc)