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

Hero image (top-cover) + card content below.

Renders a `Card` with a full-width image at the top (aspect-ratio configurable)
followed by a `card_content` area for arbitrary content.

## Aspect ratios

| `:aspect`   | CSS applied           | Typical use                    |
|-------------|-----------------------|--------------------------------|
| `:video`    | `aspect-video` (16:9) | Blog covers, product previews  |
| `:square`   | `aspect-square` (1:1) | Avatar-style covers            |
| `:wide`     | `aspect-[2/1]`        | Landscape banners              |
| `:tall`     | `aspect-[3/4]`        | Portrait / book covers         |

## Overlay gradient

Set `overlay={true}` to apply a semi-transparent `from-black/60` gradient
from the bottom of the image. Useful when overlaying text or badges on top
of the image in a LiveView layout.

## Badge slot

The `:badge` slot is overlaid at the top-left corner of the image above the
gradient (z-index 10). Use it for labels like `"NEW"`, `"–20%"`, or a
`PhiaUi.Components.Badge` component.

## Examples

    <%!-- Simple product image card --%>
    <.image_card src="/images/product.jpg" alt="Wireless headphones">
      <h3 class="font-semibold">Wireless Headphones</h3>
      <p class="text-sm text-muted-foreground">Premium sound quality.</p>
    </.image_card>

    <%!-- Wide banner with gradient overlay and badge --%>
    <.image_card src="/images/banner.jpg" alt="Summer sale" aspect={:wide} overlay={true}>
      <:badge>
        <.badge variant={:destructive}>Sale</.badge>
      </:badge>
      <p class="font-semibold">Summer Sale — up to 50% off</p>
    </.image_card>

    <%!-- Square avatar-style card --%>
    <.image_card src="/images/avatar.jpg" alt="Jane Doe" aspect={:square}>
      <p class="text-center font-medium">Jane Doe</p>
    </.image_card>

# `image_card`

Renders a card with a hero image at the top followed by card content.

## Examples

    <.image_card src="/hero.jpg" alt="Product photo" aspect={:video}>
      <p>Product description here</p>
    </.image_card>

    <.image_card src="/banner.jpg" overlay={true}>
      <:badge><span class="text-xs text-white font-semibold">NEW</span></:badge>
      <p>Card content</p>
    </.image_card>

## Attributes

* `src` (`:string`) (required) - Image URL.
* `alt` (`:string`) - Alt text for the image. Defaults to `""`.
* `aspect` (`:atom`) - Aspect ratio of the image wrapper. Defaults to `:video`. Must be one of `:video`, `:square`, `:wide`, or `:tall`.
* `overlay` (`:boolean`) - Whether to apply a gradient overlay on the image. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the card element.
## Slots

* `inner_block` (required) - Card body content.
* `badge` - Optional badge overlaid on image (top-left).

---

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