Una sección de servicios permite presentar de forma ordenada las principales soluciones, categorías o áreas de trabajo de una empresa.

Una estructura habitual puede ser:

                NUESTROS SERVICIOS

        Soluciones para hacer crecer tu negocio

      Una introducción breve de la propuesta.


┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│     ICONO       │ │     ICONO       │ │     ICONO       │
│                 │ │                 │ │                 │
│ Servicio A      │ │ Servicio B      │ │ Servicio C      │
│                 │ │                 │ │                 │
│ Descripción...  │ │ Descripción...  │ │ Descripción...  │
│                 │ │                 │ │                 │
│ Ver servicio →  │ │ Ver servicio →  │ │ Ver servicio →  │
└─────────────────┘ └─────────────────┘ └─────────────────┘

                  [ VER TODOS ]

En computadora podemos mostrar varias Cards en una misma fila.

En tablet pueden reorganizarse.

Y en celular deberían transformarse en una estructura vertical fácil de leer:

NUESTROS SERVICIOS

Título de la sección

Descripción


┌─────────────────────────┐
│ ICONO                   │
│ Servicio A              │
│ Descripción...          │
│ Ver servicio →          │
└─────────────────────────┘

┌─────────────────────────┐
│ ICONO                   │
│ Servicio B              │
│ Descripción...          │
│ Ver servicio →          │
└─────────────────────────┘

┌─────────────────────────┐
│ ICONO                   │
│ Servicio C              │
│ Descripción...          │
│ Ver servicio →          │
└─────────────────────────┘

En este tutorial aprenderás a construir esta sección desde cero utilizando:

• Section;

• Container;

• Grid Row;

• Card;

• Font Icon o Image;

• Heading;

• Paragraph;

• Link;

• Grid responsive;

• Estilo;

• Navigator;

• Classes y Linked styles.

También veremos cómo evitar problemas habituales como:

• Cards de diferentes alturas;

• textos demasiado largos;

• Buttons desalineados;

• iconos inconsistentes;

• Cards que parecen clicables pero no lo son;

• cuatro columnas diminutas en tablet;

• diseños que funcionan con textos de ejemplo pero se rompen con contenido real.

Antes de comenzar: define qué representa cada Card

Una Card debería representar una unidad clara.

Por ejemplo:

DISEÑO WEB

COMERCIO ELECTRÓNICO

AUTOMATIZACIONES

Evita mezclar niveles diferentes

Por ejemplo:

Diseño web
Productos
Consultoría personalizada para grandes empresas
Contacto

Aquí no todos los elementos representan el mismo tipo de contenido.

Una sección de servicios debería mantener una lógica común

Por ejemplo:

SERVICIOS

Diseño web
Marketing
Consultoría
Soporte

O:

SOLUCIONES

Página web
E-commerce
Catálogo digital
Portal de clientes

Antes de diseñar pregunta

¿Todas estas Cards responden a la misma pregunta?

Por ejemplo:

¿Qué servicios ofrecemos?

Si la respuesta es sí, la estructura tiene sentido.

¿Cuántas Cards debería mostrar?

No existe un número universal.

Una sección puede tener:

• 3;

• 4;

• 6;

• más Cards.

Pero cuanto mayor sea la cantidad, más importante será organizar correctamente el contenido.

Tres servicios

Una composición muy cómoda es:

4 + 4 + 4

dentro del sistema de 12 columnas.

Resultado

[ Servicio A ][ Servicio B ][ Servicio C ]

Cuatro servicios

Puedes utilizar:

3 + 3 + 3 + 3

Resultado

[ A ][ B ][ C ][ D ]

Pero cuidado

Cuatro Cards en una misma fila necesitan suficiente ancho.

En determinados diseños:

• título;

• descripción;

• CTA;

pueden quedar demasiado comprimidos.

No elijas cuatro columnas solamente porque tienes cuatro servicios

También puedes utilizar:

[ A ][ B ]

[ C ][ D ]

especialmente cuando cada Card tiene bastante contenido.

Seis servicios

Puede utilizarse:

[ A ][ B ][ C ]

[ D ][ E ][ F ]

Esto suele ser más fácil de leer que:

[ A ][ B ][ C ][ D ][ E ][ F ]

en una sola fila.

Primera regla

La cantidad de columnas debe depender del contenido de cada Card, no solamente de la cantidad total de servicios.

¿Qué debería contener una Card de servicio?

Una estructura sólida puede ser:

Card
├── Font Icon / Image
├── Heading
├── Paragraph
└── Link

Por ejemplo

[ ICONO ]

Diseño de Páginas web

Creamos experiencias digitales adaptadas a las necesidades de cada proyecto.

Ver servicio →

Cada Card debería permitir responder rápidamente

¿QUÉ ES?

mediante el Heading.

Y:

¿QUÉ ME OFRECE?

mediante la descripción.

Y cuando exista más información:

¿DÓNDE PUEDO CONOCER MÁS?

mediante el Link.

No conviertas cada Card en una página completa

El objetivo es resumir.

Paso 1. Abre el Editor de bloques

Ingresa desde:

Menúes

y selecciona el:

Bloque editable

correspondiente mediante el icono de paleta.

Puedes construir esta sección en

• Home;

• Servicios;

• otra sección personalizada;

según la Página web.

Si estás en Home

por ejemplo, puedes utilizar:

Bloque editable arriba de los productos destacados

si esa posición tiene sentido dentro del recorrido.

No existe una posición universal

La ubicación debe responder al contenido de la página.

Paso 2. Crea una Section

Agrega o selecciona una:

Section

Para este ejemplo utilizaremos:

Container width:
Boxed

Y:

Container height:
Auto

No necesitamos Full Height

porque esta sección debería crecer naturalmente según:

• encabezado;

• Cards;

• espacios.

Evita:

height: 800px

para intentar mantener una altura específica.

Si posteriormente agregas más texto

puede romperse.

Paso 3. Agrega Padding general

La Section necesita separación respecto del contenido anterior y posterior.

Puedes trabajar mediante:

Estilo → Padding

Por ejemplo

una referencia inicial podría ser:

Padding top:
72px

Padding bottom:
72px

No son medidas obligatorias.

Mobile puede necesitar menos

Por ejemplo:

40–48px

según el diseño.

Lo importante es construir suficiente aire visual.

Paso 4. Construye el encabezado de la sección

Antes de mostrar las Cards,

explica qué representa el grupo.

Puedes utilizar:

Paragraph
Heading
Paragraph

Por ejemplo

Texto superior:

NUESTROS SERVICIOS

Heading:

Soluciones digitales para cada etapa de tu negocio

Paragraph:

Conoce las herramientas y servicios que puedes combinar según las necesidades de tu empresa.

