Card

Find the source code here.

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

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!

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!

Card component image

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.

Card component image

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>
	);
}