El Editor de bloques de Waclis incluye los componentes Alert y Card, dos recursos muy útiles para organizar y destacar información dentro de una Página web.

Aunque visualmente ambos pueden presentarse como cajas con:

• Background;

• Border;

• Padding;

• texto;

no cumplen la misma función.

Alert está pensado para destacar un mensaje puntual.

Card está pensado para agrupar contenido relacionado dentro de una unidad visual.

Por ejemplo:

ALERT

⚠ Importante
Los precios pueden modificarse sin previo aviso.

Mientras que una Card puede ser:

┌─────────────────────────┐
│                         │
│       [ IMAGEN ]        │
│                         │
│ Diseño web              │
│                         │
│ Descripción breve del   │
│ servicio.               │
│                         │
│ Ver servicio →          │
│                         │
└─────────────────────────┘

¿Qué aprenderás en este tutorial?

Aprenderás:

• qué es Alert;

• qué es Card;

• cuándo utilizar cada componente;

• cuándo no utilizarlos;

• cómo agregarlos;

• cómo organizar su contenido;

• cómo personalizar su apariencia;

• cómo utilizar Cards dentro de Grid Row;

• cómo crear varias Cards consistentes;

• cómo destacar una Card sin romper el sistema visual;

• cómo adaptar Cards a tablet y celular;

• cómo trabajar con Classes, IDs y Linked styles;

• cómo evitar falsas interacciones;

• cómo utilizar IA para mejorar Alert y Card sin generar código innecesario.

Diferencia principal entre Alert y Card

Antes de utilizarlos, recuerda esta regla:

ALERT
=
MENSAJE QUE NECESITA ATENCIÓN

CARD
=
CONTENIDO AGRUPADO

Ejemplos de Alert

Puedes utilizar Alert para:

• avisos;

• información importante;

• advertencias;

• cambios;

• requisitos;

• recomendaciones;

• confirmaciones;

• estados.

Por ejemplo:

IMPORTANTE

Antes de comenzar, asegúrate de tener
las credenciales necesarias.

Ejemplos de Card

Puedes utilizar Card para:

• servicios;

• beneficios;

• productos destacados;

• características;

• proyectos;

• integrantes del equipo;

• artículos;

• planes;

• recursos;

• accesos a otras secciones.

Por ejemplo:

[ ICONO ]

Soporte personalizado

Accede a asistencia para resolver
consultas relacionadas con tu servicio.

Conocer más →

Primera regla

No utilices Alert como una Card decorativa ni Card como sustituto de cualquier caja de color. El componente debe responder a la función del contenido.

¿Dónde se encuentran Alert y Card?

Dentro del Editor de bloques:

1. Abre Componentes.

2. Localiza la categoría donde aparecen los componentes estructurales de Bootstrap.

3. Busca:

   • Alert

   • Card

4. Arrastra el componente que necesites hacia la posición deseada.

En la interfaz actual esta categoría puede aparecer identificada como Bootstrap 5.

Sin embargo, al trabajar con código personalizado o solicitar ayuda a una IA, recuerda que la Página web de Waclis utiliza:

Bootstrap 4

No agregues otra versión de Bootstrap para utilizar Alert o Card.

Parte 1 · Cómo utilizar Alert

¿Qué es Alert?

Alert es un componente visual pensado para llamar la atención sobre una información concreta.

Su función principal no es:

decorar

sino:

COMUNICAR

Cuándo utilizar Alert

Es especialmente útil para mensajes como:

Importante

Antes de comenzar

Requisito

Advertencia

Información

Actualización

Ejemplo

Importante

Los cambios realizados sobre productos sincronizados
pueden ser reemplazados en una próxima sincronización.

Aquí Alert ayuda porque esa información:

• afecta lo que el usuario hará después;

• merece una atención especial.

Cuándo NO utilizar Alert

No utilices Alert para:

• cada párrafo de la página;

• todos los beneficios;

• cada servicio;

• contenido permanente que podría presentarse normalmente;

• convertir cualquier texto en una caja de color.

Ejemplo incorrecto

[ ALERT ]
Somos una empresa con muchos años de experiencia.

Probablemente puede ser simplemente:

Heading
+
Paragraph

Segunda regla

Si todo es importante, nada termina destacándose.

Cómo agregar un Alert

Paso 1. Agrega el componente

En Componentes, arrastra:

Alert

hacia la Section deseada.

Paso 2. Selecciónalo

Haz clic sobre el Alert.

También puedes localizarlo desde:

Navigator

Paso 3. Identifica su contenido

Según la estructura insertada por el componente, podrás trabajar con:

• su texto;

• los elementos internos;

• las Classes correspondientes;

• Contenido;

• Estilo;

• Avanzado.

No todos los Alerts necesitan la misma estructura.

Un Alert sencillo puede ser:

Alert
└── texto

Uno más completo puede construirse como:

Alert
├── Heading / texto destacado
└── Paragraph

Por ejemplo:

IMPORTANTE

Guarda los cambios antes de abandonar el Editor.

Título del Alert

Si el mensaje necesita una introducción:

puedes utilizar:

• texto en negrita;

• Heading pequeño cuando corresponda a la jerarquía del documento;

• Paragraph separado.

No conviertas automáticamente:

IMPORTANTE

en un H2.

La jerarquía H1/H2/H3 debe responder a la estructura de la página,

no al aspecto visual del Alert.

Ejemplo simple

Importante: revisa la información antes de continuar.

puede funcionar perfectamente sin Heading adicional.

Tipo de mensaje

Antes de elegir el estilo visual,

define qué significa el Alert.

Puede representar:

INFORMACIÓN

