hb-shop-item-row — shop item row

Category: commerce
Tags: commerce, product

What it does

Horizontal shop product card: image with optional badge, linked title and metadata, description, star rating scale with numeric rating and reviews link, current and strikethrough prices, and optional footer—all overridable via named slots.

Custom element

hb-shop-item-row

Attributes (snake_case; use string values in HTML)

• id, style (optional): strings.
• img, url, badge, title, subtitle, text, reviews, reviewsurl, price, regularprice, footer (required in types): strings.
• rating, ratingscale (required): numbers as strings.

Events

None declared.

Styling (Bulma)

The component bundles cherry-picked Bulma 1 Sass modules scoped to :host (see styles/bulma.scss). Theme defaults are applied via Bulma’s light theme and setup-theme. Override appearance from the light DOM by setting public --bulma-* custom properties on body or :root; they inherit into the shadow root. Documented tokens include --bulma-primary, --bulma-text, --bulma-card-background-color, --bulma-border, and --bulma-shadow (see extra/docs.ts).

Usage notes

• Slots: badge, title, subtitle, text, reviews, price, footer, regularprice.
• Storybook exposes action for demos only; it is not on the Component type.

Minimal HTML example

<hb-shop-item-row
  img="https://placehold.co/96"
  url="/p/1"
  badge="New"
  title="Product"
  subtitle="Vendor"
  text="One line pitch."
  rating="5"
  ratingscale="5"
  reviews="3"
  reviewsurl="/p/1#reviews"
  price="€9"
  regularprice="€12"
  footer=""
></hb-shop-item-row>