Components

Alert

Alerts are a good way to highlight a message.

<p _alert="info">Hello in blue!</p>

<p _alert="dark">Hello in dark!</p>

<p _alert="red">Hello in red!</p>

You can use, as often, all colors.

Button

Of course the buttons are also customizable.

<button _btn="primary">Primary</button>
<button _btn="muted">Muted</button>
<button _btn="red">Red</button>
<button _btn="dark">Dark</button>

You can have an outlined version.

<button _btn="primary outline">Primary</button>
<button _btn="muted outline">Muted</button>
<button _btn="red outline">Red</button>
<button _btn="dark outline">Dark</button>

You can have a small version.

<button _btn="primary sm">Primary</button>
<button _btn="muted sm">Muted</button>
<button _btn="red sm">Red</button>
<button _btn="dark sm">Dark</button>

Or a large version.

<button _btn="primary lg">Primary</button>
<button _btn="muted lg">Muted</button>
<button _btn="red lg">Red</button>
<button _btn="dark lg">Dark</button>

You can set the full width

<button _btn="primary full">Primary</button>
<button _btn="muted full">Muted</button>
<button _btn="red full">Red</button>
<button _btn="dark full">Dark</button>

Of course the usual attributes are available

<button _btn="primary" _font="upper bold" _round="5" _shadow>Primary</button>

Card

<div _card>
    <img src="https://picsum.photos/900/300" alt="random image">
    <h5>Card title</h5>
    <p>Lorem ipsum dolor sit amet, consectetur [...] Minima, totam?</p>
    <button _btn="primary">See more..</button>
</div>

Navigation

Breadcrumb

<div _breadcrumb="light">
    <a href="#">Link</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
</div>

Navbar

<div _navbar="dark" _font="pink">
    <div _row>
        <div>
            <a href="#" _brand>Bubblegum</a>
            <a href="#">Link</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </div>
        <div>
            <a href="#">Link</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </div>
    </div>
</div>

Progress

<div _progress>
    <div style="width: 45%"></div>
</div>

<div _progress="red">
    <div style="width: 45%"></div>
</div>

<div _progress="pink" _bg="dark">
    <div style="width: 45%"></div>
</div>

Table

<table _table>
    <tr>
        <td>Row 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
</table>

<table _table="striped">
    <tr>
        <td>Row 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
</table>

<table _table="bordered">
    <tr>
        <td>Row 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
</table>

<table _table="bordered hover">
    <tr>
        <td>Row 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
</table>

<table _table="bordered compact">
    <tr>
        <td>Row 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
</table>