# Overview

A CSS framework for building custom user interfaces. No JS required.

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FKawanuaDev%2Fgorangocss.svg?type=small)](https://app.fossa.com/projects/git%2Bgithub.com%2FKawanuaDev%2Fgorangocss?ref=badge_small)

## How to use

### Via npm

```bash
npm install gorangocss
```

### Via CDN

```markup
<link rel="stylesheet" href="https://unpkg.com/gorangocss@latest/dist/gorango.min.css" crossorigin="anonymous">
```


# Changelog

Full changelog\
<https://github.com/KawanuaDev/gorangocss/releases>

## 1.10.x

### New

Added new `.dropdown`, `.navbar` classes.

```css
.dropdown
```

```css
.navbar
```

### Updates

* `.button` box-shadow value for `:active` and `:hover` state.
* Better `.navbar` responsive menu.
* New `.navbar--fixed` option.
* Lighter `.notice` `background-color` value.
* Removing heading value conflict in normalize.

## 1.9.0

### New

```css
.hero
```

```css
.button--{xs | sm | md | lg}
```

```css
.notice--{info | success | warning | danger}
```

### Updates

```css
.bg--{dark | light}--gradient
```

```css
.bg--{info | success | warning | danger}--gradient
```

## 1.8.0

### New

```css
.columns
.column
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
```

```css
.flex
.flex--{wrap | nowrap | reverse}
```

```css
.card
```

```css
.font--{xs | sm | md | lg | xl | xxl}
```

## 1.7.0

### New

```css
.highlight--{info | success | warning | danger}
```

```css
.float--{left | right | none}
```

```css
.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}
```

```css
.txt--{left | center | right}
```

```css
.txt--{upper | lower | capital}
```

```css
.shadow--{xs | sm | md | lg | xl | inner | 0 }
```


# Contributing


# Contributing to GorangoCSS

We are all humans trying to work together to improve the community. Always be kind and appreciate the need for tradeoffs.

&#x20;We expect contributors to abide by our underlying [Code of Conduct](https://gorangocss.kawanua.id/codeofconduct). All discussions about this project must be respectful and harassment-free.

Remember that communication is the lifeblood of any Open Source project. We are all working on this together, and we are all benefiting from this software.

It's very easy to misunderstand one another in asynchronous, text-based conversations. When in doubt, assume everyone has the best intentions.

If you feel anyone has violated our Code of Conduct, you should anonymously contact the team with our [abuse report form](https://kontak.kawanua.id/en/).

## Guidelines

### How to contribute

1. [Fork the project](https://github.com/KawanuaDev/gorangocss) and clone it to your local machine.
2. Create a branch with your GitHub username and the ID of the issue, for example: `git checkout -b USERNAME/some-new-feature-1234`
3. Code and commit your changes. Bonus points if you write a good commit message: `git commit -m 'Add some feature 1234'`
4. Push to the branch: `git push -u origin USERNAME/some-new-feature-1234`
5. [Create a pull request](https://docs.gorangocss.kawanua.id/contributing/contributing-to-gorangocss#create-a-pull-request) for your branch.

### Create an issue

Nobody's perfect. Something doesn't work? Something could be better? Check to see if the issue already exists, and if it does, leave a comment to get our attention! If the issue doesn't already exist, feel free to create a new one. A core team member will triage incoming issues.

*Please note: core team members may update the title of an issue to reflect the discussion.*

### Please use inclusive language

Inclusion and respect are core tenets of our [Code of Conduct](https://gorangocss.kawanua.id/codeofconduct). We expect thoughtful language all the way down to the code. Some technical metaphors are alienating or triggering. We ask that contributors go the extra mile to submit code which is inclusive in nature.

If you unintentionally use language deemed harmful, there is no shame. We will work together to find a better alternative. Being thoughtful about language also encourages more thoughtful code!

### Create a pull request

* Try to keep the pull requests small. A pull request should try its very best to address only a single concern.
* Document your reasoning behind the changes. Explain why you wrote the code in the way you did. The code should explain what it does.
* &#x20;If there's an existing issue, reference to it by adding something like `References/Closes/Fixes/Resolves #123`, where `123` is the issue number. [More info here](https://github.com/blog/1506-closing-issues-via-pull-requests).
* All commits in a pull request will be squashed when merged.


# Contributing to the Docs

Contributions to this documentation are always appreciated!

### How to contribute

1. [Fork the project](https://github.com/KawanuaDev/gorangocss-docs) and clone it to your local machine.
2. Create a branch with your GitHub username, for example: `git checkout -b USERNAME/some-new-feature`
3. Code and commit your changes. Bonus points if you write a good commit message: `git commit -m 'Add some feature'`
4. Push to the branch: `git push -u origin USERNAME/some-new-feature`
5. [Create a pull request](https://docs.gorangocss.kawanua.id/contributing/contributing-to-gorangocss#create-a-pull-request) for your branch.


# Hero

{% hint style="info" %}
Since `1.9.0`
{% endhint %}

### Class

```css
.hero
```

### Code Sample

```markup
<div class="hero bg--info">
    <div class="hero__content">
        <div class="container">
            <p class="hero__title">Title</p>
            <p class="hero__subtitle">Sub Title</p>
        </div>
    </div>
</div>
```


# Columns

{% hint style="info" %}
Since `1.8.0`
{% endhint %}

## Class

```
.columns
```

```css
.column
```

```css
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
```

## Code Sample

#### .columns

```markup
<div class="columns">
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
</div>
```

#### .columns--nogap

```markup
<div class="columns--nogap">
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
</div>
```

#### .column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}

```markup
<div class="column--1 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--1</kbd>
</div>
<div class="column--2 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--2</kbd>
</div>
<div class="column--3 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--3</kbd>
</div>
<div class="column--4 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--4</kbd>
</div>
<div class="column--5 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--5</kbd>
</div>
<div class="column--6 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--6</kbd>
</div>
<div class="column--7 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--7</kbd>
</div>
<div class="column--8 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--8</kbd>
</div>
<div class="column--9 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--9</kbd>
</div>
<div class="column--10 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--10</kbd>
</div>
<div class="column--11 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--11</kbd>
</div>
<div class="column--12 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--12</kbd>
</div>
```

## Variable

| Class         | Properties         |
| ------------- | ------------------ |
| `.column--1`  | `width: 8.33333%`  |
| `.column--2`  | `width: 16.66667%` |
| `.column--3`  | `width: 25%`       |
| `.column--4`  | `width: 33.33333%` |
| `.column--5`  | `width: 41.66667%` |
| `.column--6`  | `width: 50%`       |
| `.column--7`  | `width: 58.33333%` |
| `.column--8`  | `width: 66.66667%` |
| `.column--9`  | `width: 75%`       |
| `.column--10` | `width: 83.33333%` |
| `.column--11` | `width: 91.66667%` |
| `.column--12` | `width: 100%`      |


# Flex

{% hint style="info" %}
Since `1.8.0`
{% endhint %}

### Class

```css
.flex
```

```css
.flex--{wrap | nowrap | reverse}
```

### Code Sample

#### .flex

```markup
<div class="flex">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--wrap

```markup
<div class="flex--wrap">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--nowrap

```markup
<div class="flex--nowrap">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--reverse

```markup
<div class="flex--reverse">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```


# Buttons

{% hint style="info" %}
Since `1.9.0`
{% endhint %}

### Class

```css
.button--{xs | sm | md | lg}
```

### Code Sample

```markup
<button class="button--xs bg--dark">.button--xs</button>
<button class="button--sm bg--info">.button--sm</button>
<button class="button--md bg--success">.button--md</button>
<input type="submit" class="button--lg bg--warning" value=".button--lg">
<input type="submit" class="button--lg bg--danger" value=".button--lg">
```


# Notice

{% hint style="info" %}
Since `1.9.0`
{% endhint %}

### Class

```css
.notice--{info | success | warning | danger}
```

### Code Sample

```markup
<div class="notice--info txt--white">
    <button class="close"> </button>.notice--info
</div>
<div class="notice--success txt--white">
    <button class="close"> </button>.notice--success
</div>
<div class="notice--warning txt--white">
    <button class="close"> </button>.notice--warning
</div>
<div class="notice--danger txt--white">
    <button class="close"> </button>.notice--danger
</div>
```


# Card

{% hint style="info" %}
Since `1.8.0`
{% endhint %}

### Class

```css
.card
```

### Code Sample

```markup
<div class="card shadow--md bg--light pa--1 rounded--5 column--3">
    <header class="card__header">
        <h4>Card Title</h4>
    </header>
    <div class="card__content">
        This is a card example.
    </div>
</div>
```


# Highlight

{% hint style="info" %}
Since `1.7.0`
{% endhint %}

### Class

```css
.highlight--{info | success | warning | danger}
```

### Code Sample

#### .highlight--info

```markup
GorangoCSS is require <span class="highlight--info">no JS</span> to run! 
```

#### .highlight--success

```markup
GorangoCSS is require <span class="highlight--success">no JS</span> to run! 
```

#### .highlight--warning

```markup
GorangoCSS is require <span class="highlight--warning">no JS</span> to run!
```

#### .highlight--danger

```markup
GorangoCSS is require <span class="highlight--danger">no JS</span> to run!
```


# Float

{% hint style="info" %}
Since `1.7.0`
{% endhint %}

### Class

```css
.float--{left | right | none}
```

### Code Sample

#### .float--left

```markup
<p class="float--left">Float left!</p>
```

#### .float--right

```markup
<p class="float--right">Float right!</p>
```

#### .float--none

```markup
<p class="float--none">No float properties.</p>
```


# Badge

{% hint style="info" %}
Since `1.6.0`
{% endhint %}

### Class

```css
.badge
```

```css
.badge--{info | success | warning | danger}
```

### Code Sample

#### .badge--info

```markup
<span class="badge--info">New</span> Badge with Info properties!
```

#### .badge--success

```markup
<span class="badge--success">New</span> Badge with Success properties!
```

#### .badge--warning

```markup
<span class="badge--warning">New</span> Badge with Warning properties!
```

#### .badge--danger

```markup
<span class="badge--danger">New</span> Badge with Danger properties! 
```


# Background Color

{% hint style="info" %}
Since `1.5.0`
{% endhint %}

## Class

```css
.bg--{colorName}
```

```css
.bg--{dark | light}
```

```css
.bg--{info | success | warning | danger}
```

```css
.bg--black--{10 | 20 | 30 | 40 | 50}
```

## Code Sample

#### .bg--{colorName}

```markup
<div class="bg--navy rounded--5 pa--2 txt--white">.bg--navy</div>
<div class="bg--orchid rounded--5 pa--2">.bg--orchid</div>
<div class="bg--aqua rounded--5 pa--2">.bg--aqua</div>
```

#### .bg--{dark | light}

```markup
<div class="bg--dark rounded--5 pa--2">.bg--dark</div>
<div class="bg--dark--gradient rounded--5 pa--2">.bg--dark--gradient</div>
<div class="bg--light rounded--5 pa--2">.bg--light</div>
```

#### .bg--{info | success | warning | danger}

```markup
<div class="bg--info rounded--5 pa--2">.bg--info</div>
<div class="bg--info--gradient rounded--5 pa--2">.bg--info--gradient</div>
<div class="bg--success rounded--5 pa--2">.bg--success</div>
<div class="bg--success--gradient rounded--5 pa--2">.bg--success--gradient</div>
<div class="bg--warning rounded--5 pa--2">.bg--warning</div>
<div class="bg--warning--gradient rounded--5 pa--2">.bg--warning--gradient</div>
<div class="bg--danger rounded--5 pa--2">.bg--danger</div>
<div class="bg--danger--gradient rounded--5 pa--2">.bg--danger--gradient</div>
```

#### .bg--black--{10 | 20 | 30 | 40 | 50}

```markup
<div class="bg--black rounded--5 pa--2 txt--white">.bg--black</div>
<div class="bg--black--10 rounded--5 pa--2 txt--white">.bg--black--10</div>
<div class="bg--black--20 rounded--5 pa--2 txt--white">.bg--black--20</div>
<div class="bg--black--30 rounded--5 pa--2 txt--white">.bg--black--30</div>
<div class="bg--black--40 rounded--5 pa--2 txt--white">.bg--black--40</div>
<div class="bg--black--50 rounded--5 pa--2 txt--white">.bg--black--50</div>
```


# Border


# Border Properties

{% hint style="info" %}
Since `1.5.0`
{% endhint %}

## Class

```css
.border--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

```css
.border--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

## Code Sample

#### .border--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

```markup
<div class="border--1 bg--gainsboro rounded--6 pa--2">.border--1</div>
<div class="border--5 bg--gainsboro rounded--6 pa--2">.border--5</div>
<div class="border--10 bg--gainsboro rounded--6 pa--2">.border--10</div>
```

#### .border--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

```markup
<div class="border--t--5 bg--gainsboro rounded--6 pa--2">.border--t--5</div>
<div class="border--r--5 bg--gainsboro rounded--6 pa--2">.border--r--5</div>
<div class="border--b--5 bg--gainsboro rounded--6 pa--2">.border--b--5</div>
<div class="border--l--5 bg--gainsboro rounded--6 pa--2">.border--l--5</div>
```

## Variable

| Class         | Properties           |
| ------------- | -------------------- |
| `.border--1`  | `border: 1px solid`  |
| `.border--2`  | `border: 2px solid`  |
| `.border--3`  | `border: 3px solid`  |
| `.border--4`  | `border: 4px solid`  |
| `.border--5`  | `border: 5px solid`  |
| `.border--6`  | `border: 6px solid`  |
| `.border--7`  | `border: 7px solid`  |
| `.border--8`  | `border: 8px solid`  |
| `.border--9`  | `border: 9px solid`  |
| `.border--10` | `border: 10px solid` |


# Rounded Border

{% hint style="info" %}
Since `1.7.0`
{% endhint %}

## Class

```css
.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}
```

```css
.rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

## Code Sample

#### .rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}

```markup
<div class="rounded--1 bg--gainsboro pa--2">.rounded--1</div>
<div class="rounded--5 bg--gainsboro pa--2">.rounded--5</div>
<div class="rounded--10 bg--gainsboro pa--2">.rounded--10</div>
<div class="rounded--full bg--gainsboro pa--2">.rounded--full</div>
```

#### .rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

```markup
<div class="rounded--t--10 bg--gainsboro pa--2">.rounded--t--10</div>
<div class="rounded--r--10 bg--gainsboro pa--2">.rounded--r--10</div>
<div class="rounded--b--10 bg--gainsboro pa--2">.rounded--b--10</div>
<div class="rounded--l--10 bg--gainsboro pa--2">.rounded--l--10</div>
```

## Variable

| Class          | Properties            |
| -------------- | --------------------- |
| `.rounded--1`  | `border-radius: 1px`  |
| `.rounded--2`  | `border-radius: 2px`  |
| `.rounded--3`  | `border-radius: 3px`  |
| `.rounded--4`  | `border-radius: 4px`  |
| `.rounded--5`  | `border-radius: 5px`  |
| `.rounded--6`  | `border-radius: 6px`  |
| `.rounded--7`  | `border-radius: 7px`  |
| `.rounded--8`  | `border-radius: 8px`  |
| `.rounded--9`  | `border-radius: 9px`  |
| `.rounded--10` | `border-radius: 10px` |


# Margin

{% hint style="info" %}
Since `1.0.0`
{% endhint %}

## Class

```css
.margin--{ auto | t | r | b | l | a }--{number}
```

```css
.m{ t | r | b | l | a }--{number}
```

## Code Sample

#### Margin top = 4 unit

```markup
<p class="mt--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mt--4</kbd> or <kbd>.margin--t--4</kbd> class.
</p>
```

#### Margin right = 4 unit

```markup
<p class="margin--r--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mr--4</kbd> or <kbd>.margin--r--4</kbd> class.
</p>
```

#### Margin bottom = 4 unit

```markup
<p class="mb--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mb--4</kbd> or <kbd>.margin--b--4</kbd> class.
</p>
```

#### Margin left = 4 unit

```markup
<p class="margin--l--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.ml--4</kbd> or <kbd>.margin--l--4</kbd> class.
</p>
```

#### Margin = 4 unit

```markup
<p class="ma--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.ma--4</kbd> or <kbd>.margin--4</kbd> class.
</p>
```

## Variable

| Class                                            | Properties      |
| ------------------------------------------------ | --------------- |
| `.margin--{ auto \| t \| r \| b \| l \| a }--1`  | `margin: 1rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--2`  | `margin: 2rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--3`  | `margin: 3rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--4`  | `margin: 4rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--5`  | `margin: 5rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--6`  | `margin: 6rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--7`  | `margin: 7rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--8`  | `margin: 8rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--9`  | `margin: 9rem`  |
| `.margin--{ auto \| t \| r \| b \| l \| a }--10` | `margin: 10rem` |


# Padding

{% hint style="info" %}
Since `1.0.0`
{% endhint %}

## Class

```css
.padding--{ t | r | b | l | a }--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

## Code Sample

#### Padding top = 4 unit

```markup
<div class="pt--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">
    Paragraph section with <kbd>.pt--4</kbd> or <kbd>.padding--t--4</kbd> class.</p>
</div>
```

## Variable

| Class                                     | Properties       |
| ----------------------------------------- | ---------------- |
| `.padding--{ t \| r \| b \| l \| a }--1`  | `padding: 1rem`  |
| `.padding--{ t \| r \| b \| l \| a }--2`  | `padding: 2rem`  |
| `.padding--{ t \| r \| b \| l \| a }--3`  | `padding: 3rem`  |
| `.padding--{ t \| r \| b \| l \| a }--4`  | `padding: 4rem`  |
| `.padding--{ t \| r \| b \| l \| a }--5`  | `padding: 5rem`  |
| `.padding--{ t \| r \| b \| l \| a }--6`  | `padding: 6rem`  |
| `.padding--{ t \| r \| b \| l \| a }--7`  | `padding: 7rem`  |
| `.padding--{ t \| r \| b \| l \| a }--8`  | `padding: 8rem`  |
| `.padding--{ t \| r \| b \| l \| a }--9`  | `padding: 9rem`  |
| `.padding--{ t \| r \| b \| l \| a }--10` | `padding: 10rem` |