Système de design CMS.

Système de design CMS Choisir Core ou un thème enfant

Le package est une famille, pas une apparence de marque unique

CMS Core fournit des fondations d’interface communes, avec des systèmes enfants distincts pour Healthcare.gov, Medicare.gov et CMS.gov. Cette référence est épinglée sur @cmsgov/design-system 18.1.0 et son fichier core-theme.css. Une couleur, un logo ou un composant disponible dans un thème enfant ne constitue pas automatiquement une règle Core. L’exemple utilise délibérément un parcours neutre de préférences de notification et omet les bannières officielles du gouvernement ainsi que les éléments d’identité visuelle.

Il existe des parcours d’intégration avec React, Preact, des composants Web et une intégration manuelle de HTML/CSS. La documentation recommande les composants JavaScript lorsque leur comportement intégré est utile ; la collection de composants Web n’en est qu’un sous-ensemble. Notre exemple autonome utilise de vrais CSS Core, avec JavaScript fourni par l’application pour modifier, enregistrer et annuler. Il ne prétend pas que CSS gère la validation, le routage ou la persistance.

Consultez la spécification associée

Système de design CMS Consulter le thème versionné

Inclure les deux feuilles de style

index.css définit les règles des composants et core-theme.css fournit leurs variables. Sans le thème, des noms de classe valides peuvent se retrouver avec des valeurs non résolues. À l’inverse, importer un thème Medicare tout en décrivant la typographie de Core donne un résultat trompeur, même si la page s’affiche. La configuration inclut les deux ressources issues de la même version 18.1.0.

Le thème versionné est la source des valeurs numériques de ce guide. Par exemple, --color-base vaut #262626, même si le texte général sur la typographie mentionne encore #333. Dans le thème, --grid-gutter-width correspond à --spacer-4 (32px), tandis que --grid-form-gutter-width correspond à --spacer-2 (16px). Une phrase générale indiquant que les gouttières font 16px ne s’applique pas à toutes les variantes de grille. Ces différences sont importantes pour reproduire une mise en page réelle.

Consultez la spécification associée

Système de design CMS Typographie et hiérarchie de base

Une famille, des tailles définies selon le rôle

Core utilise Open Sans pour les titres et le corps de texte. La chaîne de polices de remplacement du thème 18.1.0 comprend ensuite Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial et sans-serif. L’exemple local utilise explicitement Arial afin de ne pas charger de fichiers de polices externes ; ses métriques diffèrent donc de celles de la typographie officielle complète.

La taille de base du corps de texte est de 1rem, avec une hauteur de ligne de 1.5. Les variables de taille comprennent 14, 16, 18, 21 et 24px pour une racine de 16px, puis des rôles adaptatifs plus grands : 3xl vaut 30px sur mobile et 36px ailleurs ; 4xl vaut 36px sur mobile et 48px ailleurs ; 5xl vaut 36px sur mobile, 48px sur tablette et 60px pour son rôle le plus grand. Ce sont des valeurs du thème, et non une autorisation d’utiliser la plus grande taille pour tous les titres de page. Utilisez des titres sémantiques et la classe utilitaire ou la correspondance ds-content appropriée.

Consultez la spécification associée

Système de design CMS Espacement et mise en page adaptative

Une cadence de huit pixels, avec un demi-pas

--spacer-1 à --spacer-7 correspondent à des valeurs de 8 à 56px, par incréments de huit pixels. --spacer-half vaut 4px et --spacer-none vaut zéro. Ainsi, une classe telle que ds-u-margin--2 signifie 16px, et non 2rem. La ligne native CSS comporte un rembourrage vertical de 16px et une bordure inférieure de 2px ; le formulaire qui l’entoure n’a pas besoin d’ajouter une carte rembourrée autour de chaque réponse.

La largeur maximale du site Core est de 1104px, avec des marges de 3rem pour le site et de 1.5rem sur mobile dans le thème versionné. L’exemple utilise un conteneur de lecture plus étroit, de 48rem, pour deux courtes lignes de récapitulatif. Il s’agit d’une largeur propre à l’application, et non d’un nouveau jeton CMS.

Consultez la spécification associée

Utilisez les préfixes de points de rupture du CMS

Consultez la spécification associée

Système de design CMS Anatomie d’une ligne de récapitulatif et API

Un libellé, une valeur et une destination de modification contextuelle

Review regroupe un élément à récapituler. Son titre est un h3 par défaut ; la propriété headingLevel permet de le définir, et il est suivi des enfants qui représentent la valeur actuelle. editHref indique une destination ; sans cette propriété, aucun lien de modification n’est affiché. editAriaLabel donne à un lien Modifier répété et visible un nom accessible sans ambiguïté. La déclaration de types de la version 18.1.0 fournit également editText, onEditClick et editContent ; dans ce dernier cas, le contenu personnalisé remplace le lien par défaut.

