os-cart-slideout (Cart Slideout)

What it is

os-cart-slideout renders the cart overlay and slideout panel, including line items, quantity controls, and checkout/continue actions.

Tag name

os-cart-slideout (Cart Slideout)

Attributes / parameters

None.

Usage

HTML

index.html

<os-cart-slideout></os-cart-slideout>

Webflow

Embed block

<os-cart-slideout></os-cart-slideout>

React

App.jsx

export default function App() {
    return <os-cart-slideout></os-cart-slideout>;
}

Screenshot

Styling (CSS variables)

These are in addition to the global tokens inherited by every component.

Panel & layout

CSS variable	Default
--os-cart-width	375px
--os-cart-bg	#fff
--os-cart-shadow	0 2px 16px rgba(0, 0, 0, 0.12)
--os-cart-overlay-bg	#0c0c0dbf
--os-cart-title-color	var(--os-foreground)
--os-cart-title-size	18px
--os-cart-title-weight	500
--os-cart-title-line-height	1
--os-cart-section-title-color	var(--os-foreground)
--os-cart-section-title-size	14px
--os-cart-section-title-weight	500
--os-cart-section-title-line-height	1
--os-cart-section-divider-color	var(--os-border)

Empty state

CSS variable	Default
--os-cart-empty-header-color	var(--os-foreground)
--os-cart-empty-header-size	24px
--os-cart-empty-header-weight	600
--os-cart-empty-subheader-color	var(--os-foreground)
--os-cart-empty-subheader-size	14px

Summary rows

CSS variable	Default
--os-cart-summary-padding	12px 8px
--os-cart-summary-row-color	var(--os-muted-foreground)
--os-cart-summary-row-size	14px
--os-cart-summary-row-value-color	var(--os-foreground)
--os-cart-summary-total-color	var(--os-foreground)
--os-cart-summary-note-color	var(--os-muted-foreground)
--os-cart-summary-actions-total-row-color	var(--os-foreground)
--os-cart-summary-actions-total-row-size	14px
--os-cart-summary-actions-total-row-weight	normal
--os-cart-summary-actions-total-row-total-weight	600
--os-cart-summary-actions-total-row-line-height	1.43

Buttons (checkout & continue)

CSS variable	Default
--os-cart-btn-radius	8px
--os-cart-btn-primary-bg	var(--os-primary)
--os-cart-btn-primary-bg-hover	#0299c6
--os-cart-btn-primary-bg-active	#027fa3
--os-cart-btn-primary-color	#fff
--os-cart-btn-link-color	var(--os-foreground)
--os-cart-btn-link-bg-active	var(--os-border)

Cart item (per line)

CSS variable	Default
--os-cart-item-padding	6px 12px
--os-cart-item-image-border	1px solid var(--os-border)
--os-cart-item-image-radius	6px
--os-cart-item-name-color	var(--os-foreground)
--os-cart-item-name-size	16px
--os-cart-item-name-weight	500
--os-cart-item-name-line-height	1
--os-cart-item-desc-color	var(--os-muted-foreground)
--os-cart-item-desc-size	14px
--os-cart-item-desc-line-height	1.43
--os-cart-item-price-color	var(--os-foreground)
--os-cart-item-price-size	14px
--os-cart-item-price-weight	500
--os-cart-item-original-price-color	var(--os-muted-foreground)
--os-cart-item-original-price-size	12px
--os-cart-item-frequency-border	1px solid var(--os-border)
--os-cart-item-frequency-color	#025712
--os-cart-item-qty-color	var(--os-foreground)
--os-cart-item-qty-padding	2px
--os-cart-item-qty-border-hover	var(--os-border)
--os-cart-item-qty-border-focus-shadow	0 0 0 3px rgba(59, 130, 246, 0.1)
--os-cart-item-subscribe-bg	transparent
--os-cart-item-subscribe-bg-hover	var(--os-border)
--os-cart-item-subscribe-bg-active	#cbd5e1
--os-cart-item-subscribe-color	var(--os-foreground)
--os-cart-item-subscribe-border	1px solid var(--os-border)
--os-cart-item-subscribe-radius	8px
--os-cart-item-subscribe-padding	0px 12px
--os-cart-item-subscribe-size	14px

Quantity select

CSS variable	Default
--os-select-background-color	#ffffff
--os-select-border-color	var(--os-border)
--os-select-hover-background-color	#f0f0f0
--os-select-checked-background-color	#f0f0f0
--os-select-checkmark-color	#025712
--os-select-font-size	16px

Loading spinner

CSS variable	Default
--os-spinner-color	#3b82f6
--os-spinner-size	12px

Related components

Cart Button The toggle that opens this slideout from anywhere on your page.

Product List Surface products that customers can add into this cart.