@vaadin/vaadin-lumo-styles/src/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/
 */
@media lumo_components_card {
  :host::before {
    inset: var(--_card-border-inset, 0);
    border-radius: var(--_card-border-pseudo-radius, inherit);
  }

  :host([theme~='outlined']) {
    --vaadin-card-border-width: 1px;
    --vaadin-card-background: var(--lumo-base-color);
  }

  :host([theme~='elevated']) {
    --vaadin-card-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct)) var(--lumo-base-color);
    --vaadin-card-shadow: var(--lumo-box-shadow-xs);
    --vaadin-card-border-width: 1px;
    --_card-border-inset: calc(-1 * var(--vaadin-card-border-width));
    --_card-border-pseudo-radius: calc(var(--vaadin-card-border-radius) + var(--vaadin-card-border-width));
  }

  :host([theme~='elevated']:not([theme~='outlined'])) {
    --vaadin-card-border-color: var(--lumo-contrast-10pct);
  }

  :host(:where([theme~='stretch-media'])) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
    border-radius: var(--lumo-border-radius-m);
  }

  :host([theme~='elevated'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
    margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
    margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
    width: calc(var(--_media-width) + var(--vaadin-card-border-width) * 2);
  }

  :host([theme~='elevated'][theme~='horizontal'][theme~='cover-media'])
    ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
    height: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
  }
}