Card
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Cards are customizable content holders built with as little markup and styles as possible. They are based on flexbox, offering easy alignment, and they mix well with other components.
<template>
<ICard>
<template #image>
<img src="../../../assets/images/placeholder-500x250.jpg" alt="Card Image" />
</template>
<h2>Card Title</h2>
<p>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<a class="card-link" href="https://inkline.io"> Example Link </a>
</ICard>
</template>
The building block of a card is the card body. All the content placed in the default component slot will be placed inside the body.
<template>
<ICard>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</ICard>
</template>
Optionally, you can provide a header or a footer for your cards.
<template>
<ICard>
<template #header> Card Header </template>
Some quick example text to build on the card title and make up the bulk of the card's
content.
<template #footer> Card Footer </template>
</ICard>
</template>
You can provide an image at the top of the card, using the image slot.
<template>
<ICard>
<template #image>
<img src="../../../assets/images/placeholder-500x250.jpg" alt="Card Image" />
</template>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</ICard>
</template>
Inkline includes several predefined card colors that you can use within your application. You can apply a style using the color property.
<template>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
<ICard 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.
</ICard>
</template>
You're able to use the size modifier to control the text and spacing size of your cards, using one of the available sizes: sm, md, and lg.
The default size is set to md.
<template>
<ICard size="sm">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</ICard>
<ICard size="md">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</ICard>
<ICard size="lg">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</ICard>
</template>