Overleaf/services/web/frontend/stylesheets/components/card.scss

%card-pattern-shared {
  border-radius: var(--border-radius-medium);
  color: var(--white);
  background-size: cover;

  h2 {
    @include heading-lg;
  }

  p {
    @include body-lg;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    color: var(--white);
  }

  .card-body {
    padding: var(--spacing-13);
  }
}

.card {
  --bs-card-bg: var(--white);
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--border-radius-base);
  --bs-card-spacer-x: var(--spacing-08);
  --bs-card-spacer-y: var(--spacing-08);

  .card-body {
    > :first-child {
      margin-top: 0;
    }

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

  &.card-dark-green-bg {
    background: var(--dark-jungle-green);
    border-radius: var(--border-radius-large);
    color: var(--green-10);

    .card-body {
      padding: var(--spacing-09);
    }

    a:not(.btn) {
      color: var(--green-30);

      &:hover {
        color: var(--green-30);
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    p {
      color: var(--green-10);
    }
  }

  &.card-purple-top-border {
    background-color: white;
    border-radius: var(--border-radius-medium);
    box-shadow:
      0 2px 4px 0 #1e253014,
      0 4px 12px 0 #1e25301f;
    border-top: 8px solid var(--sapphire-blue);

    .card-body {
      padding: var(--spacing-09) var(--spacing-10);
    }
  }

  &.card-premium-border {
    h1,
    h2,
    h3,
    h4,
    h5 {
      color: var(--blue-60);
    }

    border-radius: var(--spacing-04);
    border: 2px solid transparent;
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
        border-box;

    .card-body {
      padding: var(--spacing-10);
    }

    .btn {
      width: 100%;
    }
  }

  &.card-blue-border {
    h1,
    h2,
    h3,
    h4,
    h5 {
      color: var(--sapphire-blue);
    }

    background-color: white;
    border-radius: var(--spacing-04);
    border: 2px solid var(--sapphire-blue);

    .card-body {
      padding: var(--spacing-10);
    }

    .btn {
      width: 100%;
    }
  }

  &.card-pattern {
    @extend %card-pattern-shared;

    text-align: center;
    background-image:
      linear-gradient(
        to right,
        rgba(0 0 0 / 40%) 0%,
        var(--dark-jungle-green) 25%,
        var(--dark-jungle-green) 75%,
        rgba(0 0 0 / 40%) 100%
      ),
      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
  }

  &.card-pattern-left-only {
    @extend %card-pattern-shared;

    background-image:
      linear-gradient(
        to right,
        rgba(0 0 0 / 40%) 0%,
        var(--dark-jungle-green) 20%,
        var(--dark-jungle-green) 100%
      ),
      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
  }

  &.card-pattern-bottom {
    @extend %card-pattern-shared;

    text-align: center;
    background-image:
      linear-gradient(
        to top,
        rgba($dark-jungle-green, 0.75) 25%,
        rgba($dark-jungle-green, 1) 50%
      ),
      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');

    .card-body {
      color: var(--neutral-20);
      padding: var(--spacing-11);
    }
  }

  &.card-grey-border {
    background-color: white;
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--neutral-20);

    .card-body {
      padding: var(--spacing-10);
    }

    .btn {
      width: 100%;
    }
  }

  &.card-green-border {
    background-color: white;
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--green-50);

    .card-body {
      padding: var(--spacing-09);
    }
  }

  .card-icon-left {
    width: 52px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.card-gray {
  background-color: var(--neutral-10);
}

.card-gray-dark {
  background-color: var(--neutral-10);
  border-radius: var(--border-radius-base);

  .card-body {
    padding: var(--spacing-10) var(--spacing-09);
  }
}

.card-icon {
  display: flex;
  width: max-content;
  margin: 0 auto;
  padding: var(--spacing-08);
  border-radius: 50%;
  background-color: var(--bg-light-secondary);
  color: var(--content-secondary);

  .material-symbols {
    font-size: 2rem;
  }

  &.text-primary {
    background-color: var(--bg-accent-03);
  }

  &.text-danger {
    background-color: var(--bg-danger-03);
  }
}

.card-description-secondary {
  color: var(--content-secondary);
}