@penaprieto/design-system/dist/components/RadioCard/RadioCard.css

Multi-brand React design system with design tokens from Figma

.ds-radio-card-group {
  display: flex;
  gap: var(--size3, 12px);
}

.ds-radio-card {
  width: 140px;
  height: 130px;
  padding: var(--size2, 8px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  border-radius: var(--br-sm, 8px);
  background: var(--radio-card-unselected-bg-default);
  color: var(--semantic-text-corp-primary);
  box-shadow: inset 0 0 0 1px var(--radio-card-unselected-border-default);
  transition:
    background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-family: var(--body-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  cursor: pointer;
}

.ds-radio-card--disabled {
  cursor: not-allowed;
}

.ds-radio-card__input {
  display: none;
}

.ds-radio-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  padding: var(--size3, 12px);
  border-radius: var(--br-xs, 4px);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.ds-radio-card__icon {
  width: 24px;
  height: 24px;
  color: var(--semantic-icon-brand-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-radio-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.ds-radio-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--size2, 8px);
  width: 100%;
}

.ds-radio-card__label {
  color: inherit;
  font-family: var(--body-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-small-fontSize, 14px);
  font-weight: var(--body-small-fontWeight, 400);
  line-height: var(--body-small-lineHeight, 150%);
  word-break: break-word;
}

.ds-radio-card__description {
  color: var(--semantic-text-corp-secondary);
  font-family: var(--body-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-small-fontSize, 14px);
  font-weight: var(--body-small-fontWeight, 400);
  line-height: var(--body-small-lineHeight, 150%);
  word-break: break-word;
}

/* Hover - unselected */
.ds-radio-card:hover .ds-radio-card__content {
  background: var(--radio-card-unselected-bg-default);
  box-shadow: inset 0 0 0 1px var(--radio-card-unselected-border-hover);
}

/* Focus */
.ds-radio-card__input:focus-visible + .ds-radio-card__content {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--radio-card-unselected-border-default), var(--semantic-focus-bright-blue);
}

/* Selected */
.ds-radio-card__input:checked + .ds-radio-card__content {
  background: var(--radio-card-selected-bg-default);
  color: var(--semantic-text-white-primary);
  box-shadow: inset 0 0 0 2px var(--radio-card-selected-bg-default);
}

.ds-radio-card__input:checked + .ds-radio-card__content .ds-radio-card__icon {
  color: var(--semantic-icon-inverse-bold);
}

/* Hover selected */
.ds-radio-card__input:checked + .ds-radio-card__content:hover {
  background: var(--radio-card-selected-bg-hover);
  box-shadow: inset 0 0 0 2px var(--radio-card-selected-bg-hover);
}

/* Disabled */
.ds-radio-card__input:disabled + .ds-radio-card__content {
  background: var(--radio-card-unselected-bg-disabled);
  box-shadow: inset 0 0 0 1px var(--radio-card-unselected-border-default);
  color: var(--semantic-text-corp-disabled);
}

.ds-radio-card__input:disabled + .ds-radio-card__content .ds-radio-card__icon {
  color: var(--semantic-icon-default-disabled);
}

/* Active */
.ds-radio-card:active .ds-radio-card__content {
  box-shadow: inset 0 0 0 2px var(--radio-card-unselected-border-hover);
}

.ds-radio-card:active .ds-radio-card__input:checked + .ds-radio-card__content {
  box-shadow: inset 0 0 0 2px var(--radio-card-selected-bg-hover);
}