@inkline/inkline/src/components/ICard/examples/color-variants.html

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

<i-card color="light">
    <template #header>Light Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="dark">
    <template #header>Dark Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="primary">
    <template #header>Primary Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="secondary">
    <template #header>Secondary Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="success">
    <template #header>Success Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="danger">
    <template #header>Danger Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="warning">
    <template #header>Warning Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

<i-card color="info">
    <template #header>Info Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>