Implemente o CMS Core com variáveis de tema versionadas, APIs reais do componente Review e um fluxo funcional de edição e revisão que preserve as respostas do usuário e o foco.
CMS Core 18.1.0 CSS e tema nativos. Estado de edição e JavaScript definidos pela aplicação; Arial como alternativa, sem ambiente de execução React nem envio externo. · Referência de implementação
02
Referência de design sistema de design CMS
O CMS Core 18.1.0 publicou core-theme.css e o componente CSS. Quando a documentação geral divergir, prevalece o artefato versionado. A prévia usa Arial como alternativa e uma área de 48rem específica da aplicação.
Sistema de design CMS Escolha Core ou um tema derivado
O pacote é uma família, não um único tema visual de marca
O CMS Core fornece bases compartilhadas para a interface, com sistemas derivados separados para Healthcare.gov, Medicare.gov e CMS.gov. Esta referência fixa @cmsgov/design-system 18.1.0 e seu core-theme.css. Uma cor, um logotipo ou um componente disponível em um tema derivado não é automaticamente uma regra do Core. O exemplo usa intencionalmente um fluxo neutro de preferências de aviso e omite banners oficiais do governo e elementos de identidade visual.
Há caminhos de integração com React, Preact, componentes web e HTML/CSS manuais. A documentação recomenda componentes JavaScript quando o comportamento integrado é útil; a coleção de componentes web é um subconjunto. Nosso exemplo independente usa CSS reais do Core com JavaScript da aplicação para editar, salvar e cancelar. Não afirmamos que CSS implemente validação, roteamento ou persistência.
index.css define as regras dos componentes, e core-theme.css fornece as variáveis. Omitir o tema pode deixar nomes de classe válidos com valores não resolvidos. Por outro lado, importar um tema do Medicare enquanto se descreve a tipografia do Core gera um resultado enganoso, mesmo que a página seja renderizada. A configuração inclui os dois recursos da mesma versão 18.1.0.
O tema versionado é a fonte dos valores numéricos deste guia. Por exemplo, --color-base é #262626, embora o texto geral sobre tipografia ainda mencione #333. O --grid-gutter-width do tema é --spacer-4 (32px), enquanto --grid-form-gutter-width é --spacer-2 (16px). Uma frase geral que descreva margens de 16px não deve ser aplicada a todas as variantes de grade. Essas diferenças são importantes ao reproduzir um layout real.
Sistema de design CMS Tipografia e hierarquia do Core
Uma família, tamanhos explícitos por função
O Core usa Open Sans nos títulos e no conteúdo do corpo. A cadeia de fontes alternativas do tema 18.1.0 segue por Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial e sans-serif. O exemplo local usa Arial explicitamente para não solicitar arquivos de fontes externos; por isso, suas métricas diferem das da tipografia oficial completa.
O tamanho base do corpo é 1rem, com entrelinha de 1.5. As variáveis de tamanho incluem 14, 16, 18, 21 e 24px com uma raiz de 16px, seguidas por funções responsivas maiores: 3xl é 30px em dispositivos móveis e 36px nos demais; 4xl é 36px em dispositivos móveis e 48px nos demais; 5xl é 36px em dispositivos móveis, 48px em tablets e 60px em sua maior função. Esses são valores do tema, não uma autorização para usar o maior tamanho em todos os títulos de página. Use títulos semânticos e o mapeamento apropriado de utilitários ou de ds-content.
Sistema de design CMS Espaçamento e layout responsivo
Ritmo de oito pixels com meio passo
--spacer-1 a --spacer-7 correspondem a 8–56px, em incrementos de oito pixels. --spacer-half é 4px e --spacer-none é zero. Portanto, uma classe como ds-u-margin--2 significa 16px, não 2rem. A linha de revisão nativa CSS tem preenchimento vertical de 16px e borda inferior de 2px; não é necessário envolver cada resposta em outro cartão com preenchimento.
A largura máxima do site Core é 1104px, com margens de 3rem no site e de 1.5rem em dispositivos móveis no tema versionado. O exemplo usa um contêiner de leitura menor, de 48rem, para duas linhas curtas de revisão. Essa é uma largura da aplicação, não um novo token do CMS.
Sistema de design CMS Estrutura da linha de revisão e API
Um rótulo, um valor e um destino contextual de edição
Review envolve um item passível de revisão. Seu título usa h3 por padrão, pode ser definido com headingLevel e é seguido pelos elementos filhos que representam o valor atual. editHref fornece um destino; sem ele, nenhum link de edição é exibido. editAriaLabel dá ao link Editar, quando repetido, um nome acessível inequívoco. A declaração de tipos da versão 18.1.0 também disponibiliza editText, onEditClick e editContent; este último substitui o link padrão por conteúdo personalizado.
O exemplo React usa propriedades reais verificadas na declaração publicada. Os caminhos são rotas ilustrativas da aplicação, que devem ser implementadas pelo aplicativo que a consome. A alternativa nativa CSS mostra a estrutura ds-c-review, ds-c-review__content e ds-c-review__heading; ainda cabe à aplicação gerenciar a navegação e as atualizações.
Sistema de design CMS Edição de uma linha versus edição de uma seção
Mantenha previsível o caminho para corrigir informações
O padrão de revisão de formulários do CMS distingue a edição de uma resposta da edição de uma seção inteira. Preferências independentes, como formato de aviso e idioma, são adequadas à edição de uma linha. Respostas interdependentes, como os integrantes de uma família e suas relações, podem exigir a edição da seção para que a aplicação recalcule a consistência em conjunto. As orientações oficiais deixam claro que posicionar um botão Editar referente à seção ao lado do título dela não é uma funcionalidade implementada pelo próprio componente Review.
A demonstração abre um fieldset focado para a linha selecionada. Salvar atualiza apenas esse valor e devolve o foco ao controle Editar que iniciou a ação; Cancelar descarta o rascunho. A resposta visível também permanece inalterada enquanto o editor está aberto. Uma mensagem de status local informa a alteração realmente feita, em vez de anunciar sucesso apenas porque o formulário de edição apareceu.
Use os mesmos rótulos e a mesma ordem das perguntas no preenchimento e na revisão.
Forneça um nome contextual de edição para cada linha, mesmo quando o texto visível do link for Editar.
Mantenha a edição de seções fora do componente de linha única quando respostas relacionadas precisarem ser alteradas em conjunto.
Sistema de design CMS Revisão, conclusão e veracidade
Uma revisão não é um comprovante de envio
Review é adequado para respostas editáveis de formulários, não para substituir resultados de pesquisa. Em um fluxo real de envio, o padrão prevê uma ação final de envio após a revisão. Essa ação só deve exibir um comprovante depois de representar um resultado real do backend. Em vez disso, o exemplo oferece a opção Concluir revisão local e informa explicitamente que nada é enviado ou armazenado.
O Core diferencia o azul primário #0071bc, o vermelho de erro #e31c3d, o verde de sucesso #12890e e o cinza da borda #d9d9d9. Uma preferência salva é identificada por texto, além da cor. O foco usa as referências de foco claras e escuras do tema; não remova o indicador ao estilizar Editar como um controle minimalista. O status final pode ser acessado pelo teclado e não apaga as linhas de revisão.
Sistema de design CMS Instale e estenda com segurança
Um fluxo completo de CSS e um caminho real para o componente
Instale o pacote fixado e importe css/index.css e css/core-theme.css pelas exportações do pacote. Aplicações que consomem React importam Review da raiz do pacote; aplicações Preact têm uma entrada /preact. O exemplo não exige compilação de Sass. Ao copiar CSS estático, preserve os caminhos relativos dos recursos de fontes e imagens ou escolha explicitamente uma alternativa compatível, como neste exemplo.
O namespace do CMS separa layouts ds-l-, componentes ds-c- e utilitários ds-u-. As classes da aplicação não devem se passar por componentes oficiais não documentados. Na demonstração, o contêiner de leitura e o editor em linha são composições locais; a linha de revisão e os botões usam os estilos distribuídos.
Carregue o componente e o tema CSS correspondentes do Core e renderize as duas linhas de revisão.
Conecte cada ação de edição a um editor controlado; devolva o foco após salvar ou cancelar.
Teste os valores alterados, os rascunhos descartados e a conclusão local final em larguras para desktop e dispositivos móveis.
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!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>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Configuração do agente de IA sistema de design CMS
Ponto de partida para implementação
As exportações do pacote e as propriedades de Review foram verificadas nos metadados/tipos publicados da versão 18.1.0. O exemplo de React é fornecido para integração; a prévia independente executa CSS nativo e o JavaScript local do aplicativo. O ZIP do exemplo funcional completo, em Fontes, também fornece as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/cms.html. Não abra exemplos baseados em módulos usando file://.
Crie uma tela de revisão com CMS Core 18.1.0. Carregue index.css e core-theme.css juntos. Use Review com heading, children, editHref e editAriaLabel para cada resposta que possa ser editada de forma independente; a edição no nível da seção é uma composição separada do aplicativo. Preserve a ordem das perguntas e os valores salvos exibidos enquanto os rascunhos são editados. Devolva o foco ao salvar/cancelar e anuncie as atualizações efetivamente realizadas. Use tokens do Core, incluindo #262626 para o texto base, espaçamentos de 8px com meio passo de 4px, margem de 32px para a grade geral e margem de 16px para formulários. Não misture logotipos de temas filhos nem apresente uma revisão local como se ela enviasse dados ao aplicativo.
05
Fontes e escopo de sistema de design CMS
Referência técnica do tema Core. Preferências fictícias e alterações apenas locais; não representa orientação sobre elegibilidade a serviços de saúde, afiliação ao CMS nem um formulário enviado.
