Card

Content container for grouping related information and actions.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 

Props

• default 

Examples

Default

winduum

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

winduum-vue

<script setup lang="ts">
    import { Card } from '@/components/card'
    import { Heading } from '@/components/heading'
    import { Text } from '@/components/text'
</script>

<template>
    <Card class="border border-body-tertiary shadow-sm max-w-md gap-2">
        <Heading>Card title</Heading>
        <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
        </Text>
    </Card>
</template>

winduum-react

import { Card } from '@/components/card'
import { Heading } from '@/components/heading'
import { Text } from '@/components/text'

export function Example() {
    return (
        <Card className="border border-body-tertiary shadow-sm max-w-md gap-2">
            <Heading>Card title</Heading>
            <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
            </Text>
        </Card>
    )
}

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>