El contenido es solamente ilustrativo.

Utiliza información real en tu Página web.

Paso 5. Utiliza correctamente el Heading

Si el H1 ya se encuentra en el Hero:

esta sección puede utilizar:

H2

Por ejemplo

H1
Solución principal de la Página web

    H2
    Nuestros servicios

No utilices otro H1 solamente porque quieres un Heading grande.

Si necesitas aumentar su tamaño:

Estilo → Typography

Paso 6. Limita el ancho del encabezado

Una sección de Cards puede funcionar muy bien con:

Heading centrado

y una descripción de ancho controlado.

Conceptualmente:

              NUESTROS SERVICIOS

       Soluciones digitales para tu negocio

  Una descripción corta que explica el contenido.

No necesitas que el Paragraph abarque toda la pantalla.

Puedes utilizar:

Max Width

cuando sea necesario.

Esto mejora la lectura.

Paso 7. Decide si el encabezado será centrado o alineado a la izquierda

Ambas opciones pueden funcionar.

Centrado

puede ser apropiado para una sección simétrica:

             TÍTULO

         descripción

[ CARD ][ CARD ][ CARD ]

Alineado a la izquierda

puede utilizar:

TÍTULO
Descripción

[ CARD ][ CARD ][ CARD ]

No existe una regla universal.

Para este ejemplo utilizaremos:

Text align:
center

en el encabezado.

Las Cards pueden mantener:

Text align:
left

Esto crea una jerarquía clara.

Paso 8. Agrega Grid Row

Debajo del encabezado agrega:

Grid Row

Para este ejemplo crearemos:

3 columnas

En desktop:

4 + 4 + 4

Conceptualmente:

Grid Row
├── Column 4
├── Column 4
└── Column 4

Paso 9. Configura responsive antes de crear todo el contenido

Este paso es muy importante.

No esperes a tener las Cards terminadas.

Desktop

Queremos:

[ A ][ B ][ C ]

Tablet

Podemos optar por:

[ A ][ B ]

[ C ]

O mantener tres columnas

si las Cards siguen siendo legibles.

En muchos casos:

2 columnas

puede resultar más cómodo en tablet.

Mobile

Queremos:

[ A ]

[ B ]

[ C ]

Cada Card ocupa el ancho disponible.

Paso 10. ¿Qué pasa con la tercera Card en una grilla 2 + 1?

Puede quedar:

[ A ][ B ]

[ C ]

No es necesariamente un error.

Pero visualmente puedes preguntarte

si quieres:

      [ C ]

centrada,

o comenzar una segunda fila normalmente.

Antes de agregar CSS especial

evalúa si realmente necesitas centrar la última Card.

Una grilla normal puede ser completamente válida.

Otra alternativa para tres Cards

mantener:

3 columnas

hasta que el ancho deje de ser cómodo,

y luego pasar directamente a:

1 columna

El contenido decide.

No existe obligación de utilizar exactamente los mismos breakpoints en todas las secciones.

Paso 11. Agrega la primera Card

Dentro de la primera Column:

agrega:

Card

Después utiliza:

Navigator

para identificar su estructura.

La Card puede incluir o permitir incorporar diferentes elementos.

Para nuestro diseño queremos:

Card
├── Visual
├── Heading
├── Paragraph
└── Link

No asumiremos controles internos exactos de Card

si no aparecen en la instancia que estés utilizando.

Puedes agregar los componentes necesarios dentro de la estructura.

Paso 12. Elige entre Font Icon o Image

Para la parte visual puedes utilizar:

Font Icon

o:

Image

Font Icon puede ser ideal cuando necesitas

un símbolo sencillo

Por ejemplo

• soporte;

• seguridad;

• entrega;

• configuración;

• herramientas.

Image puede ser mejor cuando necesitas

• fotografía;

• captura;

• producto;

• ilustración compleja.

No necesitas utilizar ambos dentro de todas las Cards.

Ejemplo con iconos

[ ICONO ]

Diseño web

Ejemplo con imágenes

[ IMAGEN ]

Diseño web

Mantén consistencia

No hagas:

Card A → Font Icon
Card B → fotografía
Card C → emoji

sin una intención visual clara.

Para este caso utilizaremos Font Icon

Paso 13. Agrega Font Icon

Dentro de la primera Card agrega:

Font Icon

Selecciona un icono que represente el servicio.

Por ejemplo

para:

Diseño de Páginas web

puedes elegir un símbolo relacionado con:

• pantalla;

• diseño;

• web;

según los iconos disponibles.

No utilices un icono simplemente porque se ve atractivo.

Debe ayudar a reconocer el concepto.

Paso 14. Define un tamaño coherente

El icono debe tener suficiente presencia

sin competir con el Heading.

Por ejemplo

una referencia puede ser:

36–48px

dependiendo del estilo.

No es obligatorio.

Evita:

120px

en una Card pequeña

si hace que todo el diseño dependa del icono.

Paso 15. Crea una Class compartida para los iconos

Por ejemplo:

service-card-icon

Así todos pueden compartir:

• tamaño;

• color;

• Margin.

Linked styles puede ayudarte a mantener la consistencia.

Si cambias:

color

en un icono

y cambian los demás:

probablemente es exactamente lo que buscas.

No agregues IDs individuales para mantener el mismo diseño.

Paso 16. Agrega el Heading de la Card

Debajo del icono agrega:

Heading

Por ejemplo:

Diseño de Páginas web

Si el encabezado de la sección es H2,

los títulos de Cards pueden utilizar un nivel inferior apropiado,

por ejemplo:

H3

Conceptualmente:

H2
Nuestros servicios

    H3
    Diseño web

    H3
    Comercio electrónico

    H3
    Automatizaciones

Esto crea una estructura clara.

No utilices:

Paragraph en Bold

solamente para evitar Heading.

Si representa el título de una unidad:

Heading puede ser más apropiado.

Paso 17. Mantén títulos similares en longitud cuando sea posible

Por ejemplo:

Diseño web

E-commerce

Automatizaciones

Son relativamente compactos.

Si uno es:

Servicios profesionales de consultoría para la transformación digital de empresas

puede ocupar varias líneas y alterar la composición.

Eso no significa que debas mentir o recortar información importante.

Busca una versión editorial más clara:

Consultoría digital

Y amplía en Paragraph.

Paso 18. No fijes la altura del título para obligarlos a coincidir

Evita:

.service-card h3 {
    height: 80px;
}

Puede funcionar con los textos actuales.

Pero si:

• aumenta el Font size;

• cambia el contenido;

• cambia el idioma;

puede cortarse.

Es mejor trabajar con contenido razonablemente equilibrado.

Paso 19. Agrega el Paragraph

Debajo del Heading agrega:

Paragraph

