@patreon/studio/module/components/Card/Card.module.css

Patreon Studio Design System

.root {
  border-radius: calc(var(--global-radius-md) * var(--Card-radius-enabled, 1));
  box-sizing: border-box;
  overflow: hidden;
}

.root img,.root iframe {
    max-width: 100%;
  }

/* Fluid height prop */
.fluidHeight {
  height: 100%;
}

/* Padding props */
.paddingRegular {
  padding: var(--global-space-x24) var(--global-space-x16);
}

.paddingTight {
  padding: var(--global-space-x16);
}

/* Variant props */
.variantDefault {
  background-color: var(--Card-edgeless-color, var(--global-bg-base-default));

  /* If card divider is enabled, add in a bottom border */
  border-bottom: calc(var(--global-borderWidth-thin) * var(--Card-divider-enabled, 0)) solid
    var(--global-border-muted-default);
}
.variantDefault.elevationSubtle.colorModeLight {
      border: calc(var(--global-borderWidth-thin) * (1 - var(--Card-divider-enabled, 0))) solid
        var(--global-border-muted-default);
      border-bottom-width: calc(
        var(--global-borderWidth-thin)
      ); /* always have a bottom border, regardless of if the card divider is set */
    }
.variantDefault.elevationSubtle.colorModeAuto {
      border: calc(var(--global-borderWidth-thin) * (1 - var(--Card-divider-enabled, 0))) solid
        var(--global-border-muted-default);
      border-bottom-width: calc(var(--global-borderWidth-thin));
    }
.variantDefault.elevationSubtle.colorModeDark {
      border-bottom: calc(var(--global-borderWidth-thin) * var(--Card-divider-enabled, 0)) solid
        var(--global-border-muted-default);
    }
.variantDefault.elevationLow {
    box-shadow: var(--global-boxShadow-low);
  }
.variantDefault.elevationMid {
    box-shadow: var(--global-boxShadow-mid);
  }

.variantTransparent {
  background-color: transparent;
  border: var(--global-borderWidth-thin) solid var(--global-border-muted-default);
}

@media (min-width: 588px) {
.paddingRegular {
    padding: var(--global-space-x24);
}
}

@media (prefers-color-scheme: dark) {
.variantDefault.elevationSubtle.colorModeAuto {
        border: none;
        border-bottom: calc(var(--global-borderWidth-thin) * var(--Card-divider-enabled, 0)) solid
          var(--global-border-muted-default);
    }
}