This card element can be used to display a product, post, or any other type of data. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid inventore impedit minus suscipit! Inventore est, omnis blanditiis iste fuga excepturi nam sit, officia pariatur molestias esse eius voluptas veniam eligendi!
Card
Overview
Card is a nice way to display generic content such as summary blog post or e-commerce product items. Card from Astropine provides you many features to help you customize it based on your needs. Check cases below and find your way.
Default Card
With these props: image, title, text or texts and controls, you can achieve a pretty card component design.
Look these three examples below and check each example code to see how it is done.
Card Title
With Texts props as Array
This card element can be used to display a product, post, or any other type of data.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aliquid inventore impedit minus suscipit! Inventore est, omnis blanditiis iste fuga excepturi nam sit, officia pariatur molestias esse eius voluptas veniam eligendi!
Product Name
This card element can be used to display a product, post, or any other type of data.
Copied !
---
import Card from "$components/card/Card.astro";
---
<div class="w-full flex flex-col gap-y-4 items-center">
<Card
title="Card Title"
text={`
This card element can be used to display a product, post, or any other type of data.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aliquid inventore impedit minus suscipit! Inventore est, omnis blanditiis iste fuga excepturi nam sit, officia pariatur molestias esse eius voluptas veniam eligendi!
`}
controls={[
{
label: "Cancel",
variant: "danger",
action: "console.log('cancel')",
},
{
label: "Confirm",
variant: "success",
action: "console.log('confirm')",
},
]}
/>
<Card
title="With Texts props as Array"
class="[&_#card-controls]:justify-center"
texts={[
"This card element can be used to display a product, post, or any other type of data.",
"Lorem ipsum dolor, sit amet consectetur adipisicing elit.",
"Aliquid inventore impedit minus suscipit! Inventore est, omnis blanditiis iste fuga excepturi nam sit, officia pariatur molestias esse eius voluptas veniam eligendi!",
]}
controls={[
{
label: "I Refuse",
action: "console.log('cancel')",
},
{
label: "I Accept",
variant: "secondary",
action: "console.log('card component')",
},
]}
/>
<Card
image={{
src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
alt: "Card component image",
}}
,
class="w-3/5 [&_#card-controls]:justify-center [&_#card-controls>*]:w-full"
title="Product Name"
text="This card element can be used to display a product, post, or any other type of data."
controls={[
{
label: "View Product",
variant: "secondary",
action: "console.log('card component')",
},
]}
/>
</div>
Horizontal Card
By setting position props to “horizontal”, you can display horizontally image and card content. No more needed.
Check this example.
Product Name
This card element can be used to display a product, post, or any other type of data.
Copied !
---
import Card from "$components/card/Card.astro";
---
<Card
image={{
src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
alt: "Card component image",
}}
,
class="grid grid-cols-2 [&_#card-body-text]:h-full [&_#card-controls]:justify-center [&_#card-controls>*]:w-full"
title="Product Name"
text="This card element can be used to display a product, post, or any other type of data."
controls={[
{
label: "View Product",
variant: "secondary",
action: "console.log('card component')",
},
]}
position="horizontal"
/>
Custom Title Slot Card
AstroPine provides you CardBody component which allows you to only customize card content. Three slots are available: title, text and controls.
This example shows you how you can use slot title to design your custom card body title.
Adding items to the command
In order to make use of this component you can simply add your items inside of the commandItems array. Each item will have a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search. Learn how to get the selected item below.
Copied !
---
import Card from "$components/card/Card.astro";
import CardBody from "$components/card/CardBody.astro";
import Icon from "$components/icon/Icon.astro";
---
<Card class="p-4">
<CardBody
text={`In order to make use of this component you can simply add your items inside
of the commandItems array. Each item will have a title, value, icon, and
default value. All items will be searchable, but only default items will be
visible with an empty search. Learn how to get the selected item below.`}
controls={[
{
label: "View More",
variant: "secondary",
},
]}
>
<h3 slot="title" class="relative flex gap-x-1 items-center">
<Icon name="lightbulb-line" stroke-width="0.5" />
<span class="font-semibold underline">Adding items to the command</span>
</h3>
</CardBody>
</Card>
Custom Slot Card
Do you want to use your own design ? Just ignore all props and set your content as slot. As simple as that.
Adding items to the command
In order to make use of this component you can simply add your items inside of the commandItems array. Each item will have a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search. Learn how to get the selected item below.
Copied !
---
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
import Card from "$components/card/Card.astro";
import Icon from "$components/icon/Icon.astro";
---
<Card class="p-4">
<h3 class="relative flex gap-x-1 items-center">
<Icon name="lightbulb-line" stroke-width="0.5" />
<span class="font-semibold underline">Adding items to the command</span>
</h3>
<p class="px-4">
In order to make use of this component you can simply add your items inside
of the commandItems array. Each item will have a title, value, icon, and
default value. All items will be searchable, but only default items will be
visible with an empty search. Learn how to get the selected item below.
</p>
<div class="flex items-center justify-end">
<SecondaryButton class="flex gap-x-2">
<span>View More</span>
<Icon name="arrow-right-line" size={5} />
</SecondaryButton>
</div>
</Card>