PhiaUi.Components.EventCard (phia_ui v0.1.17)

Copy Markdown View Source

Card component for displaying an event with a colored date badge, time, location, attendee avatar stack, and optional actions slot.

Card layout

The card is a horizontal flex row:

  • Left panel — a deeply colored category_color block showing the abbreviated month and day number in white text.
  • Right panel — event title, time row (clock icon), location row (map-pin or video icon), attendee avatar stack with overflow count, and an optional :actions slot.

Category colors

:category_colorTailwind class
:primarybg-primary
:bluebg-blue-500
:emeraldbg-emerald-500
:amberbg-amber-500
:rosebg-rose-500
:violetbg-violet-500

Virtual events

Set virtual={true} for online/video events — this swaps the map-pin icon for a video icon in the location row.

Attendee avatars

Pass a list of %{src: url, name: string} maps to attendees. Up to max_attendees (default: 3) avatars are shown. Any overflow is displayed as "+N" text to the right of the stack.

Examples

<%!-- In-person team standup --%>
<.event_card
  title="Team Standup"
  month="MAR"
  day="15"
  time="9:00 AM"
  location="Conference Room A"
  category_color={:blue}
  attendees={[%{src: "/avatars/alice.jpg", name: "Alice"}, %{src: nil, name: "Bob"}]}
/>

<%!-- Virtual all-hands meeting --%>
<.event_card
  title="All-Hands Q1 Review"
  month="APR"
  day="1"
  time="2:00 PM"
  location="Zoom"
  virtual={true}
  category_color={:violet}
  attendees={Enum.map(@attendees, &%{src: &1.avatar_url, name: &1.name})}
/>

<%!-- Event with RSVP action buttons --%>
<.event_card title="Company Picnic" month="JUN" day="21" category_color={:emerald}>
  <:actions>
    <.button size={:sm}>Accept</.button>
    <.button size={:sm} variant={:outline}>Decline</.button>
  </:actions>
</.event_card>

Summary

Functions

event_card(assigns)

Renders an event card with a colored date badge and event details.

Functions

event_card(assigns)

Renders an event card with a colored date badge and event details.

The card is a horizontal flex row. Computes visible_attendees and overflow before rendering so callers don't need to paginate manually.

Examples

<%!-- In-person event --%>
<.event_card
  title="Team Standup"
  month="MAR"
  day="15"
  time="9:00 AM"
  location="Conference Room A"
  category_color={:blue}
  attendees={[%{src: "/avatars/alice.jpg", name: "Alice"}]}
/>

<%!-- Virtual event with action buttons --%>
<.event_card
  title="Board Meeting"
  month="APR"
  day="3"
  time="11:00 AM"
  location="Google Meet"
  virtual={true}
  category_color={:violet}
>
  <:actions>
    <.button size={:sm}>Join</.button>
  </:actions>
</.event_card>

Attributes

  • title (:string) (required) - Event title.
  • month (:string) - Abbreviated month label, e.g. "JAN". Defaults to nil.
  • day (:string) - Day of month, e.g. "15". Defaults to nil.
  • time (:string) - Event time string, e.g. "2:00 PM". Defaults to nil.
  • location (:string) - Event location or meeting link label. Defaults to nil.
  • virtual (:boolean) - When true, shows a video icon instead of map-pin. Defaults to false.
  • attendees (:list) - List of attendee maps with :src and :name keys. Defaults to [].
  • max_attendees (:integer) - Maximum number of attendee avatars to show before overflow. Defaults to 3.
  • category_color (:atom) - Color of the left date badge panel. Defaults to :primary. Must be one of :primary, :blue, :emerald, :amber, :rose, or :violet.
  • class (:string) - Additional CSS classes for the outer wrapper. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the outer wrapper element.

Slots

  • actions - Optional actions rendered at the bottom of the event card content.