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 JSXPine 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.component";
export function DefaultCardExample() {
return (
<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",
type: "danger",
action: "console.log('cancel')"
},
{
label: "Confirm",
type: "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",
type: "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",
type: "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.component";
export function HorizontalCardExample() {
return (
<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",
type: "secondary",
action: "console.log('card component')"
}
]}
direction="horizontal"
/>
);
}
Custom 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.component";
import { Card } from "$components/card.component";
import { Icon } from "$components/icon.component";
export function CustomCardExample() {
return (
<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>
);
}