Cards

O Cards mostra itens de uma lista: serviços, produtos do catálogo, itens relacionados. Cada cartão tem imagem ou ícone, título, texto e, se você preencher, um preço e um endereço. Com endereço, o cartão inteiro é um link.

As duas variantes:

• grid: cartões em grade de 2 a 4 colunas; 3 por padrão. A propriedade columns escolhe o número.
• alternating: um cartão por linha, com a imagem e o texto trocando de lado a partir de 768 px. Abaixo disso, a imagem fica em cima.

Confira a conta de colunas antes de publicar: um cartão sozinho na última linha parece erro de layout.

Cards

Pasta: ui/sections/cards

Variantes

Id	Variante	Tom
cards-grid-image-light	grid	light
cards-grid-icon-gray	grid	gray
cards-grid-price-light	grid	light
cards-grid-4-light	grid	light
cards-alternating-image-light	alternating	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	"grid" | "alternating"	Não	—
columns	2 | 3 | 4	Não	Desktop columns; defaults to 3.
title	string	Sim	—
intro	string	Não	—
items	readonly CardItem[]	Sim	—
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—

Onde aparece nos templates

• grid: templates/one-page/files/src/data/content.ts:73 (serviços da página única), templates/multi-page/files/src/pages/services.ts:30 (lista de serviços do site) e templates/multi-page/models/catalogo/files/src/pages/item.ts:93 (itens relacionados, com 2 ou 3 colunas conforme a quantidade).

Captura da primeira variante do catálogo (grid com imagem, em 1280 px):

A mesma variante em 360 px: