Use a tipografia, o espaçamento responsivo, as opções de seleção agrupadas e os detalhes contextuais do NHS.UK para criar um fluxo claro de escolha de preferências de consulta.
Frontend NHS.UK nativo 10.6.1 CSS/JS, substituição por Arial e estado local original; sem integração com serviços clínicos. · Referência de implementação
02
Referência de design do sistema de design NHS
Frontend NHS.UK 10.6.1 e manual de serviços digitais do NHS. A prévia usa CSS/JS oficial local com Arial, não a Frutiger licenciada nem o logotipo do NHS. Os valores responsivos são verificados em relação ao pacote selecionado; nenhum conteúdo clínico é fornecido.
O frontend NHS.UK fornece a base visual e de interação; não agenda uma consulta nem determina quais métodos de comparecimento uma clínica oferece. O estudo mostra uma consulta fictícia e permite que o visitante escolha uma preferência. O resultado é uma revisão local, não um agendamento.
A Frutiger é um recurso da marca NHS sujeito a condições de licenciamento. Este recurso independente usa Arial, a alternativa documentada, e não inclui o logotipo do NHS. O CSS oficial é mantido intacto; uma substituição explícita da fonte local impede solicitações de Frutiger.
Use nhsuk-heading-l para a pergunta da página e nhsuk-heading-m para uma seção subordinada. Isso difere de uma página editorial longa, em que as orientações começam com heading-xl. O fieldset de opções pode usar uma legenda com tamanho de título sem perder a semântica de grupo.
As classes de parágrafo regular distinguem o texto do corpo, o texto de destaque e o texto auxiliar pequeno. Um texto de destaque de 26px é útil uma vez no início da página, enquanto as instruções da consulta permanecem como texto comum do corpo. A prévia mantém largura de linha suficiente para acomodar datas e nomes de locais sem cortes.
O espaçamento do NHS não segue a escala de espaçamento do GOV.UK
As unidades responsivas do NHS seguem uma sequência diferente e mudam acima de 768px. Por exemplo, a unidade 6 passa de 32px para 40px. Não transfira o valor da unidade 6 do GOV.UK para o NHS só porque os nomes dos auxiliares são semelhantes.
A demonstração usa o contêiner de 960px e uma coluna de leitura com dois terços da largura. O comportamento nativo da grade produz uma única coluna abaixo da largura de desktop. As mudanças de layout são controladas pela biblioteca, enquanto a pequena faixa de identidade independente usa estilos da aplicação.
A documentação define 641px como tablet e 769px como desktop. As larguras das colunas da grade começam no breakpoint de desktop; isso não significa que todas as regras tipográficas dependam do mesmo limite. Use as classes nativas em vez de implementar um único breakpoint global para todas as propriedades.
Opções agrupadas de comparecimento do sistema de design NHS
Um fieldset, uma resposta
O exemplo usa nhsuk-fieldset com uma legenda visível e um atributo name compartilhado entre as opções de rádio. Cada opção tem seu próprio id e rótulo. A dica é associada ao grupo por meio de aria-describedby. Essas relações permitem que o navegador apresente uma única opção entre alternativas mutuamente exclusivas.
A estrutura do item de rádio coloca a entrada e o rótulo dentro de nhsuk-radios__item. Os rádios padrão são adequados para uma pergunta principal; a variante pequena foi criada para contextos de filtros mais compactos. As opções fictícias de comparecimento continuam mutuamente exclusivas quando operadas pelas teclas de seta.
A legenda identifica a decisão.
O nome compartilhado para comparecimento cria o grupo de seleção.
Cada rótulo aponta para um ID de entrada diferente.
Sistema de design NHS Ajuda sem ocultar informações essenciais
Use um elemento details nativo
O exemplo de details contém nhsuk-details__summary e um span summary-text, seguidos de nhsuk-details__text. Ele é aberto pelo comportamento nativo do navegador. Mantenha a identificação do agendamento e a informação de que nenhuma reserva é feita fora do conteúdo expansível, pois todos precisam delas.
Na versão 10.6, o API do Nunjucks usa summary.text ou summary.html; a opção antiga summaryText está obsoleta. Se usar macros, prefira o novo formato do objeto. O exemplo HTML não depende de um sistema de templates e mantém a mesma estrutura.
Nenhuma opção é selecionada inicialmente. Ao continuar sem responder, é exibido um erro em linha, e o grupo é associado a essa mensagem. Em seguida, a prévia direciona o foco para o erro. A seleção permanece visível ao voltar da revisão. Essas decisões de estado da aplicação são complementares aos controles nativos.
A revisão repete o método escolhido e a identificação do agendamento fictício. A ação diz Alterar preferência. Não há nenhuma confirmação que sugira que um serviço clínico aceitou a preferência, e não são inventados conselhos de saúde nem requisitos de preparação.
Continue sem selecionar um método de comparecimento.
Selecione Telefone e abra a revisão local.
Altere a preferência para Presencial e confira a revisão atualizada.
A configuração copia o CSS 10.6.1 e o módulo do navegador para um diretório de recursos estáticos. O módulo exporta initAll; chame essa função depois que a marcação do componente existir. O exemplo independente usa a mesma distribuição servida localmente e uma substituição de Arial no nível da página.
Os estilos incluem regras de componentes e bases responsivas. O pequeno script que altera o painel de revisão é um código separado da aplicação. Em um serviço de produção, o registro fictício do agendamento seria substituído por dados mantidos e uma solicitação real de preferência seria processada pelo backend próprio.
Os principais critérios são que a pessoa consiga identificar o agendamento, entender que a preferência de comparecimento ainda não foi confirmada e alterar o método selecionado sem perder o contexto. Uma notificação genérica de sucesso ocultaria essa distinção.
Teste a operação do grupo de opções de rádio e do resumo de details pelo teclado; depois, confira a visualização estreita com um nome longo de clínica. O erro por falta de seleção deve levar de volta ao grupo. A biblioteca fornece comportamento reutilizável, enquanto a organização continua responsável pelas regras reais de agendamento e pelas informações clínicas.
O elemento details nativo revela informações adicionais sem ocultar a tarefa.
html
<details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">About these example choices</span>
</summary>
<div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
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>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
<div class="nhsuk-hint" id="contact-hint">Select one option.</div>
<div class="nhsuk-radios" data-module="nhsuk-radios">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
<label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
</div>
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
<label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
</div>
</div>
</fieldset></div><details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">About these example choices</span>
</summary>
<div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</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
Sistema de design NHS Configuração do agente
Ponto de partida para implementação
Coloque os comandos de shell e HTML nos respectivos arquivos. Arial é uma substituição explícita para a prévia independente; as organizações do NHS devem seguir as licenças de fontes e os requisitos de marca aplicáveis. O ZIP completo do exemplo funcional, disponível em Sources, também inclui 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/nhs.html. Não abra exemplos baseados em módulos usando file://.
sh / html
npm install [email protected]
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/
<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
import { initAll } from '/assets/nhsuk-frontend.min.js';
initAll();
</script>
Um prompt para seu projeto
Prompt para agente de IA
Crie uma pergunta independente sobre preferência de agendamento usando NHS.UK Frontend 10.6.1. Use um fieldset e uma legenda para os métodos de comparecimento mutuamente exclusivos, dicas associadas aos botões de opção e o elemento Details nativo para ajuda opcional. Mantenha a pergunta e as instruções essenciais visíveis. Na revisão sem resposta, mostre um resumo de erro vinculado e um erro em linha; preserve o método selecionado ao voltar da revisão local. Carregue o CSS correspondente e initAll do módulo, com a substituição de Arial documentada explicitamente para o estudo. Não adicione busca de agendamentos, alterações reais de reservas, orientação clínica nem alegações de identidade do NHS.
05
Sistema de design NHS Fontes e escopo
Estudo independente de preferência de agendamento com o frontend NHS.UK 10.6.1. Sem logotipo do NHS, Frutiger licenciada, reservas reais, instruções clínicas ou endosso implícito.
