Изучите веб-основу Volvo Cars с приоритетом HTML, фактические токены светлой темы и стили нативных карточек с возможностью выбора на примере полноценного плана упаковки: с независимым выбором, переключением темы и сбросом.
Стили выбираемых карточек Volvo Cars CSS 2.5.1; нативные элементы HTML и оригинальная логика списка. · Справочник по реализации
02
Дизайн-система Volvo Cars Web Справочник по дизайну
Фактические общедоступные токены @volvo-cars/css 2.5.1, соответствующие документированной разметке выбираемых карточек. Показаны значения светлой темы по умолчанию; тёмный режим поддерживается той же таблицей стилей.
Дизайн-система Volvo Cars Web HTML — сначала Foundation, затем выбор версии
Закрепите таблицу стилей, соответствующую шаблону
В примере используется @volvo-cars/css 2.5.1 — версия, соответствующая справочному примеру выбираемых карточек, использованному при реализации. В версии 3 другой контракт, поэтому установка последнего пакета без проверки разметки может привести к неполному отображению шаблона. Указывайте версию не только в руководстве, но и в настройках: наличие класса компонента не гарантирует, что в каждом выпуске он оформлен одинаково.
Используйте общедоступный веб-слой осознанно
В этом примере напрямую подключаются общедоступные веб-токены и таблица стилей для всех типов медиа. Отдельный внутренний пакет EDLS не используется. Приложение написано на обычном HTML, а для списка применяется небольшая часть JavaScript. Установленный CSS отвечает за внешний вид выбираемых карточек, оформление элементов управления и роли цветовых режимов; приложение задаёт содержимое и состояние.
Дизайн-система Volvo Cars Web Нейтральные роли, типографика и отступы
Сохраняйте связь ролей светлого и тёмного режимов
В таблице указаны значения по умолчанию для светлой темы, а data-color-mode выбирает соответствующие встроенные значения для тёмной темы. В композиции используются роли фона и текста, а не жёстко заданный белый текст для каждой карточки. Переключение темы не должно сбрасывать выбранный план и дополнительные пункты: смена цветовой палитры не зависит от изменения списка.
Отличайте фиксированные шаги от адаптивного ритма страницы
В выбранном примере фиксированные значения отступов варьируются от 2px до 64px. В других общедоступных токенах страницы используются clamp и round, поэтому они адаптируются к размеру окна просмотра. Двухколоночная композиция примера и расстояние 40px — оригинальные решения компоновки встроенных карточек. Опубликованный стек шрифтов сохранён, но файлы шрифтов Volvo не включены в комплект; при отображении используется доступный системный шрифт-запасной вариант.
Дизайн-система Volvo Cars Web Семантика выбираемых карточек
Используйте переключатели для выбора одного плана
В карточках двух планов размещены встроенные переключатели с одинаковым значением name внутри fieldset с legend. Каждая карточка — это label с областями для заголовка, метаданных и описания. Нажатие на карточку выбирает соответствующий переключатель, при этом сохраняется стандартное управление с клавиатуры. Выбранный план — это реальное состояние формы, а не декоративная рамка, которой отдельно управляет код.
Используйте флажки для независимых дополнений
Воду и дополнительный слой одежды можно выбрать независимо, поэтому для них используются флажки. В карточках нет вложенных ссылок или кнопок: интерактивный элемент внутри label привёл бы к конфликтующему поведению при активации. Действия в сводке расположены за пределами карточек. Опубликованный слой форм React подойдёт как альтернатива, если проекту действительно нужно более сложное интерактивное содержимое карточек.
Размещайте группу переключателей внутри одного fieldset с legend.
Используйте флажки для независимых дополнений.
Размещайте ссылки и кнопки вне карточки CSS, содержащей только label.
Дизайн-система Volvo Cars Web Список вещей и подтверждение с автоматическим обновлением
Формируйте сводку из тех же элементов управления
Сводка объединяет базовые вещи выбранного плана с выбранными дополнениями. При смене переключателя обновляются название плана и базовый список вещей, а независимые дополнения сохраняются. Количество рассчитывается по получившемуся списку. Всё содержимое примера о сборе вещей оригинальное; оно намеренно не содержит характеристик автомобилей, цен и утверждений о реальной комплектации Volvo при покупке.
Сбрасывайте устаревшее подтверждение при изменении выбора
Дизайн-система Volvo Cars Web Цветовой режим и адаптивная композиция
Не связывайте тему с состоянием списка вещей
Список выбора цветового режима изменяет data-color-mode документа. Переключатели, флажки и сводка при этом не создаются заново. Некоторые поверхности плавно меняют цвет средствами встроенной таблицы стилей, поэтому при визуальной проверке следует оценивать уже установившуюся тему, а не снимок экрана, сделанный в середине перехода. Проверяйте текст, состояние элементов управления и контраст поверхностей вместе.
Сохраняйте порядок чтения при узком экране
Выбор вещей для поездки расположен в документе перед сводкой. На экранах телефона двухколоночная сетка перестраивается в одноколоночную, сохраняя этот порядок и доступность всех действий. Для fieldset задано min-width:0, чтобы размер по умолчанию не приводил к горизонтальной прокрутке. Длинное содержимое карточек переносится внутри компоновки выбранной карточки, а не выходит за её границы.
Дизайн-система Volvo Cars Web Полный исходный код и локальная проверка
Запустите два исходных файла с соответствующим пакетом
В JavaScript содержится всё оригинальное содержимое и все обработчики взаимодействий. В CSS есть только композиция приложения и локальный запасной вариант отображения галочки у флажка. Используйте предоставленную оболочку HTML, сохраните два исходных файла и установите закреплённый выпуск CSS. Одна лишь загрузка таблицы стилей оформит элементы управления, но не реализует подсчёт пунктов списка и локальное подтверждение.
Создайте приложение на vanilla и установите @volvo-cars/css 2.5.1.
Сохраните main.js, volvo.css и предоставленную корневую оболочку HTML.
Запустите приложение и проверьте поведение переключателей и флажков.
Проверьте установившиеся светлую и тёмную темы, а также состояние после сброса.
Проверьте выбор, тему и восстановление состояния
Выберите план для отдыха на побережье, добавьте воду и убедитесь, что отображаются четыре пункта. Оставьте план, добавьте дополнительный слой одежды и проверьте, что прежнее подтверждение исчезло. Переключитесь на тёмную тему, не теряя выбор, затем сбросьте настройки до первого плана без дополнений. Проверьте выбор с клавиатуры и перенос содержимого на узком экране, а также установившиеся светлую и тёмную поверхности.
Дизайн-система Volvo Cars Web Примеры компонентов дизайн-системы
main.js — полный пример выбора плана
Все варианты выбора, автоматически обновляемая сводка, локальное подтверждение, тема и сброс.
javascript
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.</p></main>`;
const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city';
function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;}
document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render();
Закреплённая версия соответствует этой реализации выбираемых карточек. Официальные файлы шрифтов не включены в предварительный просмотр.
sh
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Создайте оригинальный пример списка вещей для выходных с помощью Volvo Cars CSS 2.5.1 и предоставленного полного исходного кода. Используйте выбираемые карточки на основе label, группу переключателей в fieldset, независимые дополнительные пункты с флажками, автоматический подсчёт, сброс устаревшего подтверждения и состояние темы, не зависящее от выбора. Всё содержимое примера должно отличаться от реальных характеристик автомобилей.
05
Дизайн-система Volvo Cars Web Источники и область применения
Оригинальный пример OpenDesign — список вещей для поездки, созданный с помощью @volvo-cars/css 2.5.1. Это не конфигуратор автомобиля. Файлы шрифтов Volvo не включены; используются встроенные запасные варианты таблицы стилей.
