PhiaUi.Components.ImageCard (phia_ui v0.1.17)

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>

Summary

Functions

image_card(assigns)

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

Functions

image_card(assigns)

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).