Detail page

The read view that pairs with the data table — click a row, land here. A page header with a breadcrumb and actions (including a tooltip and a confirm dialog), a row of stats, and tabs whose Overview panel pulls together a snippet, a progress bar, a collapsible section, a timeline, and an accordion.

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/detail.html

Components used

Page Header · Breadcrumb · Tooltip · Dialog · Stat · Tabs · Card · Snippet · Progress · Collapsible · Timeline · Accordion · Badge · Kbd