Components
Card
Card
The container for everything - media, content, footer, composed from parts.
Composed from parts
The container for everything, assembled from parts: card_header carries title, description and a top-right :action; card_content and card_footer pad themselves so media can run full-bleed when you add it. The login card is the canonical composition.
Login to your account
Enter your email below to login
Email
Password
<.card class="w-full max-w-sm">
<.card_header title="Login to your account" description="Enter your email below to login">
<:action>
<.button color="gray" variant="ghost" size="sm" link_type="a" to="#">
Sign up
</.button>
</:action>
</.card_header>
<.card_content>
<div class="flex flex-col gap-4">
<.field type="email" name="email" value="" label="Email" placeholder="m@example.com" />
<.field type="password" name="password" value="" label="Password" />
</div>
</.card_content>
<.card_footer class="flex-col">
<.button class="w-full">Login</.button>
<.social_button provider="google" label="Login with Google" class="w-full" />
</.card_footer>
</.card>
The panel and the well
Two variants, two jobs: basic is the bordered panel that asserts - the only card most screens need - and muted is the quiet tinted well for secondary content, form sections and stat tiles. (variant="outline" still renders as a legacy alias of basic, going away in 5.0.)
Basic
The card
The bordered panel - primary content lives here. This is the default and
the only card most screens need.
Muted
The well
A quiet tinted fill, no border - secondary content, form sections, stat
tiles. It recedes where basic asserts.
<div class="grid w-full max-w-2xl gap-6 md:grid-cols-2">
<.card>
<.card_header title="Basic" description="The card" />
<.card_content>
The bordered panel - primary content lives here. This is the default and
the only card most screens need.
</.card_content>
</.card>
<.card variant="muted">
<.card_header title="Muted" description="The well" />
<.card_content>
A quiet tinted fill, no border - secondary content, form sections, stat
tiles. It recedes where basic asserts.
</.card_content>
</.card>
</div>
Properties
<.card>
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class |
rest
|
global |
||
variant
|
string |
"basic"
|
basic is THE card (bordered panel); muted is the tinted well for de-emphasised content. outline is a legacy alias of basic (identical look) slated for removal in a future major
one of: "basic", "outline", "muted"
|
:inner_block
slot
|
slot |
<.card_header>
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class |
description
|
string |
nil
|
a muted line under the title |
rest
|
global |
||
title
|
string |
nil
|
the card title |
:action
slot
|
slot |
top-right header content - a button, link or menu | |
:inner_block
slot
|
slot |
<.card_content>
| Attribute | Type | Default | Description |
|---|---|---|---|
category
|
string |
nil
|
creates a category |
category_color_class
|
any |
"pc-card__category--primary"
|
sets a category color class |
class
|
any |
nil
|
CSS class |
heading
|
string |
nil
|
creates a heading |
rest
|
global |
||
:inner_block
slot
|
slot |
<.card_footer>
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class |
rest
|
global |
||
:inner_block
slot
|
slot |
<.card_media>
| Attribute | Type | Default | Description |
|---|---|---|---|
alt
|
string |
nil
|
alt text for the image |
aspect_ratio_class
|
any |
"aspect-video"
|
aspect ratio class |
class
|
any |
nil
|
CSS class |
rest
|
global |
||
src
|
string |
nil
|
hosted image URL |
:inner_block
slot
|
slot |
<.review_card>
| Attribute | Type | Default | Description |
|---|---|---|---|
body*
|
string |
The review text content | |
class
|
string |
""
|
Additional classes |
img
|
string |
nil
|
URL of the reviewer's avatar; without one, a deterministic gradient monogram is hashed from the name - no photo assets required |
name*
|
string |
The reviewer's name | |
rest
|
global |
||
username*
|
string |
The reviewer's username |
Cards with media
Article
Enhance your Phoenix development
Cards with full-bleed media - card_content and card_footer pad themselves,
so the image runs edge to edge.
heex
<.card class="max-w-sm">
<.card_media src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=2070&q=80" />
<.card_content category="Article" heading="Enhance your Phoenix development">
Cards with full-bleed media - card_content and card_footer pad themselves,
so the image runs edge to edge.
</.card_content>
</.card>