Card Component Theme

Overview

The card component theme is a collection of Tailwind CSS utilities that can be used to create cards with different styles, and variants. Cards are used to group and display content in a way that is easily readable.

Installation

To install the card component theme, run the following command:

npm install @tailus/themer-card

Importation

To import the card component theme, you can use the following import:

import {
    card,
    outlinedVariant,
    elevatedVariant,
    softVariant,
    mixedVariant,
    softGradientVariant,
    elevatedGradientVariant,
} from "@tailus/themer-card";

Variants

The card component theme provides six variants:

• Outlined (default): The default variant.
• Elevated: A variant with a drop shadow.
• Soft: A variant with rounded corners and lighter background colors.
• Mixed: A variant that combines the outlined and elevated variants.
• SoftGradient: A variant with a lighter backhround and gradient border.
• ElevatedGradient: A variant with a drop shadow and gradient border.

Props

The softGradient and elevatedGradient variants have two props:

• outer: Gradient border and border radius.
• inner: Contains the padding and the content of the card.

Customization

The following properties can be customized in the card component theme:

• rounded
• padding

// tailwind.config.js
import themer from "@tailus/themer";
export default = {
    theme: {
        extend: {},
    },
    plugins: [
        themer({
            components: {
                card: {
                    rounded: "rounded-lg",
                    padding: "p-4",
                },
            },
        }),
    ],
};

Note: The border color is customized in the ui group.

Usage

To use the card component theme, simply import the appropriate variant and add it to the card element. For example, to create a default card component, you would import the card variant and add it to the card element.

Example (React)

<div className={card}>
    <h3>Outlined Card Title</h3>
</div>

SoftGradient Card

To create a soft gradient card, you would import the softGradient variant and add its properties to the card element. You would also need to specify the outer and inner properties.

<div className={softGradientVariant.outer}>
    <div className={softGradientVariant.inner}>
        <h3>Soft Gradient Card Title</h3>
    </div>
</div>