Blog Post

A blog post card teases an article and invites the click. It pairs a cover image with the title, a category or short excerpt, and the author's avatar and name, often rounded out with a date or reading time. Blog indexes, related article strips, and content marketing pages lay out posts in exactly these grids.

<div class="card">
  <img
    src="https://images.unsplash.com/photo-1592765213254-f101ad9b8f76?rect=0,0,3000,2000&amp;w=640&amp;h=427&amp;fit=crop&amp;auto=format&amp;q=100"
    alt="White blossoms in muted warm tones"
    class="aspect-3/2 w-full object-cover"
  />
  <div class="card-header">
    <span
      class="flex items-center gap-1.5 text-xs font-medium tracking-tight text-muted-foreground"
      ><span>Mar 15, 2024</span><span>·</span><span>Design</span></span
    >
    <h3 class="card-title">Finding Color Palettes in Nature</h3>
    <p class="card-description">
      How muted, organic tones from the natural world can ground the color
      system of your next project.
    </p>
  </div>
  <div class="card-footer gap-3">
    <span class="avatar avatar-lg"
      ><img
        class="avatar-image"
        src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&amp;h=640&amp;fit=facearea&amp;facepad=3.2&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5"
        alt="Leila Navarro"
      /><span class="avatar-fallback">LN</span></span
    >
    <div class="text-sm">
      <p class="font-medium text-foreground">Leila Navarro</p>
      <p class="text-muted-foreground">Product Designer</p>
    </div>
  </div>
</div>

Browse more card examples.