Ejemplo:

Creamos Páginas web adaptadas a los objetivos y necesidades de cada proyecto.

La descripción debería explicar:

qué ofrece ese servicio

No repetir solamente el nombre.

Ejemplo débil

Heading:

Diseño web

Paragraph:

Servicio de diseño web.

Mejor

Diseñamos experiencias digitales adaptadas a la identidad y objetivos de tu empresa.

si esa afirmación es real.

Paso 20. Mantén descripciones de extensión razonable

Las Cards funcionan mejor cuando pueden escanearse.

Evita:

un párrafo de 150 palabras

dentro de cada servicio.

Si necesitas explicarlo en profundidad:

utiliza una página específica.

La Card debe funcionar como resumen.

Paso 21. ¿Todas las descripciones deben tener exactamente la misma cantidad de caracteres?

No.

Esto:

80 caracteres exactos

no es un requisito de diseño.

La prioridad es:

• claridad;

• información real.

Pero sí conviene evitar extremos

como:

Card A:
12 palabras

y:

Card B:
120 palabras

Si eso ocurre

quizá el contenido necesita edición.

Paso 22. Agrega el CTA individual

Debajo del Paragraph agrega:

Link

Por ejemplo:

Conocer servicio →

Configura una URL real.

Cada Card puede enlazar a:

• página del servicio;

• sección específica;

• formulario;

según tu Página web.

No utilices:

#

Paso 23. CTA individual vs CTA general

No todas las secciones necesitan ambos.

Opción A: CTA individual

[ Diseño web ]
Ver servicio →

[ E-commerce ]
Ver servicio →

[ Automatización ]
Ver servicio →

Esto es útil cuando cada servicio tiene:

una página propia

Opción B: CTA general

Cards sin Link individual:

[ Diseño web ]

[ E-commerce ]

[ Automatización ]

        [ VER TODOS LOS SERVICIOS ]

Puede ser apropiado cuando todos conducen a:

una misma página de Servicios

Opción C: ambos

Links individuales
+
Ver todos los servicios

Puede funcionar,

pero pregunta si realmente aporta.

No satures la sección con enlaces.

Paso 24. Card completa clicable vs Link explícito

Una Card visualmente destacada puede hacer pensar al visitante:

“puedo hacer clic en cualquier lugar”

Pero una Card no es automáticamente clicable.

Si solo has agregado:

• icono;

• Heading;

• Paragraph;

hacer clic sobre el fondo puede no realizar ninguna acción.

Por eso

una solución muy clara es utilizar:

Link visible

Por ejemplo:

Ver servicio →

Si deseas convertir toda la Card en una única zona clicable

eso requiere revisar la estructura correcta.

No asumas que agregar una URL al Heading vuelve clicable toda la Card.

Tampoco envuelvas Links dentro de Links.

Para la mayoría de las secciones

un CTA explícito es más sencillo y claro.

Paso 25. No hagas que una Card parezca clicable si no lo es

Por ejemplo

si una Card tiene:

cursor visual
+
Hover fuerte
+
elevación

pero no hay acción,

el visitante puede intentar seleccionarla.

Si la Card es informativa

mantén un Hover moderado o ninguno.

Si tiene Link

puedes utilizar Hover como refuerzo.

Diseño debe coincidir con comportamiento.

Paso 26. Personaliza la Card

Ahora puedes trabajar:

• Background;

• Border;

• Border radius;

• Padding;

• sombra mediante CSS cuando corresponda.

Una Card moderna no necesita demasiados efectos.

Ejemplo conceptual

Background:
blanco

Border:
sutil

Border radius:
16px

Padding:
28–32px

Son solamente referencias.

No valores obligatorios.

Paso 27. No uses Border radius diferente en cada Card

Evita:

Card A → 8px
Card B → 24px
Card C → 40px

sin intención.

Las Cards pertenecen al mismo sistema visual.

Utiliza estilos compartidos.

Paso 28. Asigna una Class a todas las Cards

Por ejemplo:

service-card

Y a la Section:

services-section

Así puedes limitar futuras reglas:

.services-section .service-card {
    ...
}

Mucho mejor que:

.card {
    ...
}

Porque .card puede utilizarse en otros lugares.

Paso 29. Clona la Card completa

Una vez que la primera Card está correctamente estructurada:

selecciona la Card completa mediante:

Navigator

Después utiliza:

Clonar

Recuerda

Waclis no solicita confirmación.

El objetivo es obtener:

Card A
Card B
Card C

con la misma estructura.

No clones individualmente:

• icono;

• Heading;

• Paragraph;

• Link;

si necesitas copiar la unidad completa.

Clonar la Card mantiene mejor la consistencia.

Paso 30. Después de clonar, actualiza todo

Para la segunda Card revisa:

ICONO

HEADING

PARAGRAPH

LINK

URL

ID

si existe.

No cambies solamente el título.

Error clásico

Card original:

Diseño web

Ver servicio →
/diseno-web

Copia:

E-commerce

Ver servicio →
/diseno-web

El visitante termina en el servicio equivocado.

Prueba cada Link después de clonar.

Paso 31. IDs y Cards clonadas

Si la Card original posee:

id="service-web"

la copia no debería conservar:

id="service-web"

Puedes cambiarla a:

service-ecommerce

cuando realmente necesites IDs.

Pero si no necesitas un ID:

no agregues uno por obligación.

Las Classes pueden mantenerse compartidas.

Paso 32. Linked styles después de clonar

Este es uno de los beneficios de trabajar con Cards.

Si todas comparten:

service-card

puedes modificar:

• Padding;

• Border;

• Background;

• Typography;

de forma consistente.

Si cambias una y cambian las tres:

puede ser correcto.

Si quieres destacar solo una Card

por ejemplo:

SERVICIO DESTACADO

agrega una variante.

Ejemplo:

service-card service-card-featured

No rompas el estilo base.

Paso 33. Card destacada

Puede utilizar:

• Background distinto;

• Border;

• Badge.

Por ejemplo:

[ MÁS SOLICITADO ]

E-commerce
...

Pero solo utiliza:

Más solicitado

si existe una base real para afirmarlo.

No inventes:

• popularidad;

• número de clientes;

• recomendaciones.

También recuerda

un Badge como:

NUEVO

requiere mantenimiento.

Cuando deje de ser nuevo:

retíralo.

Paso 34. El problema de Cards de diferentes alturas

Esta es una de las situaciones más comunes.

Ejemplo

┌────────────┐
│ Servicio A │
│ texto      │
│ corto      │
│            │
│ Ver más    │
└────────────┘

Mientras otra tiene:

┌────────────┐
│ Servicio B │
│ descripción│
│ mucho más  │
│ extensa    │
│ que ocupa  │
│ más líneas │
│ Ver más    │
└────────────┘

