infima/styles/components/card.css

A UI framework for content-centric websites.

:root {
  --ifm-card-background-color: var(--ifm-background-surface-color);
  --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
  --ifm-card-horizontal-spacing: var(--ifm-global-spacing);
  --ifm-card-vertical-spacing: var(--ifm-global-spacing);
}

.card {
  background-color: var(--ifm-card-background-color);
  border-radius: var(--ifm-card-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  overflow: hidden; // Because of border-radius.
  display: flex;
  flex-direction: column;

  &.card--full-height {
    height: 100%;
  }

  & .card__image {
    padding-top: var(--ifm-card-vertical-spacing);

    &:first-child {
      padding-top: 0;
    }
  }

  & .card__header,
  & .card__body,
  & .card__footer {
    padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);

    &:not(:last-child) {
      padding-bottom: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  & .card__footer {
    margin-top: auto; // Pushes the footer to the bottom of the card.
  }
}