Elementos de la interfaz

Los elementos de la interfaz de usuario son componentes independientes formados por una o varias clases y elementos.

Texto

Existen 2 elementos de texto básicos, Encabezado y Párrafo. Utiliza estos componentes para gestionar tus textos en el proyecto con rapidez.

Encabezado

Texto de encabezado

Párrafo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Imagen

Utiliza este componente para añadir imágenes rápidamente a tu proyecto.

Imagen

Botones

Los botones comparten una clase base, y puedes combinar clases de estilo y tamaño para crear tus diferentes variaciones, siempre que cada una de ellas exista como su propia clase combinada.
Por ejemplo: button cc-small cc-secondary

Botones de texto

Botón

Primario LG Sólido

Primario MD Sólido

Primario SM Sólido

Primario LG Sólido con estrella

Texto del botón

Primario MD Sólido con estrella

Texto del botón

Primario SM Sólido con estrella

Texto del botón

Primario LG Contorneado

Texto del botón

Primario MD Contorneado

Texto del botón

Primario SM Contorneado

Secundario LG Sólido

Secundario MD Sólido

Secundario SM Sólido

Secundario LG Contorneado

Texto del botón

Secundario MD Contorneado

Texto del botón

Secundario SM Contorneado

Terciario LG Sólido

Terciario MD Sólido

Terciario SM Sólido

Terciario LG Sólido Lima

Texto del botón

Terciario MD Sólido Lima

Texto del botón

Terciario SM Sólido Lima

Texto del botón

Terciario LG Contorneado

Texto del botón

Terciario MD Contorneado

Texto del botón

Terciario SM Contorneado

Texto del botón

Iconos

Son útiles tanto si añades iconos como imágenes o como SVG dentro de elementos incrustados. Al añadirlos como código HTML incrustado, cambia las propiedades height y width del SVG a 100%, y el relleno/trazo a currentColor.

icono

cc-sm

icono

cc-lg

Etiquetas

Las etiquetas se utilizan en las entradas del blog para determinar la categoría, como marcadores de filtro para ofrecer información útil al usuario y mucho más. Existen varios tipos y aquí presentamos los 2 más utilizados.

[IU] Etiqueta

Texto de etiqueta

etiqueta

nombre de etiqueta

[UI] Etiqueta X

nombre de etiqueta

etiqueta-x

nombre de etiqueta

Componentes globales

En esta sección tenemos los componentes globales como la barra de navegación, el pie de página, el banner superior y el banner emergente. Estos componentes están pensados para aparecer en todas las páginas, por lo que son [GLOBALES].

Barra de navegación

La barra de navegación es el componente que se ubica dentro del elemento Header (header-wrapper). Se utiliza como la navegación principal en todo el sitio web.

[GLOBAL] Barra de navegación

Pie de página

El pie de página es el componente que se ubica dentro del elemento Footer (footer-wrapper). Ayuda a añadir enlaces de navegación adicionales para que el usuario explore más a fondo el sitio web.

[GLOBAL] Pie de página

Banner superior

El pie de página es el componente que se ubica dentro del elemento Footer (footer-wrapper). Ayuda a añadir enlaces de navegación adicionales para que el usuario explore más a fondo el sitio web.

[GLOBAL] Banner superior

Obtén 3 automatizaciones con IA diseñadas para tu negocio

Auditoría de IA gratuita

Banner emergente

El pie de página es el componente que se ubica dentro del elemento Footer (footer-wrapper). Ayuda a añadir enlaces de navegación adicionales para que el usuario explore más a fondo el sitio web.

[GLOBAL] Banner emergente

Título de CTA emergente

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Texto de CTA Texto de CTA

Modal de inicio

Formulario de captación de leads de varios pasos (Bienvenida → Privacidad → Términos y condiciones → Contacto → Empresa → Requisitos → Presupuesto → Gracias). Los leads se envían a /api/leads y se guardan en Airtable "Leads". Global: coloca una instancia en cada página como último elemento secundario de page-wrapper.

JS: data-component="get-started-modal" (mm-front, src/components/get-started-modal). Ábrelo desde cualquier elemento con data-modal-trigger="get-started", o desde una instancia de botón con su propiedad "Data Attribute" configurada en data-modal-trigger. Sin propiedades, sin variantes.

[COMPONENTE] Modal de inicio

Componentes de tarjeta

Primero, esta es la estructura de una tarjeta normal con las clases generales que modificaremos dependiendo de la tarjeta que estemos desarrollando.

tarjeta

encabezado_de_tarjeta

cuerpo_de_tarjeta

pie_de_tarjeta

Tarjetas

Aquí tienes las diferentes variantes de tarjetas del proyecto.

[TARJETA] Imagen superior

Título de la tarjeta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

[TARJETA] Testimonio

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet."

Nombre del autor

Puesto de trabajo

Componentes de formulario

Lo primero es definir el estilo de los campos y elementos del formulario.

form_wrapper

Hemos recibido tu solicitud.

¡Vaya! Algo salió mal al enviar el formulario.

Formularios

Aquí tienes las diferentes variantes de tarjetas del proyecto.