@inkline/inkline/components/ITable/examples/color-variants.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-table color="light">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="dark">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="primary">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="secondary">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="info">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="success">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="warning">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>

<i-table color="danger">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">#</th>
        <td>Alex</td>
        <td>Grozav</td>
        <td>@alexgrozav</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
    </tr>
    <tr>
        <th scope="row">#</th>
        <td>Alice</td>
        <td>Doe</td>
        <td>@alicecooper</td>
    </tr>
    </tbody>
</i-table>