Дизайн-система CMS.

Выберите Core или дочернюю тему дизайн-система CMS

Пакет объединяет семейство тем, а не одну фирменную тему оформления

CMS Core предоставляет общие основы интерфейса, а для Healthcare.gov, Medicare.gov и CMS.gov существуют отдельные дочерние дизайн-системы. В этом справочнике зафиксированы версия @cmsgov/design-system 18.1.0 и её core-theme.css. Наличие цвета, логотипа или компонента в дочерней теме не означает, что это правило Core. В примере намеренно используется нейтральный сценарий настройки уведомлений; официальные правительственные баннеры и элементы фирменного стиля не включены.

Доступны пути интеграции через React, Preact, веб-компоненты и ручной вариант с HTML/CSS. В документации рекомендуется использовать компоненты JavaScript, если полезно их встроенное поведение; набор веб-компонентов — это подмножество. В нашем автономном примере используются настоящие Core CSS и приложение JavaScript для редактирования, сохранения и отмены. Мы не утверждаем, что CSS реализует валидацию, маршрутизацию или сохранение данных.

Прочитать вспомогательную спецификацию

Дизайн-система CMS Изучите версионированную тему

Подключите обе таблицы стилей

index.css задаёт правила компонентов, а core-theme.css содержит их переменные. Без темы корректные имена классов могут ссылаться на неопределённые значения. И наоборот, подключение темы Medicare при описании типографики Core создаёт вводящее в заблуждение впечатление, даже если страница отображается. В примере подключены оба ресурса из одного выпуска 18.1.0.

Числовые значения в этом руководстве взяты из версионированной темы. Например, --color-base равен #262626, хотя в общем описании типографики по-прежнему упоминается #333. В теме значение --grid-gutter-width соответствует --spacer-4 (32px), а --grid-form-gutter-width — --spacer-2 (16px). Общее утверждение о полях сетки размером 16px не следует применять ко всем вариантам сетки. Эти различия важны при воспроизведении реального макета.

Прочитать вспомогательную спецификацию

Дизайн-система CMS Типографика и иерархия Core

Одно семейство шрифтов, явные размеры для разных ролей

В Core для заголовков и основного текста используется Open Sans. Цепочка резервных шрифтов в теме 18.1.0 включает Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial и sans-serif. В локальном примере явно указан Arial, чтобы не запрашивать внешние файлы шрифтов; поэтому его метрики отличаются от полной официальной типографики.

Базовый размер основного текста — 1rem, межстрочный интервал — 1.5. Переменные размеров включают 14, 16, 18, 21 и 24px при корневом размере 16px, а затем — более крупные адаптивные роли: 3xl — 30px на мобильных устройствах и 36px на остальных; 4xl — 36px на мобильных устройствах и 48px на остальных; 5xl — 36px на мобильных устройствах, 48px на планшетах и 60px для самого крупного варианта. Это значения темы, а не разрешение использовать самый крупный размер для каждого заголовка страницы. Используйте семантические заголовки и соответствующий класс утилиты или сопоставление ds-content.

Прочитать вспомогательную спецификацию

Дизайн-система CMS Отступы и адаптивный макет

Шаг 8 пикселей и половинный шаг

Значения --spacer-1 — --spacer-7 соответствуют диапазону 8–56px с шагом 8px. --spacer-half равен 4px, а --spacer-none — нулю. Например, класс ds-u-margin--2 задаёт отступ 16px, а не 2rem. Встроенный CSS строки отзыва задаёт вертикальные отступы 16px и нижнюю границу толщиной 2px; для окружающей формы не нужны дополнительные карточки с отступами вокруг каждого ответа.

Максимальная ширина контейнера сайта Core — 1104px; в версионированной теме внешние отступы сайта составляют 3rem, а на мобильных устройствах — 1.5rem. В примере используется более узкая область для чтения шириной 48rem, подходящая для двух коротких строк отзыва. Это ширина, заданная приложением, а не новый токен CMS.

Прочитать вспомогательную спецификацию

Используйте префиксы контрольных точек CMS

Прочитать вспомогательную спецификацию

Дизайн-система CMS Структура строки отзыва и API

Метка, значение и контекстная ссылка для редактирования