L’exemple React utilise des propriétés réelles, vérifiées dans la déclaration publiée. Les routes indiquées sont des exemples que l’application qui utilise le composant doit implémenter. L’alternative native CSS présente la structure ds-c-review, ds-c-review__content et ds-c-review__heading ; l’application doit toujours gérer la navigation et les mises à jour.

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

Référence du code

Consultez la spécification associée

Système de design CMS Modification d’une ligne ou d’une section

Assurez-vous que le parcours de correction reste prévisible

Le modèle de récapitulatif des formulaires du CMS distingue la modification d’une réponse de celle d’une section entière. Les préférences indépendantes relatives au format des avis et à la langue se prêtent à une modification ligne par ligne. Des réponses interdépendantes, comme le nombre de personnes du foyer et leurs liens de parenté, peuvent nécessiter la modification de toute une section afin que l’application puisse recalculer leur cohérence ensemble. Les recommandations officielles précisent que le composant Review ne permet pas, à lui seul, de placer un bouton Modifier au niveau de la section, à côté de son titre.

L’aperçu ouvre un groupe de champs ciblé pour la ligne sélectionnée. Enregistrer met à jour uniquement cette valeur et redonne le focus au contrôle Modifier qui a lancé l’action ; Annuler abandonne le brouillon. La réponse visible reste inchangée tant que l’éditeur est ouvert. Un message d’état local indique la modification réellement effectuée, au lieu d’annoncer une réussite dès l’ouverture du formulaire de modification.

• Reprenez les mêmes libellés de questions et le même ordre dans le formulaire de saisie et le récapitulatif.
• Attribuez à chaque ligne un nom de modification contextuel, même si le lien visible indique simplement Modifier.
• Gérez la modification d’une section en dehors du composant de ligne unique lorsque plusieurs réponses liées doivent être modifiées ensemble.

Consultez la spécification associée

Système de design CMS Récapitulatif, achèvement et fiabilité

Un récapitulatif ne vaut pas accusé de réception d’envoi

Le composant Review convient au récapitulatif de réponses modifiables dans un formulaire, mais ne remplace pas une page de résultats de recherche. Dans un véritable parcours d’envoi, le modèle prévoit une action finale d’envoi après le récapitulatif. Cette action ne doit afficher un accusé de réception qu’après confirmation du résultat réel par le backend. L’exemple propose plutôt Terminer le récapitulatif local et précise explicitement qu’aucune donnée n’est envoyée ni stockée.

Core distingue le bleu principal #0071bc, le rouge d’erreur #e31c3d, le vert de réussite #12890e et le gris des bordures #d9d9d9. Une préférence enregistrée est indiquée par du texte aussi bien que par une couleur. L’indicateur de focus utilise les références de focus claire et foncée du thème ; ne le supprimez pas lorsque vous donnez au contrôle Modifier un style minimal. Le message d’état final est accessible au clavier et ne fait pas disparaître les lignes du récapitulatif.

Consultez la spécification associée

Système de design CMS Installer et étendre en toute sécurité

Un parcours complet avec CSS et une véritable intégration du composant

Installez la version précise du package et importez css/index.css ainsi que css/core-theme.css via les exports du package. Les applications utilisant React importent Review depuis la racine du package ; les applications Preact disposent d’un point d’entrée /preact. L’exemple ne nécessite pas de compilation Sass. Si vous copiez les fichiers statiques CSS, conservez les chemins relatifs des ressources de polices et d’images ou choisissez explicitement une solution de remplacement prise en charge, comme dans cet exemple.

L’espace de noms du CMS distingue les mises en page ds-l-, les composants ds-c- et les utilitaires ds-u-. Les classes de l’application ne doivent pas se faire passer pour des composants officiels non documentés. Dans l’aperçu, le conteneur de lecture et l’éditeur en ligne sont des compositions locales ; la ligne de récapitulatif et les boutons utilisent les styles distribués.

1. Chargez le composant Core correspondant et le thème CSS, puis affichez les deux lignes du récapitulatif.
2. Reliez chaque action de modification à un éditeur contrôlé ; redonnez le focus après l’enregistrement et l’annulation.
3. Testez les valeurs modifiées, les brouillons abandonnés et la finalisation locale, sur ordinateur comme sur mobile.

Consultez la spécification associée

Exemples de composants du système de design système de design CMS

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

<div class="ds-c-review">
  <div class="ds-c-review__content">
    <h3 class="ds-c-review__heading">Notice format</h3>
    <p>Large print</p>
  </div>
  <a href="/preferences/notice-format" aria-label="Edit notice format">Edit</a>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></html>