Deixe-o com Boa Aparência

O ServiceCard funciona, mas está simples. Os usuários julgam a qualidade pela aparência. Um card bem estilizado transmite profissionalismo e torna as ofertas de serviço mais atraentes.

O Que Você Aprenderá

Estruturar CSS em componentes Svelte
Criar hierarquia visual com tipografia
Adicionar espaçamento e layout
Projetar um componente de card atraente

Comece com a Estrutura

Primeiro, certifique-se de que o HTML é semântico:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
	let { service, selected = false } = $props()
</script>

<article class="card" class:selected>
	<div class="card-image">
		<img src={service.image} alt={service.name} />
	</div>

	<div class="card-content">
		<h3 class="card-title">
			<a href="/services/{service.slug}">{service.name}</a>
		</h3>

		<p class="card-description">{service.description}</p>

		<div class="card-meta">
			<span class="price">${service.price}</span>
			<span class="duration">{service.duration} min</span>
		</div>
	</div>
</article>

Nomes de classes claros tornam a estilização simples.

Estilização Base do Card

O Card é apenas HTML puro agora. Vamos adicionar estilos base para o contêiner do card:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<!-- Script ... -->
<!-- HTML ... -->

<style>
	.card {
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		overflow: hidden;
		transition: all 0.2s ease;
	}

	.card:hover {
		border-color: #3b82f6;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
</style>

Isso cria:

Fundo branco limpo
Borda sutil
Cantos arredondados
Efeito de hover suave

Estilize a Imagem

Em seguida, adicione estilos para a seção de imagem:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<!-- Script ... -->
<!-- HTML ... -->

<style>
	/* ... previous styles */

	.card-image {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #f3f4f6;
	}

	.card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.card:hover .card-image img {
		transform: scale(1.05);
	}
</style>

Recursos:

Proporção de aspecto consistente
Imagens aumentam no hover
Cor de fundo de fallback durante o carregamento

Estilização da Área de Conteúdo

O próximo passo será adicionar estilo para o conteúdo de texto:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<!-- Script ... -->
<!-- HTML ... -->

<style>
	/* ... previous styles */

	.card-content {
		padding: 1.25rem;
	}

	.card-title {
		margin: 0 0 0.5rem 0;
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.4;
	}

	.card-title a {
		color: #1f2937;
		text-decoration: none;
	}

	.card-title a:hover {
		color: #3b82f6;
	}

	.card-description {
		margin: 0 0 1rem 0;
		color: #6b7280;
		font-size: 0.9375rem;
		line-height: 1.6;
	}
</style>

Hierarquia visual:

O título é maior e em negrito
A descrição é menor e cinza
Altura de linha confortável para legibilidade

Informações Meta

Em seguida, adicione estilo para o preço e a duração:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<!-- Script ... -->
<!-- HTML ... -->

<style>
	/* ... previous styles */
	.card-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 1rem;
		border-top: 1px solid #f3f4f6;
	}

	.price {
		font-size: 1.25rem;
		font-weight: 700;
		color: #3b82f6;
	}

	.duration {
		font-size: 0.875rem;
		color: #9ca3af;
	}
</style>

Estado Selecionado

Por fim, adicione estilo para quando o card estiver selecionado (como em um formulário):

<!-- filename: src/lib/components/ServiceCard.svelte -->
<!-- Script ... -->
<!-- HTML ... -->

<style>
	/* ... previous styles */
	.card.selected {
		border-color: #3b82f6;
		background: #eff6ff;
	}

	.card.selected .card-title a {
		color: #1d4ed8;
	}
</style>

O tom azul indica a seleção claramente.

O Componente Estilizado Completo

Aqui está o componente ServiceCard totalmente estilizado:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
	let { service, selected = false } = $props()
</script>

