roobie/docs/components/chip.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Chip
Short block of content.

## Basic
<div class="chip">Chip</div>
<div class="chiph">Chip with hover</div>

```html
<div class="chip">Chip</div>
<div class="chiph">Chip with hover</div>
```

## Descriptions
<div class="div row">
    <div class="card">
        <h2 class="card-title">Mama's Pumpkin Pie</h2>
        <div class="card-subtitle row">
            <div class="chip">30 min</div>
            <div class="chip">Pumpkin</div>
            <div class="chip">Gluten Free</div>
        </div>
        <div class="card-content">
            The best recipe in the world! Delicious & easy to make.
        </div>
    </div>
    <div class="card">
        <h2 class="card-title">Chocolate Chip Cookies</h2>
        <div class="card-subtitle row">
            <div class="chip">25 min</div>
            <div class="chip">Favorite</div>
            <div class="chip cat-active">New!</div>
        </div>
        <div class="card-content">
           Cookies that will knock your socks off.
        </div>
    </div>
</div>

```html
<div class="div row">
    <div class="card">
        <h2 class="card-title">Mama's Pumpkin Pie</h2>
        <div class="card-subtitle row">
            <div class="chip">30 min</div>
            <div class="chip">Pumpkin</div>
            <div class="chip">Gluten Free</div>
        </div>
        <div class="card-content">
            The best recipe in the world! Delicious & easy to make.
        </div>
    </div>
    <div class="card">
        <h2 class="card-title">Chocolate Chip Cookies</h2>
        <div class="card-subtitle row">
            <div class="chip">25 min</div>
            <div class="chip">Favorite</div>
            <div class="chip cat-active">New!</div>
        </div>
        <div class="card-content">
           Cookies that will knock your socks off.
        </div>
    </div>
</div>
```

## Categories
<div class="div row">
    <div class="div33 card br box pad">
        <div class="col">
            <div class="row bg3 br pad mrg">
                <div class="chip">Small</div>
                <div class="chip">Medium</div>
                <div class="chip">Large</div>
                <div class="chip">Extra Large</div>
            </div>
            <div class="row jst-center bg3 br pad mrg">
                <div class="chip">Red</div>
                <div class="chip">Yellow</div>
                <div class="chip">Orange</div>
                <div class="chip">Purple</div>
                <div class="chip">Blue</div>
            </div>
            <div class="row jst-end bg3 br pad mrg">
                <div class="chip">Update</div>
                <div class="chip">Shutdown</div>
                <div class="chip">Delete</div>
                <div class="chip">Install</div>
            </div>
            <div class="row jst-around bg3 br pad mrg">
                <div class="chip">-1</div>
                <div class="chip">0</div>
                <div class="chip">+1</div>
            </div>
            <div class="row jst-between bg3 br pad mrg">
                <div class="chip">Start</div>
                <div class="chip">End</div>
            </div>
        </div>
    </div>
</div>

```html
<div class="div row">
    <div class="div33 card br box pad">
        <div class="col">
            <div class="row bg3 br pad mrg">
                <div class="chip">Small</div>
                <div class="chip">Medium</div>
                <div class="chip">Large</div>
                <div class="chip">Extra Large</div>
            </div>
            <div class="row jst-center bg3 br pad mrg">
                <div class="chip">Red</div>
                <div class="chip">Yellow</div>
                <div class="chip">Orange</div>
                <div class="chip">Purple</div>
                <div class="chip">Blue</div>
            </div>
            <div class="row jst-end bg3 br pad mrg">
                <div class="chip">Update</div>
                <div class="chip">Shutdown</div>
                <div class="chip">Delete</div>
                <div class="chip">Install</div>
            </div>
            <div class="row jst-around bg3 br pad mrg">
                <div class="chip">-1</div>
                <div class="chip">0</div>
                <div class="chip">+1</div>
            </div>
            <div class="row jst-between bg3 br pad mrg">
                <div class="chip">Start</div>
                <div class="chip">End</div>
            </div>
        </div>
    </div>
</div>
```