Las Cards pueden terminar con alturas diferentes.

¿Es un problema?

No necesariamente.

Pero si están en una misma fila

una apariencia uniforme puede resultar más ordenada.

Paso 35. No soluciones alturas mediante height fija

Evita:

.service-card {
    height: 420px;
}

Porque una Card podría necesitar:

450px

cuando el texto crece.

Resultado:

• contenido cortado;

• overflow;

• Button fuera de la Card.

Utiliza estructura flexible.

Paso 36. Primera solución: equilibrar el contenido

Antes de CSS:

revisa el contenido.

Si Card A tiene:

20 palabras

y Card B:

100 palabras

quizá la sección no está editorialmente equilibrada.

Resume.

No para conseguir una cantidad exacta de caracteres,

sino para que todas las Cards cumplan la misma función:

presentar rápidamente un servicio.

Paso 37. Segunda solución: estructura flexible

Si necesitas que las Cards utilicen toda la altura disponible de sus Columns

puedes recurrir a una estructura Flexbox localizada.

Por ejemplo, si has creado Classes propias:

services-section
service-card
service-card-cta

CSS conceptual:

.services-section .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.services-section .service-card-cta {
    margin-top: auto;
}

¿Qué consigue esto?

Conceptualmente:

┌─────────────────┐
│ Icono           │
│ Heading         │
│ Texto corto     │
│                 │
│                 │
│ Ver servicio → │
└─────────────────┘

Y:

┌─────────────────┐
│ Icono           │
│ Heading         │
│ Texto más largo │
│ ocupa varias    │
│ líneas          │
│ Ver servicio → │
└─────────────────┘

Los CTA pueden alinearse hacia el final

sin fijar una altura rígida para el contenido.

Importante

Los nombres:

services-section
service-card
service-card-cta

son ejemplos.

Debes agregar tus propias Classes y verificar la estructura real.

No copies el CSS si no existen esas Classes.

Paso 38. ¿Necesito Flexbox manual?

No siempre.

Primero observa cómo se comportan:

• Grid;

• Columns;

• Card.

Puede que el diseño ya quede correctamente.

Agrega CSS solamente si existe un problema real.

Más código no significa mayor profesionalismo.

Paso 39. Mantén el CTA al final solo si mejora el diseño

Un CTA alineado al fondo puede aportar orden.

Pero no agregues:

100px de espacio vacío

solo para lograrlo.

El espacio debe surgir naturalmente de una estructura flexible.

Paso 40. Igual altura no significa igual cantidad de contenido

No rellenes una Card corta con:

texto innecesario

solo para igualar visualmente.

El objetivo sigue siendo claridad.

Paso 41. Grid Gap o separación entre Cards

Las Cards necesitan espacio entre sí.

Conceptualmente:

[CARD]   [CARD]   [CARD]

No:

[CARD][CARD][CARD]

sin respiración.

La separación puede provenir de:

• estructura;

• Padding de Column;

• Margin;

• CSS localizado.

Utiliza el método que mejor se integre con tu Grid.

No agregues:

margin-right: 37px

a cada Card

sin considerar la última.

La estructura de Grid suele simplificar este problema.

Paso 42. Espacio entre encabezado y Cards

El Heading general también necesita distancia respecto de la grilla.

Por ejemplo:

Título de sección
↓
Descripción
↓
[ espacio ]
↓
Cards

Este espacio ayuda a distinguir:

INTRODUCCIÓN

de:

CONTENIDO PRINCIPAL

Paso 43. Hover de Card

Puedes crear un Hover sutil.

Por ejemplo:

Normal:

Border suave
Sombra mínima

Hover:

Sombra ligeramente mayor

O un pequeño cambio de Border.

Evita:

Card gira 15 grados
sube 30px
cambia de color
icono rota

todo simultáneamente.

El Hover debe reforzar la interacción,

no convertirse en la protagonista.

Paso 44. Hover y dispositivos táctiles

Recuerda

celulares y tablets táctiles no funcionan igual que un mouse.

Por eso

ninguna información esencial debería aparecer únicamente:

al hacer Hover

Ejemplo incorrecto

Normal:

solo icono

Hover:

aparece nombre y descripción

En touch

esa experiencia puede ser difícil o confusa.

Mantén la información principal visible.

Paso 45. Hover del icono

Puedes modificar:

• color;

• Background;

de forma moderada.

Pero cuidado con Linked styles.

Si los iconos comparten Class:

el Hover puede aplicarse a todos mediante la regla adecuada.

Eso suele ser deseable.

No construyas una regla diferente para cada Card

si la interacción es la misma.

Paso 46. El Link debería tener Hover propio

Por ejemplo:

Ver servicio →

En Hover puede:

• cambiar de color;

• subrayarse;

• mover ligeramente una flecha si el diseño lo contempla.

Pero no necesitas JavaScript.

CSS es suficiente para cambios visuales.

Paso 47. No utilices active como si significara “Card seleccionada”

El estado:

active

dentro de Estilo es un estado CSS.

No significa necesariamente:

“esta Card es el servicio actual”

No confundas estado de interacción con una selección persistente.

Si quieres destacar una Card permanentemente:

utiliza una Class propia.

Paso 48. Cards con Image

Si prefieres Image en lugar de Font Icon,

la estructura puede ser:

Card
├── Image
├── Heading
├── Paragraph
└── Link

Ejemplo

┌────────────────────────┐
│                        │
│        IMAGEN          │
│                        │
├────────────────────────┤
│ Diseño web             │
│ Descripción...         │
│ Ver servicio →         │
└────────────────────────┘

Aquí debes cuidar especialmente:

• proporción;

• Height visual;

• Cover vs Contain.

Paso 49. Mantén imágenes consistentes

Evita:

Card A → imagen panorámica 16:9
Card B → imagen cuadrada
Card C → imagen vertical

sin un tratamiento común.

El resultado puede verse irregular.

Puedes utilizar un marco visual consistente.

Por ejemplo:

16:9

para fotografías,

si el contenido admite ese recorte.

Pero no fuerces Cover si corta información esencial.

Paso 50. Alt de imágenes

Cada Image necesita una descripción adecuada cuando corresponda.

No utilices:

servicio1

Describe lo relevante de la imagen.

Si la Image es completamente decorativa

evalúa su tratamiento correspondiente.

Paso 51. No dupliques la información visual

Si Font Icon ya representa:

entrega

no necesitas necesariamente:

icono
+
foto de camión
+
segundo icono

en la misma pequeña Card.

Simplifica.

Paso 52. Cuatro Cards en desktop

Si tienes cuatro servicios cortos:

puedes utilizar:

3 + 3 + 3 + 3

