@telekom/scale-components/dist/collection/components/card/card.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --background: var(--telekom-color-background-surface);
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --radius: var(--telekom-radius-large);
  --box-shadow: var(--telekom-shadow-raised-standard);
  --box-shadow-hover: var(--telekom-shadow-raised-hover);
  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus-standard);
  --box-shadow-active: var(--telekom-shadow-raised-pressed);

  --spacing-body: var(--telekom-spacing-composition-space-08);

  --spacing-body-slotted: 0;
  --spacing-body-slotted-interactive: 0;

  --font-body-slotted: var(--telekom-text-style-body);
}

.card-border {
  /* a11y: add border for high contrast mode */
  border: 1px solid transparent;
}
.card {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--background);
  transition: var(--transition);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}

.card__body {
  padding: var(--spacing-body);
}

.card__body ::slotted(*) {
  margin: var(--spacing-body-slotted);
}

.card--interactive {
  color: inherit;
  cursor: pointer;
  display: block;
  outline: none;
  text-decoration: none;
}

.card--interactive:hover {
  box-shadow: var(--box-shadow-hover);
}

.card--interactive:focus {
  box-shadow: var(--telekom-shadow-raised-hover), var(--box-shadow-focus);
}

.card--interactive:active {
  border: none;
  box-shadow: var(--box-shadow-active);
}

.card--interactive .card__body ::slotted(*) {
  margin: var(--spacing-body-slotted-interactive);
}

.card__body ::slotted(*) {
  font: var(--font-body-slotted);
}