Page structure
Describing how a component page in Design Library generally is structured.
Article meta
Tags
- Global
Design principles
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).
Usage
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
Styles
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)