CONFIRMACIÓN

ADVERTENCIA

ERROR / PROBLEMA

El diseño debe reforzar esa función

sin depender únicamente del color.

Alert y Bootstrap 4

En Bootstrap 4 existen variantes habituales de Alert como:

alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark

Según cómo esté construido el componente que insertaste, puedes encontrar Classes de este tipo al revisar:

Contenido → General → Class

o el HTML del elemento.

Importante

No necesitas escribir estas Classes manualmente si el componente ya tiene:

el estilo que necesitas

Y tampoco debes agregar Bootstrap nuevamente para utilizarlas.

¿Qué significa cada variante conceptualmente?

Por ejemplo:

INFO
→ información

SUCCESS
→ confirmación / operación satisfactoria

WARNING
→ atención / precaución

DANGER
→ error / riesgo importante

No utilices el color solamente porque:

“queda lindo”

El estilo debe corresponder al significado.

Un Alert rojo no debería contener

Conoce nuestros servicios

porque visualmente comunica:

• problema;

• error;

• advertencia fuerte.

Utiliza texto además del color

Por ejemplo:

Advertencia

Esta operación puede reemplazar configuraciones existentes.

Mejor que simplemente:

[ caja amarilla ]

sin contexto.

Personalizar el Alert desde Estilo

Con el Alert seleccionado puedes utilizar:

Estilo

para trabajar, según el elemento y diseño, sobre:

• Typography;

• Margin;

• Padding;

• Border;

• Border radius;

• Background;

• Text Color.

Padding

El Alert necesita espacio interno suficiente para que:

texto

no quede pegado a los bordes.

Por ejemplo

una referencia inicial puede ser:

16–24px

según el diseño.

No es una medida obligatoria.

Border radius

Puede seguir el mismo sistema de la Página web.

Por ejemplo:

si Cards y Inputs utilizan:

12px

de Border radius,

no necesitas que Alert tenga:

35px

sin una razón.

Border

Un Alert puede utilizar:

• Background;

• Border;

• ambos.

Evita sobrecargar:

Background fuerte
+
Border fuerte
+
Shadow fuerte
+
Icono grande

si un mensaje sencillo no necesita tanta atención.

Margin

Controla la separación entre Alert y el contenido anterior/posterior.

No utilices:

<br><br>

para crear ese espacio.

Alert dentro de contenido extenso

Puede ser útil dentro de una guía:

Heading
Paragraph

[ ALERT IMPORTANTE ]

Paragraph

Su función es interrumpir brevemente el recorrido para decir:

“presta atención a esto antes de continuar”.

No coloques cinco Alerts consecutivos

Por ejemplo:

[ ALERT ]
[ ALERT ]
[ ALERT ]
[ ALERT ]

Si toda esa información tiene la misma importancia:

quizá conviene:

• una única sección;

• List;

• Paragraphs.

Alert con icono

Puedes complementar el mensaje con:

• Font Icon;

• Svg Icon;

cuando aporte reconocimiento.

Por ejemplo:

[ ! ] Advertencia

Revisa los datos antes de continuar.

Pero el icono:

NO reemplaza el texto

No utilices únicamente:

⚠

sin explicar qué ocurre.

Alert con Link

Puede incluir un Link cuando el mensaje necesita una acción real.

Ejemplo:

¿Necesitas completar primero esta configuración?

Ver configuración →

El Link debe:

• tener un destino real;

• describir la acción.

No:

Haz clic aquí

Alert no debe convertirse en CTA principal

Si el verdadero objetivo de la Section es:

CONTACTAR

es mejor utilizar:

• CTA;

• Link;

• Button visual apropiado.

Alert debería continuar funcionando como:

mensaje

Alert y responsive

Normalmente un Alert es un bloque horizontal que puede adaptarse bien.

Pero debes revisar:

• Padding;

• iconos;

• textos largos;

• Links;

• Width.

Mobile

Un Alert como:

[ ICONO ][ TÍTULO + TEXTO ][ LINK ]

puede quedar demasiado comprimido.

Puede necesitar convertirse conceptualmente en:

[ ICONO ]

TÍTULO

Texto

Link

No reduzcas la tipografía excesivamente para mantener una línea.

Alert y Height

Evita Height fija.

Por ejemplo:

.notice-alert {
    height: 70px;
}

puede funcionar cuando el texto ocupa una línea.

Pero si mobile necesita:

3 líneas

puede cortarse.

Prefiere:

altura natural

Alert y contenido dinámico

Si el texto puede cambiar:

asegúrate de que el contenedor pueda crecer.

Parte 2 · Cómo utilizar Card

¿Qué es Card?

Card es un contenedor diseñado para agrupar varios elementos que pertenecen conceptualmente a una misma unidad.

Por ejemplo:

Servicio

puede contener:

Icono
Título
Descripción
Link

Todo pertenece al mismo concepto.

Otro ejemplo

Proyecto

puede contener:

Image
Categoría
Título
Descripción
Link

La Card permite que ese grupo se perciba como:

UNA UNIDAD

Cuándo utilizar Card

Card es especialmente útil para:

• Servicios;

• Beneficios;

• Características;

• Proyectos;

• Planes;

• Recursos;

• artículos;

• miembros del equipo;

• accesos.

Cuándo no utilizar Card

No conviertas cada elemento de la Página web en una Card.

Por ejemplo:

Hero dentro de Card
About dentro de Card
CTA dentro de Card
Contact dentro de Card

puede generar:

CAJAS DENTRO DE CAJAS

Card funciona mejor cuando:

varios elementos del mismo tipo

necesitan presentarse en conjunto.

Tercera regla

