Skip to content

Card


View Source 

Usage

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

Variants

  • default 

Props

  • default 

Installation

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue 
  • winduum-react 

Examples

Default

html
<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

html
<div class="x-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 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>

Released under the MIT License.