bulma/sass/components/card.sass

$card-color: var(--text, #{$text}) !default
$card-background-color: var(--scheme-main, #{$scheme-main}) !default
$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
$card-radius: 0 !default

$card-header-background-color: transparent !default
$card-header-color: var(--text-strong, #{$text-strong}) !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
$card-header-weight: var(--weight-bold, #{$weight-bold}) !default

$card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default

$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border-light !default
$card-footer-padding: 0.75rem !default

$card-media-margin: var(--block-spacing, #{$block-spacing}) !default

.card
  --card-background-color: #{$card-background-color}
  --card-shadow: #{$card-shadow}
  --card-color: #{$card-color}
  --card-radius: #{$card-radius}
  --card-header-background-color: #{$card-header-background-color}
  --card-header-shadow: #{$card-header-shadow}
  --card-header-color: #{$card-header-color}
  --card-header-weight: #{$card-header-weight}
  --card-header-padding: #{$card-header-padding}
  --card-header-padding: #{$card-header-padding}
  --card-content-background-color: #{$card-content-background-color}
  --card-content-padding: #{$card-content-padding}
  --card-footer-background-color: #{$card-footer-background-color}
  --card-footer-border-top: #{$card-footer-border-top}
  --card-footer-padding: #{$card-footer-padding}
  --card-media-margin: #{$card-media-margin}
  background-color: var(--card-background-color)
  box-shadow: var(--card-shadow)
  color: var(--card-color)
  max-width: 100%
  position: relative
  border-radius: var(--card-radius)
  overflow: hidden

.card-header
  background-color: var(--card-header-background-color)
  align-items: stretch
  box-shadow: var(--card-header-shadow)
  display: flex

.card-header-title
  align-items: center
  color: var(--card-header-color)
  display: flex
  flex-grow: 1
  font-weight: var(--card-header-weight)
  padding: var(--card-header-padding)
  &.is-centered
    justify-content: center

.card-header-icon
  align-items: center
  cursor: pointer
  display: flex
  justify-content: center
  padding: var(--card-header-padding)

.card-image
  display: block
  position: relative

.card-content
  background-color: var(--card-content-background-color)
  padding: var(--card-content-padding)

.card-footer
  background-color: var(--card-footer-background-color)
  border-top: var(--card-footer-border-top)
  align-items: stretch
  display: flex

.card-footer-item
  align-items: center
  display: flex
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 0
  justify-content: center
  padding: var(--card-footer-padding)
  &:not(:last-child)
    +ltr-property("border", $card-footer-border-top)

// Combinations

.card
  .media:not(:last-child)
    margin-bottom: var(--card-media-margin)