<article class="card" class:selected>
	{#if service.image}
		<div class="card-image">
			<img src={service.image} alt={service.name} />
		</div>
	{/if}

	<div class="card-content">
		<h3 class="card-title">
			<a href="/services/{service.slug}">{service.name}</a>
		</h3>

		<p class="card-description">{service.description}</p>

		<div class="card-meta">
			<span class="price">${service.price}</span>
			<span class="duration">{service.duration} min</span>
		</div>
	</div>
</article>

<style>
	.card {
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		overflow: hidden;
		transition: all 0.2s ease;
	}

	.card:hover {
		border-color: #3b82f6;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.card.selected {
		border-color: #3b82f6;
		background: #eff6ff;
	}

	.card-image {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #f3f4f6;
	}

	.card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.card:hover .card-image img {
		transform: scale(1.05);
	}

	.card-content {
		padding: 1.25rem;
	}

	.card-title {
		margin: 0 0 0.5rem 0;
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.4;
	}

	.card-title a {
		color: #1f2937;
		text-decoration: none;
	}

	.card-title a:hover {
		color: #3b82f6;
	}

	.card.selected .card-title a {
		color: #1d4ed8;
	}

	.card-description {
		margin: 0 0 1rem 0;
		color: #6b7280;
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.card-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 1rem;
		border-top: 1px solid #f3f4f6;
	}

	.price {
		font-size: 1.25rem;
		font-weight: 700;
		color: #3b82f6;
	}

	.duration {
		font-size: 0.875rem;
		color: #9ca3af;
	}
</style>

Exibir em uma Grade

Na página de serviços, organize os cards em uma grade:

<!-- filename: src/routes/services/+page.svelte -->
<script>
	import ServiceCard from '$lib/components/ServiceCard.svelte'

	const services = [
		/* ... */
	]
</script>

<h1>Our Services</h1>

<div class="services-grid">
	{#each services as service (service.id)}
		<ServiceCard {service} />
	{/each}
</div>

<style>
	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 1.5rem;
	}
</style>

Isso cria uma grade responsiva que:

Exibe múltiplos cards por linha em telas largas
Empilha em coluna única no mobile
Mantém espaçamento consistente

Princípios de Design Aplicados

Hierarquia Visual:

O título é proeminente (tamanho, peso)
A descrição é secundária (menor, cinza)
O preço chama a atenção (cor, peso)

Espaço em Branco:

O padding separa o conteúdo das bordas
As margens separam as seções
A borda superior cria divisão visual

Feedback:

O estado de hover indica interatividade
O estado selecionado confirma a seleção
As transições tornam as mudanças suaves

Erros Comuns

Cores Demais

/* ❌ Too chaotic */
.price {
	color: #ff6b6b;
}
.duration {
	color: #4ecdc4;
}
.title {
	color: #45b7d1;
}

/* ✅ Cohesive palette */
.price {
	color: #3b82f6;
} /* Primary blue */
.duration {
	color: #9ca3af;
} /* Neutral gray */
.title a {
	color: #1f2937;
} /* Dark text */

Espaçamento Inconsistente

/* ❌ Random values */
.card-content {
	padding: 17px;
}
.card-meta {
	margin-top: 13px;
}

/* ✅ Consistent scale */
.card-content {
	padding: 1.25rem;
} /* 20px */
.card-meta {
	margin-top: 1rem;
} /* 16px */

Resumo

Um ServiceCard bem estilizado utiliza hierarquia visual, espaçamento consistente e cores bem pensadas. Os estilos com escopo do Svelte mantêm tudo organizado. O resultado é um componente com aparência profissional que aumenta a confiança do usuário.

Principais conclusões:

Use HTML semântico para alvos de estilização claros
Crie hierarquia visual com tamanho e peso
Adicione estados de hover/selecionado para interatividade
Mantenha uma escala de espaçamento consistente

Próximos Passos

Estilos estáticos são bons, mas às vezes os estilos precisam mudar dinamicamente. Continue com Classes Dinâmicas para aprender estilização condicional.