Explore Gov Design System CE’s real color roles, card slots and native pagination through a complete six-resource reading toolkit with explicit focus and page state.
gov.cz Design System Gov CE Foundations and Asset Order
Keep the package versions aligned
This example pins components, styles, icons and fonts to 4.7.1. The five foundation stylesheets load in the published order. Their responsibilities differ: variables alone do not style a card, and registering a custom element alone does not bring in the global component CSS. The full entry includes all five before its small original composition layer.
Initialize configuration before component registration
The icon path is configured before the dynamically imported component entry modules run. That ordering matters because pagination renders arrow icons as part of its own dependencies. Copy the complete icon directory to the configured public path while keeping its subdirectories. A successful JavaScript import does not prove those separate icon requests succeeded.
gov.cz Design System Semantic Color and State References
Connect color to a role
The reference distinguishes the blue primary primitive from text, focus and button state aliases. Using the same apparent blue everywhere would erase those contracts. The toolkit uses the official solid primary buttons and lets the component stylesheet choose their active, hover and disabled appearance. Only the surrounding collection layout is original CSS.
Keep typography and content context visible
Roboto comes from the matched font package. Cards have short actionable headings, a metadata line and a summary before the reading action. The six resource texts are original OpenDesign practice material, not translated official Czech government instructions. Their purpose is to demonstrate hierarchy and a complete local interaction without pretending to be a government service.
gov.cz Design System Card Slots and Read Actions
Place the heading in its supported slot
Each gov-card receives a heading in the headline slot. Its metadata, description and button form the content. The action has an aria-label that includes the resource title, distinguishing repeated Read resource buttons for assistive technology. The component transfers ARIA attributes to its internal interactive element; an invented accessible-label attribute would not do that.
Keep layout outside the component contract
A three-column CSS grid becomes one column on a narrow screen. The grid and its breakpoint are authored for this example, not additional official card properties. The preview also removes the global 320px minimum body width inside its very narrow embedded container. This limited composition adjustment preserves component styling while preventing the parent page from overflowing.
gov.cz Design System Native Pagination and Application State
Read the native event payload
gov-pagination receives total=6 and page-size=3. Its gov-page event supplies detail.pagination.currentPage, which selects the matching three records. The pagination component owns its current-page controls; the application owns the dataset and visible slice. All default Czech navigation labels are explicitly replaced with English labels for this English study.
total is the number of records, not the number of pages.
page-size controls the slice length.
gov-page exposes detail.pagination.currentPage.
Navigation labels must match the language of the interface.
Avoid stale details after a page change
gov.cz Design System Reading Focus and Return Behavior
Move focus to the opened resource
The read action fills a local detail region and focuses its heading. This gives keyboard users a clear destination after an action that adds content below the collection. A focusable heading uses tabindex=-1 so it can be focused by the application without becoming an extra regular Tab stop. The opened content remains ordinary readable text.
Return to the action that opened it
Back to resources hides the detail and focuses the original internal button. This is not a modal: it does not trap focus, add dialog semantics or dim the page. The original collection remains available. Repeatedly opening, closing and moving between pages checks whether application state and focus follow the same resource.
gov.cz Design System Complete Local Integration
Use the supplied files together
The entry is complete application code, including all six records, card creation, pagination handling and detail focus. The stylesheet contains the original composition only. Install the four pinned packages, copy the icons and save both files into a vanilla Vite project. The browser preview bundles exactly these component entries and local font assets.
Install all four Gov CE packages at 4.7.1.
Copy icons into public/assets/gov-cz-icons with subdirectories preserved.
Save the complete JavaScript and composition CSS in src.
Run the app and inspect paging, focus return and icon requests.
Verify interaction and asset loading
Open the first resource, return to its button, advance to the second page and read a different resource. Verify the first/previous controls are disabled at the beginning and the next/last controls at the end. Inspect the same flow at desktop and phone widths, including a narrower embedded width. Check the network panel for missing icons as well as JavaScript errors.
gov.cz Design System Design System Component Examples
main.js — complete paginated toolkit
Full data, native component registration, page slicing and reading focus.
javascript
import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
{title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
{title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
{title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
{title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
{title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
{title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`<main><p class="eyebrow">OPENDESIGN · ORIGINAL SERVICE TOOLKIT</p><h1>Small steps toward a clearer service</h1><p class="lead">Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.</p><div id="cards" class="cards"></div><div class="pagination-row"><p id="range" role="status"></p><gov-pagination total="6" page-size="3" current="1" color="primary" size="s" accessible-page-label="Page" accessible-select-label="Choose a page" label-prev="Previous page" label-next="Next page" label-start="First page" label-end="Last page" aria-label="Toolkit pages"></gov-pagination></div><section id="detail" hidden aria-labelledby="detail-title"><p class="eyebrow" id="detail-meta"></p><h2 id="detail-title" tabindex="-1"></h2><p id="detail-body"></p><gov-button id="close" type="outlined" color="primary" size="m">Back to resources</gov-button></section><aside><strong>About this example</strong><p>These are original OpenDesign practice notes, not Czech government guidance. Cards, buttons and pagination use Gov Design System CE 4.7.1. Reading a resource is local and does not submit information.</p></aside></main>`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`<h2 slot="headline">${r.title}</h2><p class="meta">${r.kind} · ${r.time}</p><p>${r.summary}</p><gov-button type="solid" color="primary" size="m" data-resource="${id}" aria-label="Read ${r.title}">Read resource</gov-button>`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;}
cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();});
document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();});
document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render();
Grid layout and the embedded minimum-width override are original application CSS.
04
gov.cz Design System Agent Setup
Implementation Starting Point
Keep icon subdirectories intact. This example imports direct component entry modules; it does not require a copied lazy-loader runtime.
sh
npm create vite@latest gov-toolkit -- --template vanilla
cd gov-toolkit
npm install
npm install @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected]
mkdir -p public/assets/gov-cz-icons
cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/
# Save the supplied files as src/main.js and src/gov-cz.css.
# The root index.html must contain <div id="root"></div> and load /src/main.js.
npm run dev
A Prompt for Your Project
Agent Prompt
Build the supplied Gov CE 4.7.1 toolkit using native cards, buttons and pagination. Keep the actual stylesheet order and icon path configuration. Use gov-page detail.pagination.currentPage, meaningful English ARIA labels, closed stale detail on page changes, and focus return after reading. Preserve original sample-content attribution.
05
gov.cz Design System Sources and Scope
An original OpenDesign service-toolkit study using Gov Design System CE 4.7.1 components, styles, icons and fonts. Sample writing and collection behavior are original; this is not an official government service.