Card organiza unidades repetibles. No es un requisito visual para todas las Sections.

Cómo agregar Card

Paso 1. Abre Componentes

Busca:

Card

Paso 2. Arrastra el componente

Colócalo dentro del:

• Container;

• Column;

correspondiente.

Paso 3. Revisa Navigator

Selecciona la Card y observa su estructura.

Dependiendo de la versión o contenido insertado,

la estructura interna concreta puede variar.

Lo importante es identificar:

CARD
↓
CONTENIDO INTERNO

Antes de mover/eliminar elementos.

Construcción conceptual de una Card

Una Card profesional puede utilizar:

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

O:

Card
├── Font Icon
├── Heading
└── Paragraph

O:

Card
├── Badge
├── Heading
├── Paragraph
├── List
└── Link

No existe una única Card correcta.

El contenido determina la estructura.

Ejemplo · Card de servicio

[ ICONO ]

Diseño web

Creamos Páginas web adaptadas
a las necesidades del proyecto.

Conocer servicio →

Ejemplo · Card de proyecto

[ IMAGE ]

SITIO WEB

Proyecto XYZ

Descripción breve del trabajo realizado.

Ver proyecto →

Ejemplo · Card informativa

[ ICONO ]

Gestión centralizada

Organiza distintas herramientas
desde un mismo entorno.

Aquí no es necesario Link.

Cuarta regla

No agregues un Link a una Card si no existe una acción real que realizar.

Card clicable vs Card informativa

Esta distinción es fundamental.

Card informativa

[ CARD ]

Beneficio
Descripción

No necesita:

• cursor de Button;

• Hover agresivo;

• flecha;

• Link.

Card navegable

[ CARD ]

Servicio
Descripción
Ver servicio →

Sí comunica:

hay algo más para ver

Evita falsas interacciones

Una Card que:

• se eleva;

• cambia de Background;

• muestra flecha;

puede parecer clicable.

Si al hacer clic:

no ocurre nada

el diseño genera una expectativa incorrecta.

Quinta regla

El comportamiento visual de la Card debe coincidir con su comportamiento real.

Organizar varias Cards

Una de las formas más habituales es:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Column
        │   └── Card
        ├── Column
        │   └── Card
        └── Column
            └── Card

Desktop

Por ejemplo:

[ CARD ][ CARD ][ CARD ]

Tablet

Puede funcionar mejor:

[ CARD ][ CARD ]

[ CARD ]

Mobile

[ CARD ]

[ CARD ]

[ CARD ]

No mantengas tres Cards estrechas

solo para conservar:

la misma cantidad de columnas

Utiliza Grid Row

Configura las Columns para los diferentes dispositivos.

Waclis permite trabajar con:

• Extra small;

• Small;

• Medium;

• Large;

• Extra large;

• Extra extra large.

Un patrón habitual puede ser:

Desktop:
4 + 4 + 4

Tablet:

6 + 6

Mobile:

12
12
12

No es una regla obligatoria.

Depende de:

• cantidad de Cards;

• longitud del contenido;

• diseño.

Clonar una Card

Cuando hayas construido correctamente la primera:

puedes utilizar:

Clonar

Esto es preferible a recrearla varias veces,

porque conserva:

• estructura;

• clases;

• estilos;

• espacios.

Después de clonar

debes revisar:

Image
Heading
Paragraph
Link
URL
Alt
Id

No cambies solamente:

el título

Ejemplo de error

Card 1:

Diseño web
→ /servicios/diseno-web

Card clonada:

Tiendas online
→ /servicios/diseno-web

Visualmente parece correcta.

Funcionalmente no.

Revisa todos los Links después de clonar.

IDs al clonar

Si la Card original contiene:

id="service-design"

La copia puede conservarlo.

Un ID debe ser:

ÚNICO

Si no necesitas el ID:

puedes eliminarlo.

Si necesitas uno nuevo:

utiliza otro valor.

Classes compartidas

Para Cards repetidas es conveniente compartir una Class.

Por ejemplo:

service-card

Así todas pueden compartir:

• Border;

• Border radius;

• Padding;

• Background;

• Hover.

Si cambias:

service-card

pueden modificarse todas.

Esto puede ser exactamente lo que deseas.

Linked styles

El Editor puede mostrar:

Linked styles

cuando un elemento comparte su estilo con otros.

Esto es especialmente normal en una grilla de Cards.

Antes de cambiar:

pregunta:

¿quiero modificar todas las Cards o solamente esta?

Si quieres modificar todas

mantén el estilo compartido.

Si necesitas una excepción

puedes utilizar una Class adicional.

Ejemplo

Base:

service-card

Destacada:

service-card service-card-featured

Mejor que:

#card1
#card2
#card3

con estilos duplicados.

Destacar una Card

Puede ser útil en:

• planes;

• servicios recomendados.

Puedes diferenciarla mediante:

• Background;

• Border;

• Badge.

Por ejemplo:

[ RECOMENDADO ]

Plan Premium
...

Pero utiliza textos correctos.

“Recomendado”

puede representar:

una recomendación editorial

Mientras:

MÁS ELEGIDO

afirma:

un comportamiento real de clientes

No utilices “Más elegido” si no tienes datos que lo respalden.

Tampoco:

NUEVO

si el contenido dejará de ser nuevo y nadie lo actualizará.

Card con Image

Una Card puede incluir:

Image

Revisa:

• recurso;

• Width;

• Height;

• Alt;

• Cover/Contain según el diseño.

Fotografías

Pueden funcionar con:

Cover

si el recorte es intencional.

Producto, logo o captura

Puede ser mejor:

Contain

