Designers Italia is broader than a CSS package: it includes service design guidance, kits and implementation resources. This specimen focuses on the documented Bootstrap Italia implementation, pinned to 2.18.3. It does not imply that installing the library completes a public service design or satisfies every requirement for a municipal website.
Bootstrap Italia includes and customizes Bootstrap 5.2.3 in the inspected release. Do not layer a second stock Bootstrap bundle on top. The preview uses its native CSS and locally supplied Titillium Web font files, with an original three-stage library-visit planning flow.
Titillium Web is the normal interface family. Lora is the serif option for longer reading and Roboto Mono handles code or fixed-width material. The preview loads the actual Titillium Web weights it uses, retaining the font license rather than silently substituting a system font.
The body remains 16px. Headings change at 576px: H1 is 40px with 48px leading on a small screen, then 48px with 56px leading in the installed CSS. The documentation table gives 60px desktop leading; the reference table here records the inspected release and explains the discrepancy instead of mixing two sources.
Design System .italia Responsive stages and spacing
Two breakpoints solve different problems
The typography threshold is 576px, while the Stepper changes its header presentation below 992px. On compact screens, the current label and n/total index remain visible. The other stage names are not squeezed into unreadable columns. A mobile visitor still needs a current-stage announcement, which the example supplies through heading focus and accessible state text.
Spacing utilities follow the verified rem scale: 4, 8, 16, 24 and 48px for sizes 1 through 5 at a normal root size. The grid container maxima include 1176px at xl, rather than the stock Bootstrap value often copied from memory. The independent plan uses a narrower 900px cap as an explicit application choice.
Design System .italia Stepper anatomy and ownership
The header does not drive the workflow
The documented structure separates steppers-header, steppers-content and steppers-nav. Header list items receive confirmed and active classes; the index reports position. Previous and next buttons receive their specific classes. These classes describe presentation. The application must decide whether the current form is valid and whether a later stage can be entered.
The example uses ordinary sections for each step and keeps controls in the DOM, hiding inactive sections. Returning to the access-note step therefore preserves the note. A review step reads the existing controls; it does not recreate them from a guessed server result.
Design System .italia Validation and meaningful progress
Advance only after the required choice
Visit type is required. Continue without choosing it leaves the first step active, reveals a specific error and focuses the first radio. Choosing a type and continuing marks the first stage complete. The optional note can remain blank, in which case the review says that no note was added.
Back moves to the previous stage without clearing the selection or note. Start again deliberately clears both and returns to the beginning. The final screen is called a local plan: it never claims that a booking was submitted, approved or stored.
Attempt Continue with no radio selected and inspect the error.
Choose a visit type, add a short note and open Review.
Return to the note, confirm its value persists, then start again to clear the plan.
The active list item carries aria-current="step" and a visually hidden current-stage label. Earlier stages receive completion text as well as their confirmed class. The compact numeric index is hidden from assistive technology because the current heading and stage semantics already express position; it remains visible for visual orientation.
The changing body uses aria-live="polite" as the official guidance recommends for a single-page sequence. The example also focuses the new heading so keyboard users have a predictable reading start. Test that combination with your supported assistive technology to avoid overly repetitive announcements in a more complex form.
Use real buttons for step changes, with disabled on Back at the first stage.
Keep labels connected to radios and the textarea; placeholder text is not a label.
Expose current/completed states in text, not only blue color or an icon.
Design System .italia Native assets and initialization
CSS, fonts and optional JavaScript
The package provides CSS, a bundled script, source fonts and an SVG sprite. This Stepper specimen needs CSS and the chosen fonts; its navigation is application logic. Other widgets use data-bs-toggle or their documented data attributes for automatic initialization. Do not combine automatic initialization with a second manual instance for the same widget.
If using modules, import only the components the application needs. The official guidance notes that transition methods return before the transition ends and calls during a transition may be ignored. Wait for the relevant completion event before chaining dependent actions in those components; this simple Stepper does not invent a native transition API.
The library documentation recommends keeping its version current and discourages a public CDN dependency for production. The setup pins the verified release and the local specimen includes its own assets and licenses. A real service still needs content design, data handling, server validation and a confirmed submission response.
The example uses a generic library visit without a municipal logo or official insignia. It is an OpenDesign teaching specimen, not a public authority service. Keep that distinction in any prototype so a visually polished review state cannot be mistaken for a real request record.
Native CSS/fonts, required radio validation, optional note, review, back and reset.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
Native CSS and font setup. Stepper navigation is application logic; a complete working example follows. The complete working-example ZIP in Sources also provides the exact preview dependencies and full document. Extract it, run python3 -m http.server 8080 in that directory, then open http://localhost:8080/designers-italia.html. Do not open module-based examples through file://.
bash
npm install [email protected]
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
A Prompt for Your Project
Agent Prompt
Use Bootstrap Italia 2.18.3 native CSS and Titillium Web. Build the documented steppers/header/content/nav structure with active, confirmed and synchronized mobile index states. Own validation and navigation in application code, preserve values on Back, and label the final state according to a real backend response. Do not mix a second Bootstrap runtime or claim a local review was submitted.
05
Design System .italia Sources and Scope
Independent OpenDesign example focused on Bootstrap Italia. No public authority identity or actual booking service.
