Card

Source

• Card.css

Example

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

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/card/props/default.css" layer(theme);
@import "winduum/src/components/card/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-card-background-color: var(--color-accent);
    --x-card-border-radius: var(--radius-md);
  }
}

Winduum CSS Code

winduum/src/components/card/props/default.css

:root, :host {
  --x-card-background-color: var(--color-body-primary);
  --x-card-border-radius: var(--radius-2xl);
  --x-card-padding-block: calc(var(--spacing) * 6);
  --x-card-padding-inline: calc(var(--spacing) * 7);
}

winduum/src/components/card/default.css

.x-card {
  background-color: var(--x-card-background-color);
  border-radius: var(--x-card-border-radius);
  padding: var(--x-card-padding-block) var(--x-card-padding-inline);
  display: flex;
  flex-direction: column;
}