Renders a blog post / article preview card.

The card is composed of three optional regions rendered in this order:

1. Cover image — a full-width hero image with 16:9 aspect-video ratio (only when cover_src is provided).
2. Card content area containing (top to bottom):
   • Category badge (PhiaUi.Components.Badge with :secondary variant)
   • Meta row: date · read_time (both optional, dot separator auto-inserted)
   • Title as an <h2> — wraps in <a> when href is provided
   • Excerpt paragraph (line-clamped to 3 lines)
   • Author row: avatar + name

All fields except title are optional — use only what your data model provides.

Examples

<%!-- Minimal: just a title --%>
<.article_card title="Getting Started with Elixir" />

<%!-- Blog post card with cover image, meta, and author --%>
<.article_card
  title="Getting Started with Elixir"
  href="/posts/getting-started"
  cover_src="/images/elixir-cover.jpg"
  cover_alt="Elixir logo on a dark background"
  category="Tutorial"
  date="Mar 6, 2026"
  read_time="5 min read"
  excerpt="Learn the basics of Elixir in this hands-on guide."
  author_name="Alice"
  author_src="/avatars/alice.jpg"
/>

<%!-- News card without cover image --%>
<.article_card
  title="PhiaUI 1.0 Released"
  category="Announcement"
  date="Mar 1, 2026"
  excerpt="PhiaUI brings shadcn/ui-style components to Phoenix LiveView."
  href="/news/phia-ui-1-0"
  author_name="Bob"
/>

<%!-- Card grid for a blog index page --%>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <.article_card
    :for={post <- @posts}
    title={post.title}
    href={~p"/posts/#{post.slug}"}
    cover_src={post.cover_url}
    category={post.category}
    date={Calendar.strftime(post.published_at, "%b %d, %Y")}
    read_time={"#{post.read_time} min read"}
    excerpt={post.excerpt}
    author_name={post.author.name}
    author_src={post.author.avatar_url}
  />
</div>

Attributes

• title (:string) (required) - Article title.
• href (:string) - Optional URL — wraps the title in a link. Defaults to nil.
• cover_src (:string) - Cover image URL. Defaults to nil.
• cover_alt (:string) - Cover image alt text. Defaults to "".
• category (:string) - Category label shown as a badge. Defaults to nil.
• date (:string) - Publication date string. Defaults to nil.
• read_time (:string) - Estimated read time (e.g. '5 min read'). Defaults to nil.
• excerpt (:string) - Short preview text (line-clamped). Defaults to nil.
• author_name (:string) - Author display name. Defaults to nil.
• author_src (:string) - Author avatar image URL. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the outer card.