Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño NHS.
Usa la tipografía de NHS.UK, espaciado adaptable, opciones de radio agrupadas y detalles contextuales para crear un recorrido claro de preferencias de cita.
NHS.UK frontend 10.6.1 nativo con CSS/JS, Arial como fuente alternativa y estado local original; sin integración con servicios clínicos. · Referencia de implementación
02
Referencia de diseño de sistema de diseño NHS
NHS.UK frontend 10.6.1 y manual de servicios digitales del NHS. La vista previa usa CSS/JS local oficial con Arial, no Frutiger con licencia ni el logotipo del NHS. Los valores adaptables se han comprobado con el paquete seleccionado; no se proporciona contenido clínico.
Contexto y tipografía del NHS de sistema de diseño NHS
Una interfaz sanitaria sin falsa identidad
NHS.UK frontend proporciona la base visual y de interacción; no programa una consulta ni decide qué métodos de asistencia ofrece una clínica. El estudio muestra una cita ficticia y permite al visitante elegir una preferencia. El resultado es una revisión local, no una reserva.
Frutiger es un recurso de marca del NHS sujeto a condiciones de licencia. Este recurso independiente usa Arial, la fuente alternativa documentada, y excluye el logotipo del NHS. Se mantiene intacto el CSS oficial; una sobrescritura local explícita de la fuente evita las solicitudes de Frutiger.
Tipografía para transacciones de sistema de diseño NHS
Deja que la pregunta marque la jerarquía
Usa nhsuk-heading-l para la pregunta de la página y nhsuk-heading-m para una sección subordinada. Esto difiere de una página editorial extensa, donde la guía empieza con heading-xl. El grupo de botones de opción puede usar una leyenda del tamaño de un encabezado sin perder su semántica de grupo.
Las clases de párrafo distinguen entre texto principal, destacado y complementario pequeño. Un texto destacado de 26px resulta útil una vez al inicio de la página, mientras que las instrucciones de la cita deben conservar el tamaño normal del texto principal. La vista previa mantiene suficiente ancho de línea para que las fechas y los nombres de ubicaciones se ajusten.
Las unidades adaptables del NHS siguen una secuencia distinta y cambian por encima de 768px. Por ejemplo, la unidad 6 pasa de 32px a 40px. No transfieras al NHS el valor de la unidad 6 de GOV.UK solo porque los nombres de las utilidades parezcan relacionados.
La demostración usa el contenedor de 960px y una columna de lectura de dos tercios. La cuadrícula nativa crea una sola columna por debajo del escritorio. La biblioteca controla los cambios de disposición, mientras que la pequeña franja de identidad independiente se define mediante estilos de la aplicación.
La documentación define 641px como tableta y 769px como escritorio. Los anchos de columna de la cuadrícula empiezan en el punto de escritorio; eso no significa que todas las reglas tipográficas esperen al mismo límite. Usa las clases nativas en lugar de implementar un único punto de interrupción global para todas las propiedades.
Opciones de asistencia agrupadas de sistema de diseño NHS
Un grupo de campos, una respuesta
El ejemplo utiliza nhsuk-fieldset con una leyenda visible y el mismo atributo name en sus botones de opción. Cada botón tiene su propio id y una etiqueta. La ayuda se asocia al grupo mediante aria-describedby. Estas relaciones permiten que el navegador presente una única opción excluyente.
La estructura de cada opción coloca el control y la etiqueta dentro de nhsuk-radios__item. Los botones de opción estándar son adecuados para una pregunta principal; la variante pequeña está pensada para contextos de filtros más densos. Las opciones ficticias de asistencia siguen siendo excluyentes al recorrerlas con las teclas de flecha.
La leyenda indica qué decisión hay que tomar.
El nombre attendance compartido crea el grupo de selección.
Sistema de diseño NHS Ayuda sin ocultar información esencial
Usa un elemento details nativo
El ejemplo de details incluye nhsuk-details__summary y un span summary-text, seguido de nhsuk-details__text. Se abre con el comportamiento nativo del navegador. Mantén visibles fuera del elemento desplegable la identidad de la cita y el hecho de que no se realiza ninguna reserva, ya que todos necesitan esa información.
En 10.6, Nunjucks API utiliza summary.text o summary.html; la opción antigua summaryText está obsoleta. Si utilizas macros, prefiere la nueva estructura del objeto. El ejemplo de HTML evita depender de un sistema de plantillas y conserva la misma estructura.
Sistema de diseño NHS Errores de selección y revisión
Valida el grupo sin seleccionar una opción de antemano
Al inicio no hay ninguna opción seleccionada. Si se continúa sin responder, aparece un error en línea y se asocia el grupo con ese mensaje. A continuación, la vista previa enfoca el error. La selección sigue visible al volver desde la revisión. Estas decisiones sobre el estado de la aplicación se superponen a los controles nativos.
La revisión muestra el método elegido y la identidad de la cita ficticia. La acción indica «Cambiar preferencia». No hay ningún mensaje de confirmación que sugiera que un servicio clínico haya aceptado la preferencia, ni se inventan consejos de salud o requisitos de preparación.
Continúa sin seleccionar un método de asistencia.
Selecciona «Por teléfono» y abre la revisión local.
Cambia la preferencia a «En persona» y comprueba la revisión actualizada.
Sistema de diseño NHS Recursos locales de frontend
Utiliza el paquete y el módulo seleccionados
La configuración copia CSS 10.6.1 y el módulo de navegador a un directorio de recursos estáticos. El módulo exporta initAll; llámalo cuando exista el marcado del componente. El ejemplo independiente utiliza la misma distribución servida localmente y una sobrescritura de Arial aplicada a la página.
Los estilos incluyen reglas de componentes y bases adaptables. El pequeño script que cambia el panel de revisión es código independiente de la aplicación. En un servicio de producción, los datos ficticios de la cita se sustituirían por datos mantenidos y la solicitud de preferencia real se gestionaría mediante su propio backend.
Las comprobaciones clave son que la persona pueda identificar la cita, entender que todavía no se ha confirmado una preferencia de asistencia y cambiar el método elegido sin perder el contexto. Un aviso genérico de éxito ocultaría esta diferencia.
Prueba el uso del grupo de botones de opción y del resumen de details con el teclado; después, comprueba la vista estrecha con un nombre de clínica largo. El error por falta de selección debe llevar de vuelta al grupo. La biblioteca aporta comportamientos reutilizables, mientras que la organización sigue siendo responsable de las normas reales sobre citas y de la información clínica.
El elemento details nativo muestra información adicional sin ocultar la tarea.
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>
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Sistema de diseño NHS Configuración del agente
Punto de partida para la implementación
Coloca los comandos de shell y HTML en sus respectivos archivos. Arial es una sobrescritura explícita para la vista previa independiente; las organizaciones del NHS deben seguir los requisitos reales de licencia tipográfica y marca. El ZIP completo del ejemplo funcional, incluido en Sources, también proporciona las dependencias exactas para la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/nhs.html. No abras ejemplos basados en módulos mediante 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>
Una instrucción para tu proyecto
Instrucción para el agente
Crea una pregunta independiente sobre preferencias de asistencia a citas con NHS.UK Frontend 10.6.1. Utiliza un fieldset y una leyenda para los métodos de asistencia excluyentes, indicaciones asociadas a los botones de opción y un elemento Details nativo para la ayuda opcional. Mantén visibles la pregunta y las instrucciones esenciales. Si se intenta revisar sin responder, muestra un resumen del error enlazado y un error en línea; conserva el método seleccionado al volver de la revisión local. Carga el CSS correspondiente y ejecuta initAll del módulo, con la sobrescritura de Arial para este estudio, documentada explícitamente. No añadas búsquedas de citas, cambios reales de reservas, consejos clínicos ni afirmaciones de identidad del NHS.
05
Sistema de diseño NHS Fuentes y alcance
Estudio independiente sobre preferencias de asistencia a citas, basado en NHS.UK frontend 10.6.1. Sin logotipo del NHS, Frutiger con licencia, reservas reales, instrucciones clínicas ni respaldo implícito.
