Line Item

<sc-line-item></sc-line-item>

Line items are used to display a piece of information in the checkout form that contains currency (such as a price, total or subtotal). This is a low-level component used simply to display information - for more enhanced functionality (such as total and subtotal displaying) use those appropriate components.

Preview

<sc-line-item>
	<img src="https://placekitten.com/200/300" slot="image" />
	<span slot="title">Subscription </span>
	<sc-quantity-select quantity="1" max="10" slot="description"></sc-quantity-select>
	<span slot="price">$10.00</span>
	<span slot="price-description">Monthly</span>
</sc-line-item>
<sc-divider style="--spacing: 20px;"></sc-divider>
<sc-line-item>
	<img src="https://placekitten.com/200/300" slot="image" />
	<span slot="title">Subscription </span>
	<sc-quantity-select quantity="1" max="10" slot="description"></sc-quantity-select>
	<span slot="price">$10.00</span>
	<span slot="price-description">Monthly</span>
</sc-line-item>

Code

TotalTotal Price Description$10.00Monthly

Product Line Item

The line item also accepts an image, as well as different components in different slots, so you can be creative with your markup to create and enhance UI.

Preview

<sc-line-item>
	<img src="https://placekitten.com/200/300" slot="image" />
	<span slot="title">Monthly Box of Kittens</span>
	<sc-quantity-select
		quantity="1"
		max="10"
		slot="description"
	></sc-quantity-select>
	<span slot="price">$10.00</span>
	<span slot="price-description">Monthly</span>
</sc-line-item>

Code

Monthly Box of Kittens$10.00Monthly

Component Codex

Properties

Property	Description	Type	Default
currency	Currency symbol	string
price	Price of the item	string

Slots

Slot	Description
currency	Used for the 3 character currency code.
description	Line item description (below the title)
image	Line item image
price	Price amount, including currency sign.
price-description	Description for the price (i.e. monthly)
title	Line item title.

Shadow Parts

Part	Description
base	The elements base wrapper.
currency	Used for the 3 character currency code.
description	Line item description (below the title)
image	The image wrapper.
price	Price amount, including currency sign.
price-description	Description for the price (i.e. monthly)
price-text	The price text.
text	The text.
title	The title.

Used By

• sc-coupon-form
• sc-line-item-bump
• sc-line-item-shipping
• sc-line-item-tax
• sc-line-item-total
• sc-line-items
• sc-order
• sc-order-confirmation-details
• sc-order-confirmation-line-items
• sc-order-confirmation-totals
• sc-order-summary
• sc-product-line-item
• sc-subscription-next-payment
• sc-upcoming-invoice