@scania/tegel/dist/collection/components/card/card.css

Tegel Design System

.card {
  box-sizing: border-box;
  box-shadow: var(--tds-card-box);
  background-color: var(--tds-card-background);
  display: block;
  border-radius: 4px;
  overflow: hidden;
}
.card * {
  box-sizing: border-box;
}
.card.clickable:hover {
  box-shadow: var(--tds-card-box-hover);
  cursor: pointer;
}
.card .card-header {
  font: var(--tds-headline-06);
  letter-spacing: var(--tds-headline-06-ls);
  padding: 16px;
  display: flex;
  align-items: center;
}
.card .card-header slot[name=thumbnail]::slotted(*) {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  margin-right: 16px;
}
.card .card-header .card-top-header {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
}
.card .card-header .card-top-header.no-header-img {
  padding-left: 0;
}
.card .card-header.below {
  padding-top: 16px;
}
.card .card-header.expandable tds-icon {
  cursor: pointer;
  margin-left: auto;
  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
}
.card .card-header.expandable tds-icon.rotated {
  transform: rotate(180deg);
}
.card .header-subheader {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
.card .header-subheader .header,
.card .header-subheader slot[name=header] {
  color: var(--tds-card-headline);
}
.card .header-subheader .subheader,
.card .header-subheader slot[name=subheader] {
  color: var(--tds-card-sub-headline);
}
.card .card-body-img {
  width: 100%;
}
.card .tds-divider {
  margin: 16px 16px 0;
  background-color: var(--tds-card-divider);
  height: 1px;
}
.card .card-body {
  display: block;
  word-wrap: break-word;
}
.card slot[name=body]::slotted(*) {
  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
  font: var(--tds-detail-03) !important;
  letter-spacing: var(--tds-detail-03-ls) !important;
  color: var(--tds-card-body-color);
  padding: 0 16px;
  margin-bottom: 16px;
  margin-top: 16px;
  max-width: 336px;
}
.card slot[name=actions]::slotted(*) {
  display: flex;
  padding: 16px;
  color: var(--tds-card-icon-color);
}

button {
  width: 100%;
  border: none;
  text-align: left;
  padding: 0;
}
button:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: -2px;
}
button:active {
  box-shadow: var(--tds-card-box-pressed);
}

.below-header-stretch,
.above-header-stretch {
  display: flex;
  flex-direction: column;
}
.below-header-stretch .stretch,
.above-header-stretch .stretch {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}
.below-header-stretch .card-body,
.above-header-stretch .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.below-header-stretch .card-body slot[name=body]::slotted(*),
.above-header-stretch .card-body slot[name=body]::slotted(*) {
  max-width: unset;
  flex-grow: 1;
}

:host([expandable]:not([expanded])) .card-body slot[name=body] {
  display: none;
}