Packages
petal_components
4.3.0
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/card.ex
defmodule PetalComponents.Card do
use Phoenix.Component
import PetalComponents.Avatar
import PetalComponents.Typography
attr(:class, :any, default: nil, doc: "CSS class")
attr(:variant, :string, default: "basic", values: ["basic", "outline"])
attr(:rest, :global)
slot(:inner_block, required: false)
def card(assigns) do
~H"""
<div {@rest} class={["pc-card", "pc-card--#{@variant}", @class]}>
<div class="pc-card__inner">
{render_slot(@inner_block)}
</div>
</div>
"""
end
attr(:aspect_ratio_class, :any, default: "aspect-video", doc: "aspect ratio class")
attr(:src, :string, default: nil, doc: "hosted image URL")
attr(:class, :any, default: nil, doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)
def card_media(assigns) do
~H"""
<%= if @src do %>
<img {@rest} src={@src} class={["pc-card__image", @aspect_ratio_class, @class]} />
<% else %>
<div {@rest} class={["pc-card__image-placeholder", @aspect_ratio_class, @class]}></div>
<% end %>
"""
end
attr(:heading, :string, default: nil, doc: "creates a heading")
attr(:category, :string, default: nil, doc: "creates a category")
attr(:category_color_class, :any,
default: "pc-card__category--primary",
doc: "sets a category color class"
)
attr(:class, :any, default: nil, doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)
def card_content(assigns) do
~H"""
<div {@rest} class={["pc-card__content", @class]}>
<div :if={@category} class={["pc-card__category", @category_color_class]}>
{@category}
</div>
<div :if={@heading} class="pc-card__heading">
{@heading}
</div>
{render_slot(@inner_block)}
</div>
"""
end
attr(:class, :any, default: nil, doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)
def card_footer(assigns) do
~H"""
<div {@rest} class={["pc-card__footer", @class]}>
{render_slot(@inner_block)}
</div>
"""
end
attr(:name, :string, required: true, doc: "The reviewer's name")
attr(:username, :string, required: true, doc: "The reviewer's username")
attr(:img, :string, required: true, doc: "URL of the reviewer's avatar")
attr(:body, :string, required: true, doc: "The review text content")
attr(:class, :string, default: "", doc: "Additional classes")
attr(:rest, :global)
def review_card(assigns) do
~H"""
<figure class={["pc-review-card", @class]} {@rest}>
<div class="pc-review-header">
<.avatar src={@img} alt={@name} size="md" />
<div class="pc-review-meta">
<figcaption>
<.p no_margin class="text-sm pc-review-name">{@name}</.p>
</figcaption>
<p class="pc-review-username">{@username}</p>
</div>
</div>
<blockquote class="pc-review-body">
<.p class="text-sm" no_margin>{@body}</.p>
</blockquote>
</figure>
"""
end
end