Transaction Card

The Transaction Card displays customer transaction details in a compact view.


React Component

Sage Component

SageTransactionCard
<%= sage_component SageTransactionCard, {
  label_color: "published",
  label_text: "Multi-Payment",
  name: "Lilly Jones",
  name_href: "https://kajabi.com",
  amount: "+ 450.00",
  amount_color: "sage",
  related_property: "Total Product Blueprint",
  related_property_href: "https://kajabi.com",
  transaction_state: "New",
  transaction_time: "10:32pm",
} %>
Property Description Type Default

name

Name of contact that initiated transaction.

String

nil

name_href

Optional link that gets applied to name

String

nil

name_tag

Sets the heading tag (h1 - h6) for the name

String

h4

amount

Amount of the transaction.

String

nil

amount_color

Color that can be applied to the transaction amount.

"red", "sage"

nil (grey)

label_color

Color of transaction label.

"published", "draft", "danger", "info", "warning", "locked"

nil

label_text

Text displayed in label.

String

nil

related_property

Text displayed in bottom left property area.

String

nil

related_property_href

Optional link that gets applied to related_property.

String

nil

transaction_state

Text that displays the state of transaction in top right corner

String

nil

transaction_state_color

Color that can be applied to the transaction_state.

"sage", "red"

nil (grey)

transacton_time

Time that transaction occured.

String

nil

Do
  • Rules for what you should do with this component go here.
Don't
  • Rules for what you should not do with this component go here.