para mostrarlo completo.

No utilices una Height fija problemática

Por ejemplo:

Image 350px

puede ser correcta desktop,

pero excesiva mobile.

Revisa.

Card con icono

Puedes utilizar:

• Font Icon;

• Svg Icon.

Mantén consistencia.

Si tres Cards representan servicios,

evita:

Card 1
→ emoji

Card 2
→ icono lineal

Card 3
→ ilustración 3D

salvo que sea una decisión visual intencional.

Card con Heading

Utiliza el nivel correcto.

Por ejemplo

Section:

H2
Nuestros servicios

Cards:

H3
Diseño web

H3
Tiendas online

H3
Integraciones

No utilices H1 dentro de cada Card

solo porque quieras títulos grandes.

Ajusta el tamaño mediante:

Estilo → Typography

Card con Paragraph

Mantén la descripción:

• concreta;

• equilibrada.

Una Card con:

12 palabras

y otra con:

120 palabras

pueden quedar visualmente muy desbalanceadas.

Esto no significa que debas fijar una Height.

Primero:

• edita el contenido;

• intenta mantener una profundidad similar.

Card con List

Puede ser útil para:

• planes;

• características;

• pasos.

Por ejemplo:

PLAN A

✓ Función A
✓ Función B
✓ Función C

Utiliza:

List

cuando el contenido realmente es una lista.

Card con Badge

Badge puede servir para:

• categoría;

• estado;

• etiqueta.

Por ejemplo:

PROYECTO

Pero recuerda:

Badge:

no se convierte automáticamente en filtro

Es un elemento visual.

Card con Link

Para navegación:

utiliza:

Link

Configura:

• Url;

• Target cuando corresponda;

• Rel cuando corresponda;

• Download únicamente si realmente descarga.

No utilices Html Button

solo para lograr apariencia de Button

cuando en realidad necesitas navegar a otra URL.

Link puede recibir una apariencia visual de CTA.

Card completa clicable

En determinados diseños puede existir el deseo de que:

toda la Card

sea una acción.

Antes de implementarlo:

comprueba:

• qué componente estás utilizando;

• cómo está estructurado;

• si no existen Links internos que generen conflictos.

No conviertas automáticamente mediante JavaScript:

Card completa → clic

si un Link visible resuelve correctamente la navegación.

Card y Padding

El Padding define gran parte de su calidad visual.

Como referencia inicial:

24–32px

puede funcionar para muchas Cards.

Pero depende de:

• tamaño;

• contenido;

• diseño.

Mobile puede necesitar:

menos Padding

si la Card queda demasiado estrecha.

No reduzcas hasta que:

texto toque los bordes

Card y Border radius

Utiliza el sistema visual general.

Por ejemplo:

12px
16px
20px

pueden funcionar según la identidad.

No necesitas:

una medida distinta en cada tipo de Card

Card y Border

Puedes utilizar:

Border suave

Una Card no necesita necesariamente Shadow.

Por ejemplo:

Background blanco
+
Border gris suave

puede generar suficiente separación.

Card y Shadow

Si utilizas Shadow:

mantén coherencia.

Evita:

sombra muy fuerte

en cada Card.

Puede generar un diseño pesado.

Card y Background

Puedes utilizar:

• blanco;

• color suave;

• color de marca;

según la sección.

Pero no conviertas cada Card en:

un color totalmente distinto

sin una razón.

Card y Hover

Puedes utilizar:

Estilo → State → hover

Para modificar sutilmente:

• Background;

• Border;

• Shadow cuando corresponda;

• otras propiedades visuales disponibles.

El objetivo puede ser:

indicar interacción

o:

aportar profundidad visual

Pero recuerda:

si Card no es clicable,

el Hover no debería:

hacerla parecer un Button enorme

Ejemplo moderado

Normal:

Border gris suave

Hover:

Border ligeramente más visible

Puede aportar movimiento sin prometer interacción.

Card y Active

State:

active

puede utilizarse cuando el componente o diseño necesita un estado activo real.

No lo utilices únicamente:

porque existe la opción

Card y nth-of-type

El Editor puede permitir trabajar con:

nth-of-type(2n)

Esto puede utilizarse para estilos alternados.

Por ejemplo:

Card 2
Card 4
Card 6

Pero úsalo con cuidado.

Si el orden de Cards cambia:

también cambia:

qué Card recibe el estilo

Para una Card conceptualmente destacada,

una Class explícita suele ser más mantenible.

Card y altura igual

Es habitual querer:

todas las Cards de la misma altura

No empieces configurando:

height: 350px;

Porque:

• un título puede crecer;

• un Paragraph puede tener más líneas;

• mobile cambia el ancho.

Si necesitas una apariencia uniforme:

primero revisa:

• cantidad de contenido;

• Grid;

• estructura.

Si utilizas height: 100%

en una solución personalizada,

asegúrate de que la estructura padre permite ese comportamiento.

Evita Heights rígidas en píxeles para Cards con contenido variable.

Sexta regla

Las Cards deben poder crecer cuando el contenido lo necesite.

Card y responsive

Debes revisar:

Desktop
Tablet
Mobile

No solamente desktop/mobile.

Tablet es especialmente importante.

Una estructura:

3 Cards

puede verse perfecta en desktop

y demasiado estrecha en tablet.

Pasa a:

2 columnas

si mejora la lectura.

Mobile

Normalmente:

1 Card por fila

es una solución robusta.

No es obligatorio en todos los casos,

pero resulta especialmente apropiado cuando cada Card contiene:

• Heading;

• Paragraph;

• Link.

Card y orden mobile

Si las Cards representan:

