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>

Hello in blue!

Hello in dark!

Hello in red!

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>
random image
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur, atque cum error, est, incidunt laudantium maiores minus molestias obcaecati qui quia quod repellendus sequi tempora vero voluptates! Minima, totam?

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>
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Row 3 Col 2 Col 3 

<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>
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Row 3 Col 2 Col 3 

<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>
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Row 3 Col 2 Col 3 

<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>
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Row 3 Col 2 Col 3 

<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>
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Row 3 Col 2 Col 3