@gravity-ui/uikit/build/cjs/components/Card/Card.css

Gravity UI base styling and components

.g-card {
  --_--background-color: transparent;
  --_--border-color: transparent;
  --_--border-width: 0;
  --_--box-shadow: none;
  box-shadow: var(--g-card-box-shadow, var(--_--box-shadow));
  box-sizing: border-box;
  background-color: var(--g-card-background-color, var(--_--background-color));
  border: var(--g-card-border-width, var(--_--border-width)) solid var(--g-card-border-color, var(--_--border-color));
  border-radius: var(--g-card-border-radius, var(--_--border-radius));
  outline: none;
}
.g-card_theme_normal {
  --_--border-color: var(--g-color-line-generic);
  --_--background-color: var(--g-color-base-generic);
}
.g-card_theme_info {
  --_--border-color: var(--g-color-line-info);
  --_--background-color: var(--g-color-base-info-light);
}
.g-card_theme_success {
  --_--border-color: var(--g-color-line-positive);
  --_--background-color: var(--g-color-base-positive-light);
}
.g-card_theme_warning {
  --_--border-color: var(--g-color-line-warning);
  --_--background-color: var(--g-color-base-warning-light);
}
.g-card_theme_danger {
  --_--border-color: var(--g-color-line-danger);
  --_--background-color: var(--g-color-base-danger-light);
}
.g-card_theme_utility {
  --_--border-color: var(--g-color-line-utility);
  --_--background-color: var(--g-color-base-utility-light);
}
.g-card_view_clear {
  --_--background-color: transparent;
}
.g-card_view_outlined {
  --_--background-color: transparent;
  --_--border-width: 1px;
}
.g-card_type_action {
  --_--background-color: var(--g-color-base-float);
  --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
}
.g-card_type_action::after {
  position: absolute;
  inset: 0;
  border-radius: var(--g-card-border-radius, var(--_--border-radius));
  pointer-events: none;
}
.g-card_type_action.g-card_clickable {
  cursor: pointer;
  position: relative;
}
.g-card_type_action.g-card_clickable:hover {
  --_--box-shadow: 0px 3px 10px var(--g-color-sfx-shadow);
}
.g-card_type_action.g-card_clickable:focus-visible::after {
  content: "";
  outline: 2px solid var(--g-color-line-focus);
}
.g-card_type_selection {
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-generic);
  position: relative;
}
.g-card_type_selection::before {
  position: absolute;
  inset: -1px;
  border-radius: var(--g-card-border-radius, var(--_--border-radius));
  pointer-events: none;
}
.g-card_type_selection::after {
  position: absolute;
  inset: 0;
  border-radius: var(--g-card-border-radius, var(--_--border-radius));
  pointer-events: none;
}
.g-card_type_selection.g-card_clickable {
  cursor: pointer;
}
.g-card_type_selection.g-card_clickable:hover {
  --_--border-color: transparent;
}
.g-card_type_selection.g-card_clickable:hover:not(.g-card_selected)::before {
  content: "";
  border: 2px solid var(--g-color-line-brand);
  opacity: 0.5;
}
.g-card_type_selection.g-card_clickable:hover:focus-visible::before {
  border-color: transparent;
}
.g-card_type_selection.g-card_clickable:focus-visible::after {
  content: "";
  outline: 2px solid var(--g-color-line-focus);
}
.g-card_type_selection.g-card_selected:not(.g-card_disabled) {
  --_--border-color: transparent;
}
.g-card_type_selection.g-card_selected:not(.g-card_disabled)::before {
  content: "";
  border: 2px solid var(--g-color-line-brand);
}
.g-card_type_selection.g-card_view_clear {
  --_--border-color: transparent;
}
.g-card_type_container.g-card_view_raised {
  --_--background-color: var(--g-color-base-float);
}
.g-card_type_container.g-card_view_raised.g-card_size_m {
  --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
}

.g-card_type_container.g-card_view_raised.g-card_size_l {
  --_--box-shadow:
      0px 1px 6px var(--g-color-sfx-shadow-light),
      1px 3px 13px var(--g-color-sfx-shadow-light);
}

.g-card_size_m {
  --_--border-radius: 8px;
}
.g-card_size_l {
  --_--border-radius: 16px;
}