Paso 1
Paso 2
Paso 3

el orden es fundamental.

Navigator debe conservar:

1
2
3

No utilices un orden visual desktop que después genere:

2
1
3

en mobile.

Card y contenido más largo

Prueba la Card más difícil.

No diseñes solamente con:

“Web”

Si después la Card real dice:

Desarrollo e implementación de soluciones personalizadas

el layout puede cambiar.

Utiliza el contenido definitivo cuanto antes.

Alert y Card dentro de la misma Section

Puedes utilizar ambos.

Por ejemplo:

SERVICIOS

[ CARD ][ CARD ][ CARD ]

[ ALERT ]
Algunos servicios pueden requerir evaluación previa.

Pero solo cuando el Alert comunica información real y relevante.

No utilices Alert debajo de Cards solamente:

para llenar espacio

Card dentro de Card

Evita una estructura como:

Card
└── Card
    └── Card

sin una necesidad concreta.

Puede generar:

• exceso de Borders;

• Padding acumulado;

• jerarquía confusa.

Si necesitas subdivisiones:

quizá sea mejor utilizar:

• Container;

• Grid Row;

• List.

Alert dentro de Card

Puede tener sentido en un caso concreto.

Por ejemplo:

PLAN PREMIUM

...

[ ALERT ]
Requiere configuración inicial.

Pero no debería ser la estructura habitual de todas las Cards.

Seleccionar correctamente el elemento

Cuando quieras editar una Card:

puedes seleccionar accidentalmente:

Paragraph

en lugar de:

Card completa

Utiliza:

• Navigator;

• Seleccionar padre.

Esto es especialmente importante para:

• Padding;

• Background;

• Border.

Ejemplo

Si quieres cambiar:

Background de toda la Card

pero seleccionaste:

Paragraph

el cambio solo afectará el texto.

Revisa la jerarquía antes de estilizar.

Mover Card

Puedes utilizar:

• arrastrar;

• mover arriba;

• mover abajo;

según la estructura.

Confirma mediante Navigator que mueves:

CARD COMPLETA

y no:

un elemento interno

Eliminar Card

Selecciona la Card completa.

Recuerda:

eliminar no solicita confirmación.

Si eliminas accidentalmente:

utiliza:

Deshacer

de inmediato.

No elimines la Column accidentalmente

si quieres borrar únicamente:

Card

Porque la Column puede formar parte del Grid necesario.

Classes recomendadas

Para una sección de servicios puedes utilizar:

services-section
service-card
service-card-icon
service-card-title
service-card-description
service-card-link

Para Alert:

notice-alert
notice-alert-title
notice-alert-text

No necesitas utilizar estos nombres exactos.

La regla es:

NOMBRE CLARO
+
FUNCIÓN CLARA

Evita:

box1
box2
newbox
finalbox
finalbox2

CSS localizado

Si necesitas CSS personalizado:

mejor:

.services-section .service-card {
    /* estilos de estas Cards */
}

No:

.card {
    /* ... */
}

si no quieres modificar todas las Cards del sitio.

Para Alert:

.product-notice .alert {
    /* ajustes localizados */
}

cuando la estructura lo permita.

Evita:

.alert {
    /* cambia todos los Alerts */
}

sin querer.

No modifiques .row globalmente

Evita:

.row {
    align-items:center;
}

Puede afectar:

• Services;

• Contact;

• Pricing;

• Forms.

Si una grilla concreta necesita alineación:

utiliza:

• Grid Row;

• Class localizada.

No modifiques .col-* globalmente

Evita reglas sobre:

.col-md-4
.col-sm-6

como sistema de diseño general.

Esas Classes pueden aparecer en muchas zonas.

No modifiques todos los Links

Evita:

a {
    font-weight:700;
}

para modificar únicamente los Links de Cards.

Usa:

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

No modifiques todos los iconos

Evita:

svg {
    width:48px;
}

Puede modificar:

• otros componentes;

• Social icons.

Utiliza Class localizada.

Bootstrap

Al solicitar código a una IA:

indica siempre:

Waclis utiliza Bootstrap 4.

No agregues:

• Bootstrap 5;

• Tailwind;

• React;

• otras librerías;

para crear Cards o Alerts.

Ambos pueden resolverse perfectamente dentro del sistema existente.

¿Necesito JavaScript?

Para una Card informativa:

NO

Para Alert informativo:

NO

No agregues JavaScript para:

• Hover;

• Border;

• Background;

• Grid;

• responsive.

Utiliza:

• Estilo;

• Grid Row;

• CSS cuando realmente haga falta.

Alert cerrable

Bootstrap puede admitir Alerts con comportamientos adicionales,

pero no debes asumir que:

todo Alert insertado

es automáticamente:

cerrable

Si necesitas un comportamiento interactivo específico:

comprueba primero:

• estructura;

• funcionalidad disponible.

No agregues scripts externos sin necesidad.

Card como enlace completo

Mismo criterio.

No asumas que:

Card

es clicable simplemente por ser Card.

Añade una acción real mediante:

• Link;

cuando corresponda.

Accesibilidad de Alert

El mensaje debe poder entenderse sin:

depender exclusivamente del color

Por ejemplo:

mejor:

Advertencia: esta operación reemplazará...

que:

caja amarilla:
esta operación reemplazará...

sin indicar su carácter.

Accesibilidad de Card

Comprueba:

• Heading correcto;

• Alt de Image;

• Link descriptivo;

• contraste;

• orden de lectura.

Ejemplo

No:

Ver más

repetido seis veces sin contexto,

si puedes utilizar:

Ver servicio

o un texto más específico.

Imágenes de Card