Por ejemplo:

[ WEB ][ E-COMMERCE ][ HOSTING ][ SOPORTE ]

Pero revisa los títulos.

Si uno ocupa tres líneas:

la Card puede quedar demasiado estrecha.

Otra opción:

6 + 6

dos por fila.

Más ancho puede permitir:

• descripción más clara;

• mejor iconografía.

Paso 53. Cuatro Cards en tablet

Una configuración habitual puede ser:

[ A ][ B ]

[ C ][ D ]

Es decir:

dos columnas.

Suele ser más legible que:

[ A ][ B ][ C ][ D ]

en un ancho reducido.

Paso 54. Cuatro Cards en mobile

A

B

C

D

No intentes mantener:

2 columnas

en todos los teléfonos

si el contenido se vuelve estrecho.

Puede funcionar con Cards muy visuales y poco texto,

pero no debe asumirse.

Paso 55. Seis Cards

Puedes utilizar:

Desktop:

3 + 3

filas de tres Cards.

Tablet:

2 + 2 + 2

Mobile:

1 + 1 + 1 + 1 + 1 + 1

El resultado es predecible y fácil de mantener.

Paso 56. ¿Qué hacer si tienes diez o más servicios?

Una sola sección puede hacerse demasiado larga.

Considera:

• mostrar los principales;

• CTA “Ver todos”;

• agrupar por categorías;

• crear una página de Servicios.

No necesitas presentar todo en Home.

Home debería ayudar a descubrir,

no necesariamente contener el detalle completo.

Paso 57. Cards y orden de importancia

No ordenes los servicios al azar.

Puedes priorizar:

• más relevante;

• más utilizado;

• recorrido lógico;

si existe información real que justifique esa decisión.

No necesitas ordenarlos alfabéticamente

si otro orden ayuda más al visitante.

Pero tampoco etiquetes:

Más popular

sin datos.

Paso 58. CTA general al final

Después del Grid puedes agregar:

[ VER TODOS LOS SERVICIOS ]

Especialmente si la sección muestra solo una selección.

Puedes centrarlo debajo de las Cards.

Deja suficiente Margin top.

Conceptualmente:

[CARD][CARD][CARD]

       espacio

 [ VER TODOS LOS SERVICIOS ]

Paso 59. No repitas el mismo CTA innecesariamente

Si cada Card tiene:

Ver servicio

y el CTA general dice:

Ver servicio

no está claro.

Mejor:

Ver todos los servicios

Diferencia la función.

Paso 60. Card sin página individual

Si un servicio no tiene una página propia:

no inventes un Link.

Puedes:

• dejarla informativa;

• utilizar CTA general;

• enlazar a Contacto si realmente corresponde.

No utilices:

#

para simular una acción.

Paso 61. No enlaces todas las Cards a Contacto automáticamente

Si el visitante selecciona:

Diseño web

puede esperar información sobre Diseño web,

no necesariamente aterrizar directamente en un formulario genérico.

El destino debe coincidir con la expectativa.

Paso 62. Revisa Navigator después de clonar

Una estructura conceptual final puede ser:

SECTION .services-section
├── Heading area
│   ├── Paragraph
│   ├── H2
│   └── Paragraph
│
└── Grid Row
    ├── Column
    │   └── Card .service-card
    │       ├── Font Icon
    │       ├── H3
    │       ├── Paragraph
    │       └── Link
    │
    ├── Column
    │   └── Card .service-card
    │       ├── Font Icon
    │       ├── H3
    │       ├── Paragraph
    │       └── Link
    │
    └── Column
        └── Card .service-card
            ├── Font Icon
            ├── H3
            ├── Paragraph
            └── Link

La estructura exacta puede variar

No utilices este esquema como HTML obligatorio.

Su función es ayudarte a comprender la jerarquía.

Paso 63. No crees un Grid Row independiente para cada Card

Evita:

Row
└── Card A

Row
└── Card B

Row
└── Card C

si deseas una grilla de tres columnas.

Utiliza:

Row
├── Column A
├── Column B
└── Column C

Así el sistema puede gestionar mejor:

• alineación;

• Wrap;

• responsive.

Paso 64. No utilices Position absolute

No construyas:

.card-a {
    position: absolute;
    left: 100px;
}

.card-b {
    position: absolute;
    left: 500px;
}

Utiliza Grid.

Las Cards deben permanecer en el flujo de la página.

Paso 65. No utilices Width fija para cada Card

Evita:

.service-card {
    width: 360px;
}

como base del layout.

Grid ya controla el ancho de la Column.

Puede ser más robusto que una medida fija.

Paso 66. No uses margin-left para centrar la grilla

Evita:

.services-grid {
    margin-left: 180px;
}

Utiliza:

• Container;

• Grid;

• Horizontal align.

Paso 67. Revisa tablet antes de mobile

Muchas secciones fallan en el ancho intermedio.

Por ejemplo

desktop:

[ CARD ][ CARD ][ CARD ]

se ve perfecto.

Mobile:

CARD
CARD
CARD

también.

Pero tablet:

[CARD MUY ESTRECHA][CARD MUY ESTRECHA][CARD MUY ESTRECHA]

es donde aparece el problema.

Revisa tablet conscientemente.

Paso 68. Revisa títulos en tablet

Un título:

Consultoría para transformación digital

puede pasar de:

2 líneas desktop

a:

4 líneas tablet

Si la grilla se vuelve incómoda:

reduce columnas,

no necesariamente Font size.

Paso 69. Revisa los CTA en tablet

Si cada Card queda estrecha:

Conocer todos los detalles →

puede ocupar varias líneas.

Puede ser mejor:

Ver servicio →

El contenido también es parte del responsive.

Paso 70. Revisa mobile

Comprueba:

• Padding interno;

• icono;

• H3;

• Paragraph;

• CTA.

Una Card mobile no debería tener:

Padding lateral de 80px

si deja poco espacio para el texto.

Ajusta cuando sea necesario.

Paso 71. No reduzcas excesivamente el Padding mobile

Tampoco:

4px

La Card necesita espacio interno.

Busca equilibrio.

Paso 72. Revisa el espacio entre Cards en mobile

Debe ser suficiente para distinguir:

Card A

de:

Card B

No permitas que parezcan una única caja gigante.

Paso 73. Cards y Background de Section

Puedes utilizar una Section con fondo suave.

Por ejemplo:

Background general gris claro
+
Cards blancas

Esto ayuda a diferenciarlas.

Pero no es obligatorio.

También puede ser:

Background blanco
+
Cards con Border

El diseño debe integrarse con el resto de la Página web.

Paso 74. Evita demasiados colores

No hagas:

Card A roja
Card B verde
Card C azul
Card D violeta

solo porque cada servicio es diferente.

