import imgComponentStructure from './images/component-structure.jpg'

<Meta title='1.Docs|03-Component Structure'/>

# Component Structure
We use the SMACSS Approach and categorize the properties into **Box, Border, Background, Font and Other.** For example we use a standard button, which you can find in `_components.button.scss`.

<img src={imgComponentStructure} />

````scss
.c-button {
  // Box
  padding: 20px;

  // Border
  border: 1px solid $color-blue;

  // Background
  background-color: $color-blue;

  // Font
  color: $color-white;
  font-size: 2rem;
  line-height: 1;

  // Other
  transition: background .3s;
}
```` 