Completa Alt según el contenido.

Por ejemplo:

Captura de la Página web del proyecto Empresa XYZ

cuando ese dato sea útil.

No:

imagen2

Card sin Image

No hay ningún problema.

Una Card puede ser:

icono
+
texto

O incluso:

Heading
+
Paragraph

No agregues una Image únicamente:

porque otras Cards tienen una

si no aporta.

Uniformidad de Cards

Cuando varias Cards pertenecen a una misma grilla:

intenta mantener consistencia en:

• Padding;

• iconos;

• jerarquía;

• Links.

Pero el contenido puede ser distinto.

No necesitas que todos los Paragraphs tengan:

exactamente 25 palabras

Busca equilibrio,

no uniformidad artificial.

Card vs List Group

Utiliza Card cuando:

cada unidad tiene contenido compuesto

Utiliza List Group cuando:

varios elementos pertenecen a una lista más compacta

Por ejemplo:

Servicio
Descripción
Link

→ Card.

Mientras:

Opción A
Opción B
Opción C

→ puede ser List Group.

Card vs Alert

Utiliza Card:

Servicio

Alert:

Aviso sobre ese servicio

Card vs CTA

Una Card puede incluir CTA,

pero una gran llamada a la acción principal debería utilizar:

una Section CTA

cuando necesites alto protagonismo.

No encierres siempre el CTA principal dentro de una pequeña Card.

Card vs Section prediseñada

Para crear una sección de servicios puedes:

1. utilizar la sección prediseñada Servicios;

2. construir manualmente con:

   • Section;

   • Grid Row;

   • Cards.

Ningún método es siempre mejor.

Sección prediseñada

es útil para:

comenzar rápidamente

Construcción manual

es útil cuando necesitas:

una composición específica

Cómo utilizar IA para crear Cards

Puedes utilizar ChatGPT, Claude o Gemini.

Primero proporciona contenido real.

Prompt:

Necesito crear 3 Cards de servicios en Waclis.

Servicios reales:

1.
[...]

2.
[...]

3.
[...]

Cada Card debe contener:
- icono;
- H3;
- Paragraph;
- Link opcional.

Analiza:
- equilibrio de títulos;
- longitud de descripciones;
- si los tres necesitan Link.

No inventes funcionalidades.
No generes HTML ni CSS.

IA para decidir arquitectura

Necesito mostrar 6 Cards.

Cada una contiene:
- icono;
- H3;
- Paragraph de aproximadamente 30 palabras.

Waclis utiliza Bootstrap 4.

Propón:
- desktop;
- tablet;
- mobile.

Utiliza conceptualmente Grid Row y Columns.
No generes CSS.

IA para equilibrar contenido

Estas son mis 4 Cards:

[pegar]

Analiza si alguna tiene:
- Heading demasiado largo;
- descripción desproporcionada;
- mensaje repetido.

No inventes contenido nuevo.
No reescribas todavía.

IA para distinguir característica y beneficio

Estas son mis Cards:

[pegar]

Clasifica cada una como:
- característica;
- beneficio;
- servicio;
- mezcla.

Explica si forman una sección conceptualmente coherente.

No reescribas.

IA para definir si una Card necesita Link

Estas son mis Cards:

[pegar]

Destinos disponibles:
[listar]

Indica cuáles necesitan un Link
y cuáles funcionan mejor como contenido informativo.

No inventes destinos.

IA para revisar falsa interacción

Esta Card no es clicable.

Hover actual:
[describir]

Analiza si el Hover puede hacer creer
que la Card completa es una acción.

No generes CSS.

IA para Card destacada

Tengo 3 Cards con la misma Class:
.service-card

Quiero destacar una
sin duplicar todos sus estilos.

Propón únicamente:
- una Class de variante;
- qué propiedades deberían cambiar.

No generes CSS todavía.

IA para CSS localizado

Mi sección ya funciona.

Class raíz:
.services-section

Card:
.service-card

Necesito únicamente:
- Border radius de 16px;
- Padding de 28px;
- Hover sutil;
- ajuste de Padding en mobile.

Waclis utiliza Bootstrap 4.

No cambies:
- HTML;
- Grid;
- otras Cards del sitio.

No agregues:
- JavaScript;
- frameworks;
- librerías.

Devuelve solamente CSS localizado.

IA para revisar CSS de Cards

Audita este CSS antes de utilizarlo en Waclis:

[pegar]

Busca:
- .card global;
- .row global;
- .col global;
- h3 global;
- img global;
- a global;
- height fija;
- min-width;
- position:absolute;
- !important.

Waclis utiliza Bootstrap 4.

No reescribas todavía.

IA para Alert

Necesito un Alert para comunicar:

[texto real]

Objetivo:
[informar / advertir / confirmar]

Ayúdame a reducir el mensaje
para que sea claro y directo.

No agregues consecuencias
que no estén presentes en la información original.

IA para detectar Alerts innecesarios

Tengo estos cinco mensajes:

[pegar]

Indica cuáles justifican un Alert
y cuáles deberían ser Paragraph normales.

Criterio:
Alert solo para información que realmente
necesita una atención especial.

No reescribas todavía.

IA para accesibilidad de Alert

Este Alert comunica:

[texto]

Color utilizado:
[describir]

Analiza si el significado depende demasiado del color.

Propón cómo hacer que el propio texto
identifique claramente:
- información;
- advertencia;
- confirmación.

No generes CSS.

IA para responsive de Cards

Mis Cards se ven bien en desktop
pero quedan estrechas en tablet.

Desktop:
3 columnas

Contenido de cada Card:
[describir]

Waclis utiliza Bootstrap 4.

