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

Nights, rooms and rate can’t be blank

Subtotal

$0.00

Nights, rooms and rate can’t be blank

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=""
  label="Nights"
  show_error_messages={false}
  errors={["Nights is required"]}
  required={true}
/>
<.input
  type="number"
  name="rooms"
  value=""
  label="Rooms"
  show_error_messages={false}
  errors={["Rooms is required"]}
  required={true}
/>
<.input
  type="money"
  name="rate"
  value=""
  label="Rate"
  show_error_messages={false}
  errors={["Rate is required"]}
  required={true}
/>
<.line_item_card_subtotal errors={["Nights, rooms and rate can’t be blank"]}>
  $0.00
</.line_item_card_subtotal>