Card

View Source 

Usage

@import "winduum/src/components/card/index.css" layer(utilities);

Variants

• default 

Props

• default 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Default

<div class="x-card border border-body-tertiary shadow-sm max-w-md gap-2">
    <div class="x-heading">Card title</div>
    <div class="x-text">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Lorem ipsum dolor sit amet
    </div>
</div>

Image

<div class="x-card p-0 border border-body-tertiary shadow-sm max-w-md">
    <img src="https://placehold.co/400x300/333/webp" alt="" width="400" height="300" class="aspect-video w-full h-auto rounded-t-[inherit] object-cover">
    <div class="flex flex-col gap-2 px-(--x-card-padding-inline) py-(--x-card-padding-block)">
        <div class="x-heading">Card title</div>
        <div class="x-text">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Lorem ipsum dolor sit amet
        </div>
    </div>
</div>