CSS Class Reference

Every CSS class managed by the SDK, grouped by category.

Cart State

Class	Applied to	When
`next-in-cart`	Elements with `data-next-package-id`	The package is currently in the cart
`next-active`	Toggle buttons (`data-next-toggle="cart"`)	The toggle is in its "active" state (item is in cart)

.product-card.next-in-cart {
  border-color: #28a745;
  background: #f8fff9;
}

button[data-next-toggle].next-in-cart {
  background: red;
}

Selection State

Class	Applied to	When
`next-selected`	Selector cards	Currently selected card
`next-selector-active`	Selector container	The container has at least one active selection

[data-next-selector-card].next-selected {
  border: 2px solid blue;
  background: #f0f8ff;
}

[data-next-cart-selector].next-selector-active .placeholder {
  display: none;
}

Action State

Class	Applied to	When
`next-loading`	Action buttons	An async action is in flight
`next-disabled`	Action buttons	The action cannot be triggered (no order, no selection, etc.)

button.next-loading {
  opacity: 0.6;
  cursor: wait;
}

button.next-disabled {
  opacity: 0.4;
  pointer-events: none;
}

The native disabled attribute is also added/removed alongside next-disabled.

Page Load State

Class	Applied to	When
`next-display-ready`	`<html>`	After the SDK's first DOM scan completes
`next-loading`	`<html>`	While initial campaign data is loading

/* Hide displays until SDK is ready */
html:not(.next-display-ready) [data-next-display] {
  visibility: hidden;
}

See Loading States for the full skeleton pattern.

Order Load State

Class	Applied to	When
`next-loaded`	Page elements bound to order data	Order successfully loaded from `?ref_id=`
`next-error`	Page elements bound to order data	Order failed to load

.order-content.next-loaded { display: block; }
.order-content.next-error  { color: red; }

Variant State (Bundle Selectors)

Class	Applied to	When
`next-variant-selected`	Variant option element	Option is selected for that attribute
`next-variant-unavailable`	Variant option element	Combination is unavailable

These are managed by BundleSelectorEnhancer. See Bundle Selector → Variants.

Bundle Selector State

Class	Applied to	When
`next-bundle-card`	Each registered bundle card	On registration
`next-loading`	Bundle card	A price fetch is in flight for that card

See Bundle Selector → CSS.

Upsell State

Class	Applied to	When
`next-processing`	Offer container (`data-next-upsell="offer"`)	API call is in flight
`next-success`	Offer container	API call succeeded; awaiting redirect
`next-skipped`	Offer container	A skip button was clicked

See Upsells → CSS.

Class Override Attributes

Some enhancers let you replace the default class names. For example, on a bundle selector:

Attribute	Replaces
`data-next-class-selected`	`next-selected`
`data-next-class-in-cart`	`next-in-cart`
`data-next-class-bundle-card`	`next-bundle-card`

See the per-feature reference pages for the full list of class override attributes.

On this page