Analise a base web da Volvo Cars, priorizada para HTML, os tokens reais do modo claro e o estilo nativo de cartões selecionáveis por meio de um exemplo completo de plano de bagagem, com escolhas independentes, alternância de tema e redefinição.
Estilos de cartões selecionáveis do CSS 2.5.1 da Volvo Cars; controles nativos HTML e lógica original da lista de conferência. · Referência de implementação
02
Referência de design sistema de design Volvo Cars Web
Tokens públicos reais de @volvo-cars/css 2.5.1, compatíveis com a marcação documentada de cartões selecionáveis. São exibidos os valores padrão do modo claro; o modo escuro é fornecido pela mesma folha de estilos.
HTML primeiro: Foundation e escolha de versão sistema de design Volvo Cars Web
Fixe a folha de estilos correspondente ao padrão
O exemplo usa @volvo-cars/css 2.5.1, correspondente à referência de cartões selecionáveis usada na implementação. A versão 3 tem um contrato diferente; instalar o pacote mais recente sem verificar a marcação pode deixar o padrão incompleto. A versão deve constar tanto na configuração quanto no guia: a classe de um componente não garante que todas as versões o estilizem da mesma maneira.
Use deliberadamente a camada web pública
Este estudo importa diretamente os tokens web públicos e a folha de estilos para todas as mídias. Ele não depende do pacote interno EDLS separado. O aplicativo usa apenas HTML, com uma pequena quantidade de JavaScript para a lista de conferência. O CSS instalado cuida da aparência dos cartões selecionáveis, do estilo dos controles e dos papéis do modo de cor; o aplicativo fornece o conteúdo e o estado.
Papéis neutros, tipografia e espaçamento de sistema de design Volvo Cars Web
Mantenha os papéis dos modos claro e escuro conectados
A tabela registra as declarações padrão do modo claro, enquanto data-color-mode seleciona os valores nativos correspondentes do modo escuro. A composição usa papéis de plano de fundo e primeiro plano, em vez de definir texto branco diretamente em todos os cartões. A alternância de tema deve preservar o plano e os itens extras selecionados; mudar a paleta é independente de alterar a lista de conferência.
Diferencie etapas fixas do ritmo fluido da página
Os valores fixos de espaçamento da referência selecionada vão de 2px a 64px. Outros tokens públicos de página usam clamp e round, adaptando-se à janela de visualização. A composição em duas colunas e o espaçamento de 40px do exemplo são escolhas de layout originais em torno dos cartões nativos. A pilha de fontes publicada é mantida, mas os arquivos de fontes da Volvo não estão incluídos; a renderização usa as fontes do sistema disponíveis como alternativa.
Semântica de cartões selecionáveis sistema de design Volvo Cars Web
Use controles de opção para escolher um plano
Os dois cartões de plano contêm controles de opção nativos com o mesmo name, dentro de um fieldset com legend. Cada cartão é um label com espaços para título, metadados e descrição. Clicar no cartão seleciona o controle, e o comportamento padrão do teclado para opções continua disponível. Assim, o plano selecionado é um estado real do formulário, não apenas uma borda decorativa controlada à parte.
Use caixas de seleção para itens adicionais independentes
Água e uma camada extra podem ser selecionadas de forma independente, por isso usam caixas de seleção. Os cartões não contêm links nem botões aninhados: um elemento interativo dentro de um label causaria comportamentos de ativação conflitantes. As ações do resumo ficam fora dos cartões. A camada de formulários publicada de React é uma alternativa quando o design realmente exige conteúdo interativo mais complexo nos cartões.
Mantenha cada grupo de opções dentro de um único fieldset e legend.
Use caixas de seleção para itens adicionais independentes.
Mantenha links e botões fora de um cartão que use apenas um label CSS.
Lista de conferência derivada e confirmação sistema de design Volvo Cars Web
Derive o resumo dos mesmos controles
O resumo combina os itens básicos do plano escolhido com os extras selecionados. Alterar uma opção atualiza o título e os itens básicos do plano, mantendo os extras independentes. A contagem é derivada da lista resultante. Todo o conteúdo de exemplo sobre bagagem é original e evita deliberadamente especificações de veículos, preços ou alegações sobre uma configuração real de compra da Volvo.
Limpe confirmações desatualizadas quando as opções forem alteradas
Sistema de design Volvo Cars Web Modo de cor e composição responsiva
Mantenha o tema separado do estado da lista
O seletor de modo de cor altera data-color-mode no documento. Ele não recria os botões de opção, as caixas de seleção nem o resumo. A folha de estilos nativa aplica transições a algumas superfícies; por isso, a verificação visual deve considerar o tema já estabilizado, e não uma captura feita durante a mudança. Verifique em conjunto o texto, o estado dos controles e o contraste das superfícies.
Empilhe a ordem de leitura em telas estreitas
As opções de bagagem aparecem antes do resumo na ordem do documento. Em telas de celular, a grade de duas colunas passa a ter uma única coluna, preservando essa ordem e todas as ações. Os fieldsets usam min-width:0 para que seu dimensionamento padrão não provoque rolagem horizontal. O conteúdo extenso dos cartões quebra linhas dentro do layout do cartão selecionado, sem ultrapassar o elemento pai.
Sistema de design Volvo Cars Web Código-fonte completo e verificação local
Execute os dois arquivos-fonte com o pacote correspondente
O JavaScript inclui o conteúdo original completo e todos os manipuladores de interação. O CSS contém apenas a composição do aplicativo e um recurso alternativo local para a marca de seleção das caixas de seleção. Use o shell HTML fornecido, salve os dois arquivos-fonte e instale a versão fixada de CSS. Importar apenas a folha de estilos aplicaria estilos aos controles, mas não implementaria a contagem dos itens da lista nem a confirmação local.
Crie o aplicativo vanilla e instale @volvo-cars/css 2.5.1.
Salve main.js, volvo.css e o shell raiz HTML fornecido.
Execute o aplicativo e compare o comportamento dos botões de opção e das caixas de seleção.
Inspecione os temas claro e escuro após a estabilização e o estado redefinido.
Verifique em conjunto as escolhas, o tema e a restauração
Escolha o plano litorâneo, adicione água e confirme que quatro itens aparecem. Mantenha o plano, adicione uma camada e verifique se a confirmação anterior desaparece. Mude para o modo escuro sem perder as escolhas e, em seguida, redefina para o primeiro plano sem extras. Verifique a seleção de botões de opção pelo teclado e a quebra de linhas em telas estreitas; inspecione também as superfícies nos temas claro e escuro após a estabilização.
Sistema de design Volvo Cars Web Exemplos de componentes do sistema de design
main.js — seleção completa do plano
Todas as escolhas, resumo derivado, confirmação local, tema e redefinição.
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();
Substitua o index.html raiz do Vite por este arquivo.
04
Sistema de design Volvo Cars Web Configuração do agente
Ponto de partida para implementação
A versão fixada é compatível com esta implementação de cartões selecionáveis. Os recursos oficiais de fontes não estão incluídos na prévia.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie um estudo original de bagagem para um fim de semana usando o CSS da Volvo Cars 2.5.1 e o código-fonte completo fornecido. Use cartões selecionáveis com rótulos nativos, um grupo de botões de opção em fieldset, extras independentes com caixas de seleção, contagens derivadas, limpeza de confirmações desatualizadas e um estado de tema independente das escolhas. Mantenha todo o conteúdo de exemplo distinto de especificações reais de veículos.
05
Sistema de design Volvo Cars Web Fontes e escopo
Um estudo original de bagagem OpenDesign usando @volvo-cars/css 2.5.1. Não é um configurador de veículos. Os arquivos de fontes da Volvo não estão incluídos; são usados os recursos alternativos nativos da folha de estilos.
