Components

## Other Utility Classes

Here is some other utility classes that use to quickly style an element.

#### Gaps Classes

The `.gap` utility classes allow to set specific gap between to section or block.

Class Reference | Value |
--- | --- | ---
`.gap` | `28px` as `gutter` size |
`.gap-sm` | `0.75rem` as `12px` |
`.gap-md` | `1.25rem` as `20px` |
`.gap-lg` | `2rem` as `32px` |
`.gap-xl` | `2.5rem` as `40px` |
`.gap-{num}px` | `[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]` use as `{num}` value | Fixed in pixel
`.gap-{size}` | `[0, 1, 2, 3, 4, 5]` as `{size}` value | `{size}` is related to Size reference.

Uses Example

    <div class="gap"></div>
    <div class="gap gap-sm"></div>
    <div class="gap gap-20px"></div>