Components¶
This section documents the reusable front-end components used across the Zwerfkei storefront. Each component page covers its props, visual states, behaviour, and a usage example.
-
Product Block
Card-style component for displaying a single product in listing contexts such as category pages, search results, and recommendation rows.
-
Product Card
Reusable molecule that presents a single product — image, name, price, badges, stock, and inline actions — inside sliders, listing grids, the compare view, and the cart dialog.
-
Navigation
Global header organism governing category menus, mega-menu dropdowns, mobile accordion links, search suggest routing, wishlist indicators, and cart triggers.
-
Product Listing Overview
Organism representing the product listing page (PLP), composing sorting options, active filter sidebar accordions, a layout reset control, product listing grid, and pagination.
Component conventions¶
Props are typed
All component props are documented with their type, whether they are required, and a short description. Nested object props are shown in tabbed sections.
Visual states
Each page includes a Visual States table listing all meaningful UI states and the prop conditions that trigger them.
Examples
Full JSON examples are included in collapsible blocks so you can copy a realistic payload directly into your work.