# `PhiaUi.Components.ArticleCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/article_card.ex#L1)

ArticleCard — a blog post / article preview card.

Supports an optional cover image, category badge, meta row (date · read time),
title with optional link, excerpt, and author row.

## Examples

    <.article_card
      title="Getting Started with Elixir"
      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"
      href="/posts/getting-started"
    />

    <.article_card title="News" cover_src="/img/news.jpg" cover_alt="Newsroom" />

# `article_card`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*