Analiza primero la cantidad de Columns
que recomendarías para:
- desktop;
- tablet;
- mobile.

No reduzcas Typography como primera solución.
No generes CSS si Grid Row puede resolverlo.

IA para Cards con alturas desiguales

Tengo 3 Cards.

Contenido:

Card A:
[...]

Card B:
[...]

Card C:
[...]

Se ven con alturas diferentes.

Analiza primero:
1. diferencias de contenido;
2. estructura;
3. Grid.

No propongas height fija como primera solución.

IA para revisar clonación

Estas Cards fueron creadas clonando la primera:

[pegar HTML si corresponde]

Busca:
- IDs duplicados;
- Links repetidos;
- Alt sin actualizar;
- Heading repetido;
- URL incorrecta.

No inventes reemplazos.

Caso práctico 1 · Tres Cards de servicios

Objetivo:

Presentar 3 servicios

Estructura:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Column
        │   └── Card
        │       ├── Font Icon
        │       ├── Heading
        │       ├── Paragraph
        │       └── Link
        │
        ├── Column
        │   └── Card
        │
        └── Column
            └── Card

Crea primero una

Configura:

• estructura;

• Typography;

• Padding;

• Background;

• Border.

Después:

Clonar

Actualiza contenido.

Finalmente:

configura Grid para:

Desktop
3

Tablet
2

Mobile
1

cuando esa distribución sea apropiada.

Caso práctico 2 · Alert informativo

Necesitas indicar:

Antes de comenzar, necesitas disponer
de determinadas credenciales.

Utiliza:

Alert
├── texto destacado:
│   Antes de comenzar
└── Paragraph:
    Necesitas...

Mantén:

• Background reconocible;

• contraste;

• Padding.

No agregues:

animación permanente

para llamar más la atención.

Caso práctico 3 · Card de proyecto

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

Revisa:

• Alt;

• proyecto real;

• URL correcta.

Clona únicamente después de terminar la primera.

Caso práctico 4 · Card sin Link

Beneficio:

[ ICONO ]

Gestión centralizada

Descripción...

No agregues:

Ver más →

si no hay contenido adicional.

El diseño puede ser completo sin CTA.

Caso práctico 5 · Card destacada

Tres planes:

[ A ][ B ][ C ]

Plan B debe destacarse.

Mantén:

pricing-card

para los tres.

Agrega:

pricing-card-featured

al segundo.

No crees:

pricing-card-1
pricing-card-2
pricing-card-3

si solo cambia una propiedad.

Caso práctico 6 · Cards que se rompen en tablet

Desktop:

[ A ][ B ][ C ]

Tablet:

[ A ][ B ][ C ]

pero:

• títulos ocupan cinco líneas;

• Links se cortan.

No reduzcas:

Font size

primero.

Cambia la distribución:

3
→
2

Después revisa Typography.

Problemas frecuentes con Alert

El Alert no se destaca

Revisa:

• Background;

• Border;

• contraste;

• espacios.

El Alert se destaca demasiado

Reduce:

• intensidad;

• efectos;

• Padding excesivo.

Todos los textos parecen Alert

Estás utilizando demasiados.

El significado depende solo del color

Agrega:

• texto;

• etiqueta.

El Alert queda demasiado alto en mobile

Revisa:

• Height fija;

• Padding;

• estructura horizontal.

El Link sale del Alert

Revisa:

• Width;

• distribución;

• texto.

Quiero cerrarlo

No asumas que el comportamiento está disponible automáticamente.

Comprueba primero la estructura y la funcionalidad real del componente antes de agregar código.

Problemas frecuentes con Card

Las Cards quedan demasiado estrechas

Revisa Grid.

El texto se corta

Revisa Height fija.

Una Card es mucho más alta

Revisa:

• contenido;

• Heading;

• Paragraph.

La Image sale de la Card

Revisa:

• Width;

• Max Width;

• contenedor.

Todas las Cards cambian juntas

Revisa:

Linked styles

Puede ser correcto porque comparten Class.

Quiero cambiar solo una

Utiliza:

• Class de variante.

Después de clonar, todas llevan a la misma URL

Actualiza:

• Link;

• Url.

Cloné y tengo IDs duplicados

Actualiza o elimina los IDs.

Card parece clicable pero no hace nada

Reduce Hover o agrega una acción real cuando corresponda.

Card no parece clicable pero contiene Link

Refuerza:

• Link;

• jerarquía de acción.

Tres Cards no entran en mobile

No tienen que entrar en una fila.

Apílalas.

Necesito hacerlas más pequeñas

Antes de reducir todo:

revisa cantidad de columnas.

Las Cards tienen demasiado espacio

Revisa:

• Padding de Card;

• Margin de elementos internos.

Todo el sitio cambió al estilizar Card

Probablemente modificaste:

.card

globalmente.

Localiza el CSS.

El Header cambió al estilizar Links de Card

Probablemente utilizaste:

a {
}

Utiliza una Class específica.

Buenas prácticas para Alert

• Utilízalo cuando el mensaje realmente necesita atención.

• Mantén el texto breve.

• Explica el significado mediante palabras, no solo color.

• Mantén buen contraste.

• Evita Heights fijas.

• Revisa mobile.

• Utiliza Links solo cuando exista una acción relacionada.

• No conviertas todos los avisos en Alerts.

• Mantén el sistema visual general de la Página web.

Buenas prácticas para Card

• Agrupa contenido relacionado.

• Construye primero una Card correctamente.

• Después clona.

• Utiliza Classes compartidas.

• Utiliza variantes cuando sea necesario.

• Evita IDs para estilos repetidos.