Puede fragmentar visualmente la sección.

Puedes utilizar un mismo sistema:

Cards iguales
+
iconos con pequeñas variaciones

si corresponde a la identidad visual.

Paso 75. No utilices color como única diferencia

Si una Card está destacada:

no dependas solamente de:

color verde

para comunicar:

recomendado

Puedes agregar un texto o Badge cuando sea necesario y verdadero.

Paso 76. Animación

Una vez que todo funciona

puedes evaluar:

Avanzado → Animate on scroll

Una posibilidad:

animar la grilla o Cards con una entrada moderada.

Evita:

Card A entra izquierda
Card B rebota
Card C gira

Mantén consistencia.

Paso 77. Delay escalonado

Puede parecer atractivo que las Cards aparezcan secuencialmente.

Pero no necesitas grandes delays.

El visitante no debería esperar para descubrir el tercer servicio.

La información es más importante que el efecto.

Paso 78. Hover + animación de entrada

Evita sumar demasiadas capas.

Si la Card ya tiene:

• Animate on scroll;

• Hover;

puede ser suficiente.

No agregues además:

• Counter;

• Lottie;

• Flip;

sin una razón.

Paso 79. Revisar la sección sin Hover

En mobile no existe Hover tradicional.

Pregunta:

¿La Card se comprende completamente sin Hover?

Si sí:

está bien planteada.

Paso 80. Revisar la sección con textos reales

Este es uno de los tests más importantes.

No termines el diseño utilizando:

Servicio 1

Lorem ipsum...

Carga:

• nombres reales;

• descripciones reales.

Porque el contenido real puede cambiar:

• alturas;

• cantidad de líneas;

• CTA.

Diseño y contenido deben probarse juntos.

Paso 81. No diseñes para Lorem Ipsum

Una Card perfecta con:

Lorem ipsum dolor sit amet

puede romperse con:

Implementación de soluciones empresariales personalizadas

Diseña utilizando el contenido final lo antes posible.

Paso 82. Revisar con el título más largo

Busca la Card que tenga el Heading más largo.

Si funciona:

es una buena señal.

No pruebes solamente la más corta.

Paso 83. Revisar con la descripción más larga

Mismo principio.

Pregunta:

• ¿empuja el CTA?

• ¿hace la Card excesivamente alta?

• ¿sigue siendo escaneable?

Si no:

edita el contenido o ajusta estructura.

Paso 84. Revisa el servicio con nombre de dos líneas

No obligues todos los Headings a ser una línea.

Dos líneas pueden estar perfectamente bien.

El problema aparece cuando:

una Card tiene 1 línea
otra 6

Busca equilibrio editorial.

Paso 85. Revisa Links

Después de completar todas las Cards:

prueba:

Card 1 → Link 1

Card 2 → Link 2

Card 3 → Link 3

No asumas que clonación actualizó los destinos.

Paso 86. Guardar Cambios

Guarda en etapas.

Por ejemplo

estructura
↓
Guardar Cambios

Luego:

contenido real
↓
Guardar Cambios

Finalmente:

estilos
↓
Guardar Cambios

No asumimos autosave.

Paso 87. Ver página

Utiliza:

Ver página

Comprueba el resultado real.

No existe un segundo paso de publicación.

Paso 88. Revisa desktop

Comprueba:

• encabezado;

• cantidad de columnas;

• alturas;

• iconos;

• Links;

• espacios.

Pregunta:

¿Todas las Cards parecen formar parte del mismo sistema?

Paso 89. Revisa monitor grande

Con Container Boxed

la grilla debería mantener un ancho razonable.

No hagas crecer las Cards indefinidamente.

Una Card extremadamente ancha puede perder su carácter de resumen.

Paso 90. Revisa tablet

Comprueba si:

3 columnas

continúan siendo adecuadas.

Si no:

pasa a:

2 columnas

No reduzcas todo el texto para conservar tres.

Paso 91. Revisa celular

Comprueba:

1 Card por fila

Los CTA deben ser utilizables.

Los iconos deben mantener proporción.

No debe existir scroll horizontal.

Paso 92. Revisa los Links desde un dispositivo real

Especialmente si el CTA es pequeño.

Debe ser fácil de seleccionar.

No dependas de precisión extrema.

Paso 93. Sección con Cards sin Link

También puede existir:

Características informativas

Si no hay navegación:

no agregues CTA falso.

Una Card puede terminar simplemente con:

Heading
+
Paragraph

No todos los componentes necesitan un Button.

Paso 94. Card como beneficio vs Card como servicio

Esta diferencia es importante.

Servicio

Diseño web

representa algo que la empresa ofrece.

Beneficio

Ahorra tiempo

representa un resultado.

Ambos pueden utilizar Cards,

pero no mezcles:

Diseño web
Ahorra tiempo
Hosting
Soporte personalizado

sin una estructura editorial clara.

Si necesitas beneficios

utiliza una sección específica.

Paso 95. Cards de precios no son Cards de servicios

Si necesitas mostrar:

Plan Básico
$...

Plan Premium
$...

puede ser más apropiada una:

Tabla de precios

No conviertas una sección de servicios en precios

solo porque visualmente usa Cards.

Paso 96. Cards con pasos

Si representan:

Paso 1
Paso 2
Paso 3

puede ser más apropiado:

• Timeline;

• otra estructura secuencial.

El componente debe corresponder al significado.

Paso 97. Cards con preguntas

Si representan:

Pregunta
Respuesta

puede ser mejor:

• FAQ;

• Accordeon.

No utilices Cards para cualquier contenido.

Cómo utilizar IA para definir servicios

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt para resumir servicios

Tengo estos servicios:

[lista + descripción real]

Necesito presentar cada uno en una Card de una Página web.

Para cada servicio genera:
- título de máximo 5 palabras;
- descripción de máximo 30 palabras.

No inventes beneficios, características ni servicios.
Mantén español neutro.

Prompt para equilibrar descripciones

Tengo estas Cards:

Card 1:
[...]

Card 2:
[...]

Card 3:
[...]

Analiza:
- si cumplen la misma función;
- si alguna descripción es excesivamente larga;
- si alguna es demasiado vaga;
- si existe información repetida.

No inventes contenido.
No las reescribas todavía.

Prompt para revisar jerarquía

Tengo esta sección:

H2:
[...]

Cards:
H3 [...]
H3 [...]
H3 [...]

Comprueba si la jerarquía de Headings es coherente.

No cambies tamaños ni textos.

Prompt para decidir cantidad de columnas

Tengo 4 servicios.

Cada Card contiene:
- icono;
- Heading;
- descripción de aproximadamente [cantidad] palabras;
- Link.

Necesito decidir entre:
- 4 columnas;
- 2 columnas.

