Hazlo Lucir Bien

El ServiceCard funciona, pero es simple. Los usuarios juzgan la calidad por la apariencia. Una tarjeta bien estilizada transmite profesionalismo y hace que los servicios ofrecidos sean más atractivos.

Lo que Aprenderás

Estructurar CSS en componentes de Svelte
Crear jerarquía visual con tipografía
Agregar espaciado y diseño
Diseñar un componente de tarjeta atractivo

Empieza con la Estructura

Primero, asegúrate de que el HTML sea 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>

Los nombres de clase claros hacen que el estilizado sea sencillo.

Estilos Base de la Tarjeta

La tarjeta es solo HTML sin formato por ahora. Agreguemos estilos base para el contenedor de la tarjeta:

<!-- 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>

Esto crea:

Fondo blanco limpio
Borde sutil
Esquinas redondeadas
Efecto suave al pasar el cursor

Estilizar la Imagen

A continuación, agrega estilos para la sección de la imagen:

<!-- 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>

Características:

Relación de aspecto consistente
Las imágenes se escalan al pasar el cursor
Color de fondo alternativo mientras carga

Estilizado del Área de Contenido

El siguiente paso será agregar estilos para el contenido 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>

Jerarquía visual:

El título es más grande y en negrita
La descripción es más pequeña y gris
Altura de línea cómoda para la legibilidad

Información Meta

Luego agrega estilo para el precio y la duración:

<!-- 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 Seleccionado

Finalmente, agrega estilo cuando la tarjeta está seleccionada (como en un formulario):

<!-- 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>

El tinte azul muestra la selección claramente.

El Componente Estilizado Completo

Aquí está el componente ServiceCard completamente 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>

Mostrar en una Cuadrícula

En la página de servicios, organiza las tarjetas en una cuadrícula:

<!-- 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>

Esto crea una cuadrícula responsiva que:

Muestra múltiples tarjetas por fila en pantallas anchas
Se apila en una sola columna en dispositivos móviles
Mantiene un espaciado consistente

Principios de Diseño Aplicados

Jerarquía Visual:

El título es prominente (tamaño, peso)
La descripción es secundaria (más pequeña, gris)
El precio llama la atención (color, peso)

Espacios en Blanco:

El relleno separa el contenido de los bordes
Los márgenes separan las secciones
El borde superior crea división visual

Retroalimentación:

El estado hover muestra interactividad
El estado seleccionado confirma la selección
Las transiciones hacen los cambios suaves

Errores Comunes

Demasiados Colores

/* ❌ 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 */

Espaciado 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 */

Resumen

Un ServiceCard bien estilizado utiliza jerarquía visual, espaciado consistente y colores bien pensados. Los estilos con alcance de Svelte mantienen todo organizado. El resultado es un componente de aspecto profesional que aumenta la confianza del usuario.

Puntos clave:

Usa HTML semántico para objetivos de estilizado claros
Crea jerarquía visual con tamaño y peso
Agrega estados hover/seleccionado para la interactividad
Mantén una escala de espaciado consistente

Próximos Pasos

Los estilos estáticos son buenos, pero a veces los estilos necesitan cambiar dinámicamente. Continúa con Clases Dinámicas para aprender sobre estilos condicionales.