Card.astro

---
/**
 * Card Component
 *
 * @description A versatile card component with image, title, and content areas
 */
interface Props extends astroHTML.JSX.HTMLAttributes {
  /**
   * URL for the card's link
   */
  url?: string
  /**
   * URL for the card's image
   */
  img?: string
  /**
   * Card's title
   */
  title?: string
  /**
   * Footer content
   */
  footer?: string
  /**
   * Additional classes to apply to the card
   */
  class?: string
  /**
   * HTML tag to use for the title
   */
  tagName?: string
}

const {
  url = '#',
  img = 'https://fakeimg.pl/640x360',
  title = 'Default title',
  footer = '',
  class: className,
  tagName = 'h3',
  ...rest
} = Astro.props

const Tag = tagName
---

<article class:list={['card', className]} {...rest}>
  <div class="image">
    <img src={img} alt="" />
  </div>
  <div class="content">
    <div class="title">
      <Tag>
        <a href={url}>{title}</a>
      </Tag>
    </div>
    <div class="meta"><slot name="meta" /></div>
    <p class="description"><slot /></p>
    {footer && <small class="footer">{footer}</small>}
  </div>
</article>

<style>
  :where(.card) {
    --transition-duration: 0.3s;
    --transition-easing: cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;
    position: relative;
    flex-direction: column;
    border: 2px solid light-dark(hsl(0 0% 10%), hsl(0 0% 90%));
    border-radius: 0.5rem;
    max-inline-size: 60ch;
    block-size: 100%;
    overflow: hidden;

    @media (prefers-reduced-motion: no-preference) {
      transition: box-shadow var(--transition-duration) var(--transition-easing);
    }
  }

  :where(.card:hover),
  :where(.card:focus-within) {
    box-shadow: 0 0 0 0.25rem;
  }

  :where(.card:focus-within) a:focus {
    outline: none;
    box-shadow: none;
    text-decoration: none;
  }

  :where(.image) {
    block-size: 250px;
    overflow: clip;
  }

  :where(.image img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;

    @media (prefers-reduced-motion: no-preference) {
      transition: transform var(--transition-duration) var(--transition-easing);
    }
  }

  :where(.content) {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: 1rem;
    padding-block: 1rem;
  }

  a {
    color: currentColor;
    font-size: 1.5rem;
    text-decoration: none;
  }

  a:where(:hover, :focus-visible) {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  :where(.card:has(a:hover, a:focus-visible)) .image img {
    transform: scale(1.05);
  }

  a::after {
    position: absolute;
    inset: 0;
    content: '';
  }

  :where(.meta) {
    order: -1;
    margin-block-start: 0.5rem;
  }

  .meta :global(span) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .meta:empty {
    display: none;
  }

  .description {
    font-size: 1rem;
  }

  .description:empty {
    display: none;
  }

  .footer {
    margin-block-start: auto;
    padding-block-start: 1rem;
  }
</style>