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

Semantic article component with structured title, meta, lead, body, and footer.

Encodes a common content pattern for blog posts, documentation pages,
news articles, and any long-form content with a consistent typographic
hierarchy.

## Examples

    <.article>
      <:title>Getting Started with PhiaUI</:title>
      <:meta>Published on March 9, 2026 · 5 min read</:meta>
      <:lead>A quick introduction to the PhiaUI component library.</:lead>
      <p>PhiaUI provides over 600 components...</p>
      <:footer>
        <span>Tags: elixir, phoenix, ui</span>
      </:footer>
    </.article>

## Slots

| Slot           | Required | Purpose                                    |
|----------------|----------|--------------------------------------------|
| `:title`       | yes      | Article heading (`<h1>`)                   |
| `:meta`        | no       | Author, date, reading time                 |
| `:lead`        | no       | Intro paragraph (larger, muted)            |
| `:inner_block` | yes      | Body content                               |
| `:footer`      | no       | Tags, share buttons, related links         |

# `article`

Renders a semantic `<article>` with structured typography.
## Attributes

* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<article>` element.
## Slots

* `title` (required) - Article heading rendered inside an `<h1>`.
* `meta` - Metadata row (author, date, reading time).
* `lead` - Introductory paragraph with larger, muted text.
* `inner_block` (required) - Article body content.
* `footer` - Footer area with border-top separator.

---

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