PhiaUi.Components.ColorSwatchCard (phia_ui v0.1.17)

Color swatch card component for displaying a named color with its hex, RGB, and HSL values, plus an optional one-click copy button.

Designed for design-system documentation pages, theme browsers, and any UI where users need to inspect or copy color values at a glance.

Anatomy

The card is a bordered rounded panel with two regions (top to bottom):

Swatch block — a solid-color div whose background-color is set from the hex attribute via an inline style. Height varies by size.
Info panel — shows name, monospace hex badge, optional rgb / hsl labels, a copy button (when copyable={true}), and a :tags slot.

Size reference

`:size`	Swatch height
`:sm`	`h-16` (64px)
`:md`	`h-24` (96px)
`:lg`	`h-32` (128px)

Copy button

When copyable={true} (default), a copy_button/1 is rendered beside the hex badge. Clicking it writes the hex value to the clipboard and shows a brief checkmark confirmation via the PhiaCopyButton JS hook.

Examples

<%!-- Minimal — just name and hex --%>
<.color_swatch_card name="Ocean Blue" hex="#1E90FF" />

<%!-- With all color formats and large swatch --%>
<.color_swatch_card
  name="Sunset"
  hex="#FF6B35"
  rgb="rgb(255, 107, 53)"
  hsl="hsl(18, 100%, 60%)"
  size={:lg}
/>

<%!-- No copy button, with tag slot --%>
<.color_swatch_card name="Forest" hex="#228B22" copyable={false}>
  <:tags>
    <.badge variant={:secondary}>nature</.badge>
  </:tags>
</.color_swatch_card>

Design system palette gallery

<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
  <%= for color <- @palette do %>
    <.color_swatch_card
      name={color.name}
      hex={color.hex}
      rgb={color.rgb}
    />
  <% end %>
</div>

Summary

Functions

color_swatch_card(assigns)

Renders a color swatch card displaying a color block with its name and hex value.

Functions

color_swatch_card(assigns)

Renders a color swatch card displaying a color block with its name and hex value.

Sizes

:sm — h-16 color block
:md — h-24 color block
:lg — h-32 color block

Examples

<.color_swatch_card name="Ocean Blue" hex="#1E90FF" />

<.color_swatch_card name="Sunset" hex="#FF6B35" rgb="rgb(255, 107, 53)" size={:lg} />

<.color_swatch_card name="Forest" hex="#228B22" copyable={false}>
  <:tags><span class="badge">nature</span></:tags>
</.color_swatch_card>

Attributes

name (:string) (required) - Color name (e.g. 'Ocean Blue').
hex (:string) (required) - Hex color value (e.g. '#1E90FF').
rgb (:string) - Optional RGB representation (e.g. 'rgb(30, 144, 255)'). Defaults to nil.
hsl (:string) - Optional HSL representation (e.g. 'hsl(210, 100%, 56%)'). Defaults to nil.
copyable (:boolean) - Whether to show a copy button for the hex value. Defaults to true.
size (:atom) - Size variant controlling swatch height. Defaults to :md. Must be one of :sm, :md, or :lg.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the wrapper element.

Slots

tags - Optional tags to display below the color info.