Компонент Review оборачивает один элемент, который можно проверить. По умолчанию для его заголовка используется h3; это можно изменить с помощью headingLevel. Далее следуют дочерние элементы, представляющие текущее значение. Свойство editHref задаёт адрес назначения; без него ссылка для редактирования не отображается. Свойство editAriaLabel задаёт понятное доступное имя повторяющейся ссылки Edit. Объявление типов версии 18.1.0 также содержит editText, onEditClick и editContent; пользовательское содержимое editContent заменяет ссылку по умолчанию.

В примере React используются настоящие свойства, проверенные по опубликованному объявлению типов. Указанные пути — иллюстративные маршруты приложения, которые должна реализовать использующая компонент программа. Альтернативный вариант на нативном CSS показывает структуру ds-c-review, ds-c-review__content и ds-c-review__heading; управление навигацией и обновлениями по-прежнему остаётся задачей приложения.

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>;
}

Справочник по коду

Прочитать вспомогательную спецификацию

Дизайн-система CMS Редактирование отдельной строки или раздела

Сделайте переход к исправлению предсказуемым

В шаблоне формы CMS для проверки данных различаются редактирование отдельного ответа и редактирование целого раздела. Форматы уведомлений и языковые предпочтения, которые не зависят друг от друга, удобно редактировать по отдельности. Связанные ответы — например, сведения о членах семьи и их родственных отношениях — может быть лучше редактировать всем разделом, чтобы приложение могло одновременно проверить их согласованность. В официальном руководстве прямо указано, что размещение кнопки Edit для всего раздела рядом с его заголовком не реализовано самим компонентом Review.

В предпросмотре для выбранной строки открывается отдельная группа полей. При нажатии Save обновляется только это значение, а фокус возвращается на кнопку Edit, с которой началось редактирование; Cancel отменяет черновик. Пока редактор открыт, видимый ответ не меняется. Локальное сообщение о состоянии подтверждает фактическое изменение, а не сообщает об успехе только потому, что появилась форма редактирования.

• Используйте одинаковые формулировки вопросов и один и тот же порядок в форме и при проверке.
• Задайте для каждой строки контекстное доступное имя для редактирования, даже если видимая ссылка называется Edit.
• Если связанные ответы нужно менять одновременно, реализуйте редактирование раздела вне компонента для одной строки.

Прочитать вспомогательную спецификацию

Дизайн-система CMS Проверка данных, завершение и достоверность

Экран проверки — не подтверждение отправки

Компонент Review подходит для проверки редактируемых ответов формы, но не для замены результатов поиска. В реальном процессе отправки после проверки шаблон предусматривает отдельное действие окончательной отправки. Перед показом подтверждения это действие должно получить реальный результат от серверной части. В примере вместо этого доступна кнопка Complete local review, и прямо указано, что данные не отправляются и не сохраняются.

В Core используются основной синий #0071bc, красный цвет ошибки #e31c3d, зелёный цвет успеха #12890e и серый цвет границы #d9d9d9. Сохранённое предпочтение обозначается не только цветом, но и текстом. Для фокуса используются светлые и тёмные эталонные цвета темы; не убирайте индикатор, даже если оформляете Edit как минималистичный элемент управления. До итогового сообщения можно добраться с клавиатуры, и оно не скрывает строки отзыва.

Прочитать вспомогательную спецификацию

Дизайн-система CMS Безопасная установка и расширение

Полный путь интеграции CSS и путь с настоящим компонентом

Установите закреплённую версию пакета и подключите css/index.css и css/core-theme.css через экспорты пакета. Потребители React импортируют Review из корневого модуля пакета; для Preact доступна точка входа /preact. Для примера компиляция Sass не требуется. При копировании статического CSS сохраните относительные пути к шрифтам и изображениям или, как в этом примере, явно выберите поддерживаемый резервный вариант.

Пространство имён CMS разделяет макеты ds-l-, компоненты ds-c- и утилиты ds-u-. Не следует оформлять классы приложения так, будто это официальные компоненты, не описанные в документации. В предпросмотре область для чтения и встроенный редактор собраны локально, а в строке отзыва и кнопках используются стили из дистрибутива.

1. Подключите соответствующие компонент Core и тему CSS, затем отобразите две строки отзыва.
2. Свяжите каждое действие редактирования с управляемым редактором; после сохранения или отмены возвращайте фокус.
3. Проверьте изменённые значения, отменённые черновики и окончательное локальное завершение на широком и мобильном экранах.

Прочитать вспомогательную спецификацию

Примеры компонентов дизайн-системы дизайн-система 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>