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>

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>

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>

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>