• No fijes alturas innecesariamente.

• Utiliza Grid Row para distribuir.

• Reduce columnas en tablet/mobile.

• Mantén Headings correctos.

• Configura Alt.

• Actualiza Links después de clonar.

• No generes falsa clicabilidad.

• Mantén una línea visual coherente.

Checklist · Alert

• El mensaje realmente necesita destacarse.

• El contenido es breve y claro.

• Su función puede comprenderse sin depender únicamente del color.

• Tiene contraste adecuado.

• Padding es suficiente.

• Border/Background son coherentes.

• No tiene Height fija problemática.

• Funciona en mobile.

• El Link funciona si existe.

• No lo utilicé solamente como decoración.

• No agregué JavaScript innecesario.

Checklist · Card

• Todo el contenido pertenece a una misma unidad.

• La estructura interna es lógica.

• Heading utiliza un nivel correcto.

• Image tiene Alt cuando corresponde.

• Cover/Contain fue revisado.

• Paragraph tiene longitud razonable.

• Link solo existe cuando hay una acción real.

• La URL es correcta.

• No existe ID duplicado.

• Las Cards similares comparten Class.

• Las variantes utilizan una Class adicional.

• No utilicé Height rígida sin necesidad.

• Hover coincide con la interacción real.

Checklist · Cards en Grid

• Desktop tiene una cantidad adecuada de columnas.

• Tablet fue revisada.

• Mobile fue revisado.

• Wrap funciona.

• No existe scroll horizontal.

• Las Cards no quedan excesivamente estrechas.

• No reduje Typography para conservar columnas.

• El orden mobile es lógico.

• Utilicé Grid Row en lugar de grandes Margins.

• La Card más larga también funciona.

Checklist · Clonación

• Actualicé Heading.

• Actualicé Paragraph.

• Actualicé Image.

• Actualicé Alt.

• Actualicé Link.

• Actualicé Url.

• Revisé IDs.

• Revisé Badges.

• Revisé Classes.

• Revisé Linked styles.

Checklist · CSS

• No modifiqué .card globalmente sin intención.

• No modifiqué .alert globalmente sin intención.

• No modifiqué .row.

• No modifiqué .col-*.

• No modifiqué h3.

• No modifiqué img.

• No modifiqué a.

• Utilicé scope.

• No agregué Bootstrap adicional.

• Waclis continúa utilizando Bootstrap 4.

• No agregué Tailwind.

• No agregué JavaScript innecesario.

• No abusé de !important.

• No utilicé Position absolute para el layout principal.

Checklist · Responsive

• Alert se adapta al ancho disponible.

• Card se adapta al ancho disponible.

• Images no desbordan.

• Buttons/Links no desbordan.

• Headings son legibles.

• No existen Heights rígidas que corten contenido.

• No existe scroll horizontal.

• Desktop continúa funcionando.

• Tablet funciona.

• Mobile funciona.

• Probé desde Ver página.

Checklist final

• Seleccioné el componente correcto para el tipo de contenido.

• Utilicé Alert para mensajes destacados.

• Utilicé Card para contenido agrupado.

• La estructura se comprende desde Navigator.

• El estilo es coherente con el resto de la Página web.

• La jerarquía de Headings es correcta.

• Los Links representan acciones reales.

• No existen IDs duplicados.

• Revisé Linked styles.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• Guardé los cambios.

• Utilicé Ver página.

• Probé Links y comportamiento real.

En resumen

Utiliza:

ALERT

cuando necesites:

LLAMAR LA ATENCIÓN
SOBRE UN MENSAJE

Por ejemplo:

IMPORTANTE
ADVERTENCIA
INFORMACIÓN
CONFIRMACIÓN

Utiliza:

CARD

cuando necesites:

AGRUPAR CONTENIDO RELACIONADO

Por ejemplo:

SERVICIO
PROYECTO
BENEFICIO
PLAN
RECURSO

Alert:

MENSAJE
→ ATENCIÓN

Card:

CONTENIDO
→ ORGANIZACIÓN

Para varias Cards:

CARD
↓
GRID ROW
↓
RESPONSIVE

Por ejemplo:

DESKTOP
3 columnas

TABLET
2 columnas

MOBILE
1 columna

cuando el contenido lo requiera.

Construye primero:

UNA CARD CORRECTA

Después:

CLONAR

Y revisa:

CONTENIDO
IMAGE
ALT
LINK
URL
ID

Para estilos repetidos:

CLASS

Para una variante:

CLASS BASE
+
CLASS DE VARIANTE

No:

UN ID DIFERENTE
+
CSS DUPLICADO
PARA CADA CARD

Respecto del responsive:

REDUCIR COLUMNAS
>
REDUCIR LEGIBILIDAD

Respecto del código:

WACLIS
=
BOOTSTRAP 4

No necesitas:

Bootstrap 5 adicional
Tailwind
React
JavaScript

para crear una Card o Alert profesional.

Y la regla final

CONTENIDO
↓
COMPONENTE CORRECTO
↓
ESTRUCTURA
↓
GRID
↓
ESTILO
↓
RESPONSIVE
↓
FUNCIÓN
↓
GUARDAR CAMBIOS
↓
VER PÁGINA

Alert y Card están correctamente utilizados cuando el visitante puede comprender inmediatamente:

“Esto es un aviso al que debo prestar atención”

o:

“Todo lo que está dentro de esta Card pertenece al mismo servicio, proyecto, beneficio o concepto.”

Cuando esa diferencia es clara, ambos componentes dejan de ser simples cajas visuales y pasan a cumplir correctamente su función dentro del diseño y la comunicación de la Página web.