Prototype – niet onderdeel van het ontwerpPrototype – not part of the design
Stalenpagina – randgevallen en componentstatussenSample page – edge cases and component states
Wat de stalenpagina anders doet dan de categoriepagina: de stalenkaart, het detailvenster met de winkelwagenknop en de filters voor hout en stof. De rest van de pagina gebruikt dezelfde componenten als de categoriepagina; die staan in de gids van de categoriepagina. Elke sectie eindigt met Voor ontwikkelaars.
What the Sample page does differently from the category page: the sample card, the detail modal with its cart button, and the filters for wood and fabric. The rest of the page uses the same components as the category page; those are in the category page guide. Every section ends with For developers.
Playground
Typ je eigen inhoud en zie direct wat de stalenkaart ermee doet. De breedte-schuif maakt alleen de kolom smaller; stijlen per breakpoint volgen het venster, dus maak het venster smaller voor de tablet- en telefoonstijl. Onder de preview staat de gerenderde HTML.
Type your own content and see what the sample card does with it. The width slider only narrows the column; breakpoint styles follow the window, so narrow the window for the tablet and phone styles. The rendered HTML sits under the preview.
Gerenderde HTMLRendered HTML
StalenkaartenSample cards
Hout- en stofstaal, met en zonder label, in de winkelwagen, extreme teksten, zonder afbeelding en laden. De kaarten werken zoals op de pagina: + zet het staal in de winkelwagen, een klik op de rest van de kaart opent het detailvenster.
Wood and fabric samples, with and without a tag, in the cart, extreme texts, without an image and loading. The cards work as on the page: + puts the sample in the cart, a click anywhere else on the card opens the detail modal.
Stilstaande kopieën van het venster naast elkaar: ontwerp, in de winkelwagen, lange titel en omschrijving, zonder omschrijving, zonder afbeelding. Het echte venster opent vanuit de stalenkaarten hierboven.
Static copies of the modal side by side: design, in the cart, long title and description, no description, without an image. The real modal opens from the sample cards above.
Filters
De filtergroepen van de stalenpagina: materiaal met afbeeldingen, tien stofstalen, en de opties die uitgaan zodra Stof en Bank gekozen zijn.
The Sample page's filter groups: material with images, ten fabric samples, and the options that switch off once Stof (fabric) and Bank (sofa) are picked.
GridstatussenGrid states
De meldingen van de stalenpagina en elke stand van de knop "Toon meer".
The Sample page's messages and every state of the "Toon meer" (show more) button.
Gedeeld met de categoriepaginaShared with the category page
Breadcrumb, intro, banners, inspiratie, knoppen en rich text zijn dezelfde componenten met andere inhoud. Hun randgevallen staan in de gids van de categoriepagina.
Breadcrumb, intro, banners, inspiration, buttons and rich text are the same components with other content. Their edge cases are in the category page guide.