Product Options

The product name, shown as the card's title.

Shown under the title, such as a short product summary.

The product price, shown beside the image.

The product shot; the shown colour's own image replaces it when it has one.

Alt text of the product shot; the title when left out.

The average rating out of 5; no stars show when left out.

How many reviews the rating is based on, shown beside the stars.

The colours to choose from as swatches; the colour picker hides when empty.

The sizes to choose from; the size picker hides when empty.

The most the quantity stepper allows.

Shown above the colour swatches.

Shown above the size buttons, and read before each size by screen readers.

Shown above the quantity stepper.

Shown on the button that adds the selection to the cart.

Screen-reader label of the heart button that saves the product to the wishlist.

Bare drops the edge, shadow and inset, for a section placed inside another Card.

Classes added to the part's own element, after its recipe classes.

The selected colour, by value; the first colour shows when none is.

The selected size, by value.

How many the shopper adds to the cart.

Fires when the shopper clicks the wishlist button.

Fires with the new value when colour changes; v-model:colour binds it.

Fires with the new value when size changes; v-model:size binds it.

Fires with the new value when quantity changes; v-model:quantity binds it.

Fires with the chosen colour, size and quantity when the shopper adds the product to the cart.

Carries the surface prop.