@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));
  border-bottom: calc(var(--global-borderWidth-thin) * var(--Card-divider-enabled, 0)) solid var(--global-border-muted-default);
}
.variantDefault.elevationSubtle.colorModeLight {
      /* we only want to add this border-like box shadow when the divider is turned off */
      box-shadow: 0 0 0 calc(var(--global-borderWidth-thin) * (1 - var(--Card-divider-enabled, 0)))
        var(--global-bg-page-default);
    }
.variantDefault.elevationSubtle.colorModeAuto {
      box-shadow: 0 0 0 calc(var(--global-borderWidth-thin) * (1 - var(--Card-divider-enabled, 0)))
      var(--global-bg-page-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 {
        box-shadow: none;
    }
}