Line Item Card

Renders a line item card.

Read more Read less

For stacked content, use line_item_card_row/1 for each repeated item. This lets the card align columns and show errors beneath each row on desktop, then place each error before its subtotal on mobile.

Double double

Subtotal

$3,200.00

Attribute Type Documentation Default Value
Required id * :string
surface :string "grey"
content_layout :string

Controls whether the card content is arranged inline or in stacked rows.

"inline"
Required title * :string
class :any

Additional classes to add to the parent.

[]
errors :list

Errors to display below the card.

[]
on_close %JS{} %Phoenix.LiveView.JS{ops: []}
rest :global
Required inner_block * :slot
<.input
  type="number"
  name="nights"
  value="4"
  label="Nights"
  show_error_messages={false}
  required={true}
/>
<.input
  type="number"
  name="rooms"
  value="4"
  label="Rooms"
  show_error_messages={false}
  required={true}
/>
<.input
  type="money"
  name="rate"
  value="200"
  label="Rate"
  show_error_messages={false}
  required={true}
/>
<.line_item_card_subtotal>$3,200.00</.line_item_card_subtotal>