Analiza legibilidad en desktop y tablet.

Waclis utiliza Bootstrap 4.

No generes código.

Prompt para responsive

Quiero una sección de 3 Cards en Waclis.

Desktop:
3 columnas.

Tablet:
evaluar 2 columnas o 3 según ancho.

Mobile:
1 columna.

Cada Card contiene:
- icono;
- H3;
- Paragraph;
- Link.

Indícame cómo debería plantearse conceptualmente con Grid Row.

No generes CSS si puede resolverse desde Grid.

Prompt para detectar problemas de altura

Tengo estas tres Cards:

[títulos y descripciones]

Una es mucho más alta que las demás.

Analiza primero si el problema puede resolverse editorialmente reduciendo contenido redundante.

No recortes información importante.
No generes CSS todavía.

Prompt para igual altura sin Height fija

Tengo una sección Waclis:

Class raíz:
.services-section

Cada Card:
.service-card

Cada CTA:
.service-card-cta

Necesito:
- Cards con altura flexible;
- que puedan ocupar toda la altura disponible de su fila;
- CTA alineado al final;
- sin height fija;
- sin position:absolute.

Waclis utiliza Bootstrap 4.

Devuélveme solamente CSS localizado.

Prompt para Hover

Tengo Cards de servicios en:

.services-section .service-card

Necesito un Hover sutil:
- ligera elevación visual;
- cambio moderado de borde o sombra;
- sin rotación;
- sin alterar layout;
- no hacer parecer clicable la Card si solamente el Link interno es interactivo.

No cambies HTML.
Devuélveme solamente CSS localizado.

Prompt para revisar una Card clonada

Original:
[HTML]

Copia:
[HTML]

Busca qué elementos permanecen duplicados:
- ID;
- Heading;
- Paragraph;
- icono;
- href;
- alt si existe Image.

No inventes valores nuevos.

Prompt para detectar CSS global

Revisa este CSS generado para Cards de servicios:

[pegar]

Busca selectores demasiado globales:

.card
.row
.col
h3
p
a
img
i
button

Indica qué otras partes de Waclis podrían verse afectadas.

No modifiques el CSS.

Prompt para Cards con Image

Tengo 3 Cards de servicios con fotografías.

Las imágenes tienen proporciones diferentes.

Necesito una estrategia visual coherente.

Analiza:
- si conviene utilizar un marco común;
- Cover o Contain según el contenido;
- relación de aspecto;
- riesgos de recorte.

No generes CSS todavía.

Prompt para detectar falsa interacción

Esta Card tiene estos estilos e interacciones:

[describir]

Solo el Link interno es clicable.

Analiza si el Hover o diseño puede hacer pensar que toda la Card es clicable.

Propón ajustes visuales, sin cambiar todavía HTML.

Prompt para preparar versión mobile

Mi sección tiene estas Cards:

[contenido]

En mobile serán una por fila.

Revisa:
- títulos demasiado largos;
- CTA demasiado largos;
- Paragraphs excesivos;
- iconos innecesariamente grandes.

No elimines información sin indicarlo.

Prompt para crear una variante destacada

Todas mis Cards utilizan:

.service-card

Una sola Card debe destacarse visualmente mediante:

.service-card-featured

Quiero modificar solamente:
- Border;
- Background;
- estilo del icono.

No cambies estructura.
No dupliques todos los estilos.
No utilices IDs.

Devuélveme únicamente CSS para la variante.

Buenas prácticas

Recomendamos:

• definir primero qué representa una Card;

• mantener todas al mismo nivel conceptual;

• utilizar un Heading general;

• utilizar Grid Row;

• decidir responsive antes de cargar todo;

• utilizar Font Icon o Image con criterio;

• mantener títulos claros;

• resumir las descripciones;

• utilizar Links reales;

• clonar la Card completa;

• revisar todo después de clonar;

• compartir Classes de diseño;

• mantener IDs únicos;

• utilizar Hover moderado;

• evitar Height fija;

• probar contenido real;

• revisar tablet;

• revisar mobile;

• probar todos los CTA.

Errores frecuentes

Mezclar servicios con beneficios o categorías

Mantén una lógica común.

Mostrar demasiadas Cards

Prioriza o agrupa.

Utilizar cuatro columnas con mucho contenido

Reduce columnas.

Mantener tres o cuatro columnas en tablet aunque queden diminutas

Adapta el Grid.

Mantener dos columnas en celulares estrechos sin comprobar

Prueba una por fila.

Diseñar con Lorem Ipsum y reemplazar al final

Utiliza contenido real cuanto antes.

Hacer el diseño dependiente de títulos de una línea

Prueba títulos reales.

Fijar Height de la Card

Puede cortar contenido.

Fijar Height del Heading

Puede romper responsive.

Agregar texto innecesario para igualar alturas

Prioriza claridad.

Utilizar Position absolute para mantener CTA abajo

Utiliza una estructura flexible si realmente lo necesitas.

Clonar solo los elementos internos uno por uno

Clona la unidad completa.

Cambiar Heading y dejar el icono anterior

Revisa toda la Card.

Cambiar Heading y dejar la URL anterior

Prueba cada CTA.

Duplicar IDs

Mantén IDs únicos.

Agregar un Link #

No simules navegación.

Hacer que toda la Card parezca clicable cuando solo el CTA funciona

Mantén coherencia visual.

Utilizar Hover para revelar información esencial

Mobile puede no tener Hover.

Utilizar Hover excesivo

Simplifica.

Utilizar iconos de estilos diferentes

Mantén consistencia.

Mezclar Font Icon, emoji y fotografía sin una lógica

Construye un sistema visual.

Utilizar imágenes de proporciones completamente diferentes

Define un tratamiento común.

Aplicar .card globalmente

Puede afectar otras Cards de Waclis.

Aplicar h3 globalmente

Puede modificar otros títulos.

Aplicar i globalmente

Puede romper Font Icon.

Aplicar img globalmente

Puede afectar otras imágenes.

Aplicar .row globalmente

Puede romper otras grillas.

Utilizar Margin fijo para separar Cards

Aprovecha Grid y estructura.

Utilizar Width fija de Card

Permite que la Column determine el ancho.

Agregar Bootstrap adicional

Waclis ya utiliza Bootstrap 4.

Agregar JavaScript para Hover

No es necesario.

Ocultar Cards en mobile porque no caben

Adapta la grilla.

No probar tablet

Es uno de los tamaños donde más problemas aparecen.

No probar los CTA

El diseño no es suficiente.

Flujo profesional recomendado

