@vaadin/vaadin-lumo-styles/components/card.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@import '../src/components/card.css';

:root,
:host {
  --_lumo-vaadin-card-inject: 1;
  --_lumo-vaadin-card-inject-modules: lumo_components_card;
}

:where(:root),
:where(:host) {
  --vaadin-card-background: var(
    --lumo-contrast-5pct
  );
  --vaadin-card-border-radius: var(
    --lumo-border-radius-l
  );
  --vaadin-card-border-width: 0;
  --vaadin-card-border-color: var(
    --lumo-contrast-20pct
  );
  --vaadin-card-padding: var(
    --lumo-space-m
  );
  --vaadin-card-gap: var(
    --lumo-space-m
  );
  --vaadin-card-shadow: none;
  --vaadin-card-title-color: var(
    --lumo-header-text-color
  );
  --vaadin-card-title-font-size: var(
    --lumo-font-size-l
  );
  --vaadin-card-title-font-weight: 600;
  --vaadin-card-title-line-height: var(
    --lumo-line-height-xs
  );
  --vaadin-card-subtitle-color: var(
    --lumo-secondary-text-color
  );
  --vaadin-card-subtitle-font-size: var(
    --lumo-font-size-m
  );
  --vaadin-card-subtitle-line-height: var(
    --lumo-line-height-xs
  );
}