Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
    •

    Card

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    card-background-loading-color alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    card-background-well-color alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    card-default-width-extra-large dimension 400px 400px No - -
    card-default-width-extra-small dimension 120px 120px No - -
    card-default-width-large dimension 320px 320px No - -
    card-default-width-medium dimension 240px 240px No - -
    card-default-width-small dimension 180px 180px No - -
    card-description-to-footer alias {spacing-300} 16px Yes Use semantic token container-padding-medium instead. Replaced by container-padding-medium
    card-edge-to-content-compact-extra-large dimension 20px 20px Yes Use semantic token container-padding-large instead. Replaced by container-padding-large
    card-edge-to-content-compact-extra-small dimension 6px 6px Yes Use semantic token container-padding-2x-small instead. Replaced by container-padding-2x-small
    card-edge-to-content-compact-large dimension 16px 16px Yes Use semantic token container-padding-medium instead. Replaced by container-padding-medium
    card-edge-to-content-compact-medium dimension 12px 12px Yes Use semantic token container-padding-small instead. Replaced by container-padding-small
    card-edge-to-content-compact-small dimension 8px 8px Yes Use semantic token container-padding-extra-small instead. Replaced by container-padding-extra-small
    card-edge-to-content-default-extra-large dimension 24px 24px Yes Use semantic token container-padding-extra-large instead. Replaced by container-padding-extra-large
    card-edge-to-content-default-extra-small dimension 8px 8px Yes Use semantic token container-padding-extra-small instead. Replaced by container-padding-extra-small
    card-edge-to-content-default-large dimension 20px 20px Yes Use semantic token container-padding-large instead. Replaced by container-padding-large
    card-edge-to-content-default-medium dimension 16px 16px Yes Use semantic token container-padding-medium instead. Replaced by container-padding-medium
    card-edge-to-content-default-small dimension 12px 12px Yes Use semantic token container-padding-small instead. Replaced by container-padding-small
    card-edge-to-content-spacious-extra-large dimension 28px 28px Yes Use semantic token container-padding-2x-large instead. Replaced by container-padding-2x-large
    card-edge-to-content-spacious-extra-small dimension 12px 12px Yes Use semantic token container-padding-small instead. Replaced by container-padding-small
    card-edge-to-content-spacious-large dimension 24px 24px Yes Use semantic token container-padding-extra-large instead. Replaced by container-padding-extra-large
    card-edge-to-content-spacious-medium dimension 20px 20px Yes Use semantic token container-padding-large instead. Replaced by container-padding-large
    card-edge-to-content-spacious-small dimension 16px 16px Yes Use semantic token container-padding-medium instead. Replaced by container-padding-medium
    card-header-to-description alias {spacing-75} 4px Yes Use semantic token text-gap-medium instead. May require refactor Replaced by text-gap-medium
    card-maximum-width-extra-large dimension 460px 460px No - -
    card-maximum-width-extra-small dimension 140px 140px No - -
    card-maximum-width-large dimension 370px 370px No - -
    card-maximum-width-medium dimension 280px 280px No - -
    card-maximum-width-small dimension 210px 210px No - -
    card-minimum-height-extra-large dimension 300px 300px No - -
    card-minimum-height-extra-small dimension 90px 90px No - -
    card-minimum-height-large dimension 240px 240px No - -
    card-minimum-height-medium dimension 180px 180px No - -
    card-minimum-height-small dimension 135px 135px No - -
    card-minimum-width alias {card-minimum-width-default} 100px Yes This token has been deprecated, use card-minimum-width-default instead. Replaced by card-minimum-width-default
    card-minimum-width-default dimension 100px 100px No - -
    card-minimum-width-extra-large dimension 340px 340px No - -
    card-minimum-width-extra-small dimension 100px 100px No - -
    card-minimum-width-large dimension 270px 270px No - -
    card-minimum-width-medium dimension 200px 200px No - -
    card-minimum-width-small dimension 150px 150px No - -
    card-preview-minimum-height dimension 130px 130px No - -
    card-selection-background-color color-set - light: rgba(255, 255, 255, 0.51)
    dark: rgba(0, 0, 0, 0.56)
    wireframe: rgba(0, 0, 0, 0.56)     		No - -
    card-selection-background-color-opacity opacity 0.95 0.95 No - -
    card-selection-background-size dimension 40px 40px No - -
    card-selection-background-size-extra-large dimension 28px 28px No - -
    card-selection-background-size-large dimension 26px 26px No - -
    card-selection-background-size-medium dimension 24px 24px No - -
    card-selection-background-size-small dimension 22px 22px No - -