1. DEFINIR LOS SERVICIOS
↓
2. DEFINIR QUÉ REPRESENTA CADA CARD
↓
3. REDUCIR CONTENIDO A LO ESENCIAL
↓
4. CREAR SECTION
↓
5. CONFIGURAR BOXED / AUTO
↓
6. CREAR ENCABEZADO
↓
7. AGREGAR GRID ROW
↓
8. DEFINIR CANTIDAD DE COLUMNAS
↓
9. DEFINIR DESKTOP / TABLET / MOBILE
↓
10. CREAR PRIMERA CARD
↓
11. AGREGAR ICONO O IMAGE
↓
12. AGREGAR H3
↓
13. AGREGAR PARAGRAPH
↓
14. AGREGAR LINK
↓
15. CONFIGURAR URL REAL
↓
16. DEFINIR CLASSES COMPARTIDAS
↓
17. CLONAR CARD COMPLETA
↓
18. REEMPLAZAR TODO EL CONTENIDO
↓
19. REVISAR IDS
↓
20. REVISAR LINKED STYLES
↓
21. AJUSTAR ESTILOS
↓
22. REVISAR ALTURAS
↓
23. AJUSTAR FLEX SOLO SI ES NECESARIO
↓
24. CONFIGURAR HOVER MODERADO
↓
25. REVISAR DESKTOP
↓
26. REVISAR TABLET
↓
27. REVISAR CELULAR
↓
28. GUARDAR CAMBIOS
↓
29. VER PÁGINA
↓
30. PROBAR TODOS LOS LINKS

Checklist de contenido

• Todas las Cards representan servicios del mismo nivel.

• Cada Card tiene un título claro.

• Los títulos no son innecesariamente largos.

• Las descripciones explican el servicio.

• No repiten simplemente el Heading.

• Las descripciones tienen una extensión razonable.

• No inventé beneficios.

• No inventé estadísticas.

• Los CTA indican claramente la acción.

• No hay Links ficticios.

Checklist de estructura

• Utilicé una Section.

• Utilicé Container conscientemente.

• Utilicé Grid Row.

• Cada Card se encuentra dentro de su Column.

• No creé un Row separado para cada Card.

• El número de columnas corresponde al contenido.

• Definí tablet.

• Definí mobile.

• Utilicé Navigator.

• La jerarquía es comprensible.

• No utilicé Position absolute.

Checklist de Cards

• Todas comparten una estructura equivalente.

• Los iconos mantienen una misma línea visual.

• Los Headings utilizan el nivel adecuado.

• Los Paragraphs son legibles.

• Los CTA se encuentran en posiciones coherentes.

• No utilicé Height fija innecesariamente.

• No utilicé texto de relleno para igualar alturas.

• Cloné la Card completa.

• Reemplacé todo el contenido clonado.

• Los IDs son únicos.

Checklist de Links

• Cada Link tiene URL real.

• No quedan URLs de la Card original.

• No quedan valores #.

• El CTA explica el destino.

• Target es coherente.

• La Card no aparenta ser completamente clicable si no lo es.

• Probé cada Link individualmente.

Checklist visual

• Las Cards parecen pertenecer al mismo sistema.

• Border radius es consistente.

• Padding es consistente.

• Iconos tienen tamaño coherente.

• Typography mantiene jerarquía.

• Existe suficiente separación entre Cards.

• Existe suficiente separación respecto del Heading general.

• El Hover es moderado.

• La información principal no depende de Hover.

• La Card destacada solo existe si realmente tiene sentido.

Checklist responsive

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• Las Cards no quedan demasiado estrechas.

• Los Headings no ocupan demasiadas líneas.

• Los Paragraphs siguen siendo legibles.

• Los CTA no desbordan.

• Los iconos no son demasiado grandes.

• Las Images no generan scroll horizontal.

• Existe espacio entre Cards.

• No oculté Cards para resolver problemas de layout.

Checklist técnico

• La Section tiene una Class propia si necesito CSS.

• Las Cards comparten una Class de diseño.

• Los iconos pueden compartir una Class.

• Los CTA pueden compartir una Class.

• Revisé Linked styles.

• Los IDs son únicos.

• No modifiqué .card globalmente.

• No modifiqué .row globalmente.

• No modifiqué h3 globalmente.

• No modifiqué i globalmente.

• No modifiqué img globalmente.

• No agregué Bootstrap.

• No agregué JavaScript innecesario.

• El CSS adicional tiene scope.

Checklist final

• Utilicé contenido real.

• Revisé la Card con el título más largo.

• Revisé la Card con la descripción más larga.

• Guardé los cambios.

• Utilicé Ver página.

• Probé todos los CTA.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Revisé un dispositivo real cuando fue posible.

• No existe scroll horizontal.

• La sección se entiende sin Hover.

• La sección se entiende sin animaciones.

• Se puede identificar rápidamente qué servicios ofrece la empresa.

En resumen

Una sección profesional de servicios no consiste simplemente en colocar varias Cards.

Primero debes definir:

QUÉ SERVICIOS MOSTRAR

Después construir:

SECTION
↓
ENCABEZADO
↓
GRID ROW
↓
COLUMNS
↓
CARDS

Cada Card puede utilizar:

ICONO / IMAGE
↓
HEADING
↓
PARAGRAPH
↓
LINK

Con tres servicios

desktop puede utilizar:

4 + 4 + 4

Tablet puede utilizar:

2 columnas

cuando las Cards necesiten más espacio.

Mobile:

1 columna

No intentes conservar muchas columnas reduciendo:

• Font size;

• Padding;

• iconos;

hasta hacer el contenido incómodo.

El Grid debe adaptarse al contenido

no al revés.

Al clonar una Card

revisa:

ICONO
+
HEADING
+
PARAGRAPH
+
LINK
+
URL
+
ID

No solamente el título.

Si las Cards tienen diferentes alturas

no utilices inmediatamente:

height: 420px;

Primero:

REVISAR CONTENIDO

Y si necesitas una alineación más uniforme:

utiliza una estructura flexible localizada,

sin cortar contenido.

Respecto de Hover

recuerda:

HOVER
→ refuerzo visual

No:

HOVER
→ única forma de descubrir información

Porque la sección también debe funcionar en dispositivos táctiles.

Respecto de la interacción

CARD VISUAL
≠
CARD CLICABLE

Si existe una acción:

utiliza un Link real.

No simules interacción.

Y finalmente

el flujo correcto es:

CONTENIDO REAL
↓
GRID
↓
CARD BASE
↓
CLONAR
↓
REEMPLAZAR TODO
↓
RESPONSIVE
↓
ESTILO
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR LINKS

Una buena sección de servicios debería permitir que el visitante pueda recorrerla rápidamente y responder:

“Entiendo qué ofrece esta empresa y sé dónde continuar si uno de estos servicios me interesa.”

Cuando eso ocurre, las Cards están cumpliendo correctamente su función.