@hummingbirdui/hummingbird/src/components/card.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility card {
  @layer base {
    --card-bg: var(--background-color-subtle);
    --card-color: var(--text-color-muted);
    --card-border-width: 1px;
    --card-border-color: var(--border-color-base);
    --card-border-radius: var(--radius-lg);
    --card-padding-x: --spacing(4);
    --card-padding-y: --spacing(4);
    --card-cap-padding-x: --spacing(2);
    --card-cap-padding-y: --spacing(2);
    --card-cap-bg: transparent;
    --card-cap-color: null;
    --card-title-color: var(--text-color-default);
    --card-title-space-y: --spacing(2);

    @apply relative flex flex-col min-w-0 wrap-break-word
    text-sm
    rounded-[var(--card-border-radius)]
    bg-[var(--card-bg)]
    text-[var(--card-color)]
    border-[length:var(--card-border-width)]
    border-[var(--card-border-color)];
  }
}
@utility card-action {
  @layer base {
    @apply cursor-pointer text-left transition-[background] duration-200 no-underline;
    @variant hover {
      --card-bg: var(--background-color-muted);
    }
  }
}
@utility card-aside {
  @layer base {
    @apply flex-row;
  }
}

@utility card-img-top {
  @layer base {
    @apply rounded-t-[var(--card-border-radius)] w-full;
  }
}
@utility card-img-bottom {
  @layer base {
    @apply rounded-b-[var(--card-border-radius)] w-full;
  }
}
@utility card-img-right {
  @layer base {
    @apply rounded-r-[var(--card-border-radius)] h-full object-cover;
  }
}
@utility card-img-left {
  @layer base {
    @apply rounded-l-[var(--card-border-radius)] h-full object-cover;
  }
}
@utility card-img {
  @layer base {
    @apply rounded-none w-full;
  }
}

@utility card-header {
  @layer base {
    @apply mb-0
    px-[var(--card-padding-x)] 
    py-[var(--card-padding-y)]
    text-[var(--card-cap-color)]
    bg-[var(--card-cap-bg)]
    border-b-[length:var(--card-border-width)]
    border-[var(--card-border-color)];
  }
}

@utility card-body {
  @layer base {
    @apply flex-[1_1_auto]
    px-[var(--card-padding-x)] 
    py-[var(--card-padding-y)];
  }
}

@utility card-footer {
  @layer base {
    @apply px-[var(--card-cap-padding-x)] 
    py-[var(--card-cap-padding-y)]
    text-[var(--card-cap-color)]
    bg-[var(--card-cap-bg)];
  }
}

@utility card-title {
  @layer base {
    @apply text-xl font-bold
    text-[var(--card-title-color)]
    mb-[var(--card-title-space-y)];
    &:has(+ .card-subtitle) {
      @apply mb-0;
    }
  }
}

@utility card-subtitle {
  @layer base {
    @apply text-base font-medium
    mb-[var(--card-title-space-y)];
  }
}

@utility card-text {
  @layer base {
    @apply text-sm;
  }
}

@utility card-img-overlay {
  @layer components {
    --card-title-color: var(--color-white);
    --card-border-width: 0px;
    @apply overflow-hidden rounded-lg;
    img {
      @apply brightness-[0.6];
    }
    .card-body {
      @apply absolute top-0 right-0 bottom-0 left-0
      p-[var(--card-padding-x)]
      rounded-[var(--card-border-radius)] text-white;
    }
  }
}