Card

View Source 

Usage

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

Variants

• default 

Props

• default-props 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Default

<div class="c-card border border-body-tertiary shadow-sm max-w-md gap-2">
    <div class="ui-heading">Card title</div>
    <div class="ui-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="c-card p-0 border border-body-tertiary shadow-sm max-w-md">
    <img src="https://via.placeholder.com/400x300/333" alt="" width="400" height="300" class="aspect-video w-full h-auto rounded-t-[inherit] object-cover">
    <div class="flex-col gap-2 p-[--c-card-p]">
        <div class="ui-heading flex-center">Card title</div>
        <div class="ui-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>