---
title: Components
type: page
---
Components
==========
The beginnings of a recognizable user interface live in the Components directory. These are abstract, reasonably portable modules that can be swapped in and out of different projects with relative ease.
Some Components, like `g` (grid) and `card`, are used for layout and containers, and can encompass many other modules.
```html
```
**Note**: We shorten `grid` classes to `g` and `grid-box` classes to `g-b`. Since we write these grid classes so frequently, we want them to be as concise as possible. However, feel free to use the full words, if that's more comfortable for you.
Other Components, like `thumb`, affect only a single element, and can resemble Tools at first glance. In these situations, both the Component and Tool have a single responsibility. The *Component*, however, may be declared alongside its modifier classes, while the Tool applies more definitive styles.
```html
```
Characteristics
---------------
When determing whether a module is a Component or Structure, we find it helpful to ask ourselves the following questions:
- Does this module limit its scope as much as possible?
- Is this module independent of pre-existing Components?
- Is this module abstract enough to use in other projects without making significant changes?
If you answer "no" to any of these questions, the module in question is more than likely a Structure.
