GroupCollect 1.3.215
- 1.1.0

Details Card

Renders a details card component.

Read more Read less

Supports an optional action with ‘icon’ and ‘click’ attributes.

Examples

<.details_card title="Contact info">
  <:detail label="Full name">
    Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>

<.details_card title="Contact info">
  <:action icon="pencil" click={JS.push("...")}>Edit</:action>
  <:detail label="Full name">
    Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>

flat variant: renders a titleless, shadowless read-only card. Use the :remove slot to add an icon-only trash button (its label is the accessible name). The slot is optional; omit it for a card with no remove action:

<.details_card variant="flat">
  <:remove label="Remove contact" on_click={JS.push("remove")} />
  <:detail label="Full name">
    Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>
A plain card with no action Open in playground

Contact info

Full name

Mary Jane Francis

Email

mjfrancis@freshvegetables.com

Role

Sales Manager 

<.details_card title="Contact info">
  <:detail label="Full name">
    Mary Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>
A card with a clickable action Open in playground

Contact info

Full name

Mary Jane Francis

Email

mjfrancis@freshvegetables.com

Role

Sales Manager 

<.details_card title="Contact info">
  <:action icon="pencil-simple-line" on_click={JS.toggle(to: "#with-clickable-action .details-card-click-demo")}>Edit</:action>
  <:detail label="Full name">
    Mary Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>
A card with a linkable action Open in playground

Contact info

Full name

Mary Jane Francis

Email

mjfrancis@freshvegetables.com

Role

Sales Manager 

<.details_card title="Contact info">
  <:action icon="pencil-simple-line" href="https://groupcollect.com/">Edit</:action>
  <:detail label="Full name">
    Mary Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>
A read-only flat card with an icon-only remove action Open in playground

Full name

Mary Jane Francis

Email

mjfrancis@freshvegetables.com

Role

Sales Manager 

<.details_card variant="flat">
  <:remove label="Remove contact" on_click={JS.toggle(to: "#flat .details-card-click-demo")} />
  <:detail label="Full name">
    Mary Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>