GroupCollect 1.3.252
- 1.1.0

Summary Card

Renders a bordered card for a concise record summary.

Read more Read less

The heading and optional metadata are grouped beside an optional action. The body accepts arbitrary content. Cards have a consistent minimum height on larger screens and shrink to their content below the medium breakpoint.

<.summary_card tag="li">
  <:heading><.h2 as="h4-desktop">Jamie Chen</.h2></:heading>
  <:meta><.meta_list><:item>Sales manager</:item></.meta_list></:meta>
  <:action><.action_menu id="contact-actions" label="Contact actions" /></:action>
  <.p>jamie@example.com</.p>
</.summary_card>
Attribute Type Documentation Default Value
class :any

Additional classes to add to the card.
[]
tag :string "article"
rest :global
Required heading * :slot 
<:heading><.h2 as="h4-desktop">Jamie Chen</.h2></:heading>
meta :slot 
<:meta>
  <.meta_list>
    <:item>Sales manager</:item>
    <:item>2 locations</:item>
  </.meta_list>
</:meta>
action :slot 
<:action>
  <.action_menu id="summary-card-actions" label="Contact actions" size="sm">
    <:item on_click={Phoenix.LiveView.JS.push("edit")}>Edit</:item>
  </.action_menu>
</:action>
Required inner_block * :slot 
<.stack space="2xs">
  <.cluster space="xs" align="center" class="gc-height-24">
    <.icon name="envelope-simple" size="2xs" class="gc-color-font-text-tertiary" />
    <.a href="mailto:jamie@example.com" size="sm" text-ellipsis>
      jamie@example.com
    </.a>
  </.cluster>
  <.cluster space="xs" align="center" class="gc-height-24">
    <.icon name="phone" size="2xs" class="gc-color-font-text-tertiary" />
    <.cluster space="2xs" align="center" class="gc-min-width-0">
      <span class="gc-type-sm gc-color-font-text-secondary">Work</span>
      <.a href="tel:+13035550100" size="sm" text-ellipsis>(303) 555-0100</.a>
    </.cluster>
  </.cluster>
  <.cluster space="xs" align="center" class="gc-height-24">
    <.icon name="device-mobile" size="2xs" class="gc-color-font-text-tertiary" />
    <.cluster space="2xs" align="center" class="gc-min-width-0">
      <span class="gc-type-sm gc-color-font-text-secondary">Mobile</span>
      <.a href="tel:+13035550101" size="sm" text-ellipsis>(303) 555-0101</.a>
    </.cluster>
  </.cluster>
  <.cluster space="xs" align="center" class="gc-height-24">
    <.icon name="printer" size="2xs" class="gc-color-font-text-tertiary" />
    <.cluster space="2xs" align="center" class="gc-min-width-0">
      <span class="gc-type-sm gc-color-font-text-secondary">Fax</span>
      <span class="gc-type-sm gc-color-font-text-secondary" text-ellipsis>
        (303) 555-0102
      </span>
    </.cluster>
  </.cluster>
</.stack>