Checkout

A multi-step purchase flow. A stepper tracks progress through cart → shipping → payment, a two-column layout pairs the form with a sticky order summary, and the form itself uses fields, a select, a radio group, a date picker, and an alert reassuring the buyer. The summary totals it up with a divider and a badge for the discount.

Preview full screen

Use it

This example is one self-contained file. Link the JLDS stylesheets and the behavior bundle from the CDN, then paste the markup. See Vanilla HTML for the full workflow.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/all.css">
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/all.js" defer></script>

curl -O https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/examples/checkout.html

Components used

Stepper · Card · Field · Input · Select · Radio Group · Date Picker · Alert · Divider · Badge · Button