Templates
19 complete pages built with Deck 0.1.3. Each one is a single HTML file you can open in a browser right now — no build step, no package install, nothing to compile. Copy the file, repoint the paths at your copy of Deck, and start deleting the parts you do not want.
Complete marketing sites, top bar to footer, each in its own brand colour — which in Deck is one number.
The marketing page most projects need first: a hero whose screenshot is built from Deck components, bento features, testimonials, three-plan pricing with a billing toggle, and an FAQ.
A storefront with a mega menu, a split hero with a floating product card, category tiles, a filterable product grid with sale prices, a bestsellers carousel and a promo bento.
Navy, ivory and one serif: an editorial hero, a numbered practice grid, an impact band that stays dark in both themes, partner portraits and a consultation form.
A dark hero whose monitoring console is built entirely from Deck components, a services bento with inline charts, per-seat pricing with a billing toggle, and an FAQ.
An independent garage: open-now status worked out in the shop's own time zone, a booking card over the hero photo, a price table and a map drawn in CSS.
An agency whose hero dashboard is Deck charts, not a screenshot: a services bento, case studies led by the metric, a channel switcher built from radios, and a free-audit form.
A boutique agency: a full-bleed hero with a booking bar that restacks on a phone, a destination mosaic, a filterable trips carousel and a day-by-day itinerary.
One screen at 100dvh: a photo, a glass top bar, a waitlist form and a countdown in minutes, not seconds. Nothing scrolls unless the screen is very short.
The pages that take money. The store, product and checkout pages are one shop and link to each other.
A gallery driven by thumbnails, colour and size pickers on real radios, a quantity stepper, a review breakdown, and a phone buy bar that appears once Add scrolls away.
One page, four steps: express wallets, address fields with the autocomplete tokens browsers fill, shipping as cards, and an order summary that folds away on a phone.
Four plans with a monthly and annual toggle built from real radios, a comparison table that scrolls both ways on a phone without losing its headers, add-ons and a billing FAQ.
One app, four screens, sharing a top bar, a sidebar, a phone tab bar and a drawer. Click between them.
The skeleton the other app screens share: a top bar with search and menus, a sticky sidebar, and a tab bar plus drawer on phones. Paste your screen into the middle.
Sparkline stat tiles, an area chart with a working 7, 30 and 90-day range, columns, bars, a donut, goal rings and a table that restacks below 40rem. No charting library anywhere.
Deck's core form controls in label-left rows, a save bar that clears the tab bar and the home indicator, a hue slider that retunes the palette live, and a delete you must type to confirm.
Single sign-on, a real form the password manager saves from, a password reveal, and an error state wired up for screen readers. The brand panel steps aside on phones.
Several takes on one section per page, each self-contained, each with a button that copies its HTML.
Seven sidebars in working app windows: grouped links, an icon rail with tooltips, an always-dark one, a floating card, two-level chat nav, a docs tree and a real drawer.
Eight footers, from a one-liner to a dark mega footer, with a newsletter signup, an overlapping call to action, opening hours beside a CSS map, and an accordion for phones.
Eight heroes, from a mesh-washed centred pitch to an always-dark product hero whose app window is built from Deck's own sidebar, stats and chart.
Seven carousels on one scroll-snap component: a hero slider with a pause button, a product row, a thumbnail gallery driven by the carousel API, and a coverflow of books.
Save the file, change the paths, open it. There is no step three, because there is nothing to build.
Every template loads Deck with tags near the top. They point two folders up, which is where Deck sits on this site. Repoint them at wherever you put Deck and the rest of the file works unchanged. Templates with a carousel, a drawer or a quantity stepper load the optional extras file as well:
<link rel="stylesheet" href="../assets/deck/deck.css">
<script src="../assets/deck/deck.js" defer></script>
<script src="../assets/deck/deck-extras.js" defer></script>
Icons are the one thing that needs care. They are referenced as
../assets/deck/deck-icons.svg#name, and that file has to be
served from your own site. A cross-origin <use href> is
blocked by the browser and renders nothing at all — so a CDN URL works
perfectly for the stylesheet and silently fails for icons.
Deliberately. A plain HTML file drops into Rails, Django, Go, Laravel,
Astro, a static site, or nothing at all. Rename to
.php and it keeps working.
Templates that use photography load it from Unsplash so the preview looks finished. Swap in your own images before you ship; every image has its width and height set, so the layout does not move when you do.
Only classes Deck actually ships, plus a short page-local style block in
@layer app.pages where a layout needs one. The build fails if
a template uses a class that is neither, so nothing here can quietly rot
when a class is renamed — the same check that keeps the documentation
honest covers these files too.
Everything is MIT licensed, like Deck itself. Use them commercially, change them, ship them, no attribution needed.