Renders a bordered card for a concise record summary.
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>
<.summary_card > <:heading><.h2 as="h4-desktop">Jamie Chen</.h2></:heading> <:meta> <.meta_list> <:item>Sales manager</:item> <:item>2 locations</:item> </.meta_list> </:meta> <: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> <.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> </.summary_card>