Componentes web

Componentes digitales

Componentes y patrones web.

Una sola biblioteca para construir grows.pro: componentes de interfaz, formularios y bloques de página con ejemplos, código y recomendaciones de uso.

Biblioteca web de Grows

Todo lo necesario para construir experiencias consistentes.

Explora componentes por categoría y combina bloques de página sin repetir patrones. Prueba sus estados, consulta el código y revisa cuándo utilizarlos.

Formularios

Captación sin fricciones.

Campos con etiqueta visible, mensajes contextualizados, confirmación accesible y consentimiento comercial opcional.

Formulario de contacto

Demostración local: no se envían ni almacenan datos. La aceptación comercial es independiente de la solicitud.

<form id="contacto">
  <label for="nombre">Nombre y apellido</label>
  <input id="nombre" name="name" required autocomplete="name">
  <label for="correo">Correo corporativo</label>
  <input id="correo" type="email" required autocomplete="email">
  <label><input type="checkbox" name="optin"> Comunicaciones opcionales</label>
  <button type="submit">Solicitar conversación</button>
  <output aria-live="polite"></output>
</form>

Navegación

Encontrar el siguiente paso.

Encabezado, menú responsive, enlaces de sección y jerarquía clara del CTA.

Header responsive

<header class="site-header">
  <a href="/">Grows</a>
  <button aria-expanded="false" aria-controls="nav">Menú</button>
  <nav id="nav" aria-label="Principal">...</nav>
</header>

Conversión

De la propuesta de valor a la acción.

Hero con beneficio principal y llamada a la acción; testimonios y prueba social deben ser verificables.

Hero + CTA

ESTRATEGIA + TECNOLOGÍA

Hacemos que el crecimiento tenga dirección.

Personas, procesos y datos conectados para tomar mejores decisiones.

Solicitar diagnóstico ↗

<section class="hero">
  <p>Estrategia + tecnología</p>
  <h1>Hacemos que el crecimiento tenga dirección.</h1>
  <p>Personas, procesos y datos conectados.</p>
  <a href="#contacto">Solicitar diagnóstico</a>
</section>

Contenido

Respuestas al alcance de la mano.

Preguntas frecuentes, pestañas y contenido expandible para mejorar la lectura.

Preguntas frecuentes

¿Cómo se inicia un proyecto?

Comenzamos con un diagnóstico de objetivos, procesos y datos disponibles.

¿Cómo acompañan la adopción de HubSpot?

Con formación, revisión de procesos y mejora continua según las necesidades del equipo.

¿Podemos integrar otras herramientas?

La viabilidad depende del alcance y de las capacidades técnicas de cada plataforma.

<details>
  <summary>¿Cómo se inicia un proyecto?</summary>
  <p>Comenzamos con un diagnóstico.</p>
</details>

Estados

Feedback que ayuda a avanzar.

Notificaciones, validación, carga y confirmaciones con mensajes accionables.

Notificaciones y estados de carga

Selecciona un estado para ver el comportamiento.

<div role="status" aria-live="polite">
  Los cambios se guardaron correctamente.
</div>
<button disabled aria-busy="true">Procesando…</button>

Bloques de página

Diseñados para crecer juntos.

Bloques reutilizables para comunicar servicios, resultados, confianza y navegación al final de la página. Mantén consistencia en espacios, jerarquía y comportamiento responsive.

Tarjeta de servicio

SERVICIOS

Revenue Operations

Conecta equipos, información y procesos para transformar oportunidades en resultados.

Explorar solución ↗

<article class="servicio"><svg aria-hidden="true">...</svg><h3>Revenue Operations</h3><p>Beneficio del servicio.</p><a href="/servicios">Explorar solución</a></article>

Bloque de métricas

RESULTADOS

Datos que cuentan una historia.

+24%Indicador ejemplo

3.2×Indicador ejemplo

89%Indicador ejemplo

Cifras ficticias para ilustrar el componente.

<section aria-label="Indicadores clave"><h3>Resultados</h3><dl><div><dt>Indicador</dt><dd>24 %</dd></div></dl></section>

Prueba social y alianzas

Confianza

Construimos relaciones que hacen crecer.

Un espacio para mostrar aliados, certificaciones y clientes que autoricen el uso de sus marcas.

Espacio para marca autorizadaEspacio para testimonio validado

<section aria-labelledby="confianza">
  <h2 id="confianza">Relaciones que hacen crecer</h2>
  <ul class="logos-clientes">...</ul>
</section>

Comparativa de soluciones

Implementación

Proyecto definido

Ideal para poner en marcha un proceso o una solución con alcance y entregables establecidos.

Alcance por proyecto

Acompañamiento

Mejora continua

Para equipos que necesitan revisar prioridades, optimizar procesos y sostener la adopción.

Trabajo recurrente

<div class="comparativa">
  <article><h3>Proyecto definido</h3>...</article>
  <article><h3>Mejora continua</h3>...</article>
</div>

Footer corporativo

<footer>
  <a href="/" aria-label="Inicio de Grows">...</a>
  <nav aria-label="Enlaces de pie de página">...</nav>
</footer>

BIBLIOTECA DE COMPONENTES

Botones: variantes y estados

Prueba los estados que deben documentarse antes de implementar cada componente. En hover, active y focus se muestra el aspecto visual; disabled sí se comporta como inactivo.

Demo interactiva

Variante Estado Tamaño

Normal: botón activo, legible y con una acción principal clara.

<button class="grows-btn grows-btn--primary">Explorar solución</button>

Hazlo

Un CTA primario por bloque; etiquetas concretas; contraste suficiente; foco visible.

Evita

Usar disabled como único feedback; reemplazar etiquetas por íconos sin nombre; depender solo del color.

Botones

Acciones legibles, con estados hover y foco visibles.

<div class="ui-stack"><button class="btn" onclick="notify('Acci&oacute;n de ejemplo')" type="button">Acci&oacute;n principal &nearrow;</button><button class="btn dark" onclick="notify('Acci&oacute;n de ejemplo')" type="button">Secundaria</button><button class="btn alt" onclick="notify('Acci&oacute;n de ejemplo')" type="button">Terciaria</button></div>

Correo corporativo

En crecimiento Disponible

Campos y estados

Contornos neutros y acentos funcionales.

<label for="email" style="font-size:12px;font-weight:700;display:block;margin-bottom:8px">Correo corporativo</label><input class="field" id="email" placeholder="nombre@empresa.com" type="email"/><div style="height:10px"></div><div class="ui-stack"><span class="pill">En crecimiento</span><span class="status"><i></i> Disponible</span></div>

INSIGHT · REVOPS

Más claridad. Mejores decisiones.

Una tarjeta de contenido para comunicar hallazgos, productos y próximos pasos.

Crecimiento

↗ 24%

Tendencia positiva

Tarjetas de contenido

Jerarquía clara, respiración y uso limitado del color.

<div class="row-flex" style="align-items:start;flex-wrap:wrap"><div><span class="pill">INSIGHT &middot; REVOPS</span><h3 style="font-size:27px;margin:16px 0 9px">M&aacute;s claridad. Mejores decisiones.</h3><p class="muted" style="max-width:480px">Una tarjeta de contenido para comunicar hallazgos, productos y pr&oacute;ximos pasos.</p></div><div style="background:#fff;border:1px solid #e0e6e9;border-radius:18px;padding:22px;min-width:170px"><span class="muted">Crecimiento</span><div style="font-size:44px;letter-spacing:-.07em;font-weight:700">&nearrow; 24%</div><span class="status"><i></i> Tendencia positiva</span></div></div>

PATRONES REUTILIZABLES

Otros componentes web

Ejemplos funcionales para documentar comportamientos y estados, no solo apariencia visual.

Tabs

Selección

Definir una dirección clara antes de elegir herramientas.

<div aria-label="Vista del componente Tabs" class="ds-view-switch"><button aria-pressed="true" class="ds-view-tab is-selected" data-view="preview" type="button">Vista previa</button><button aria-pressed="false" class="ds-view-tab" data-view="code" type="button">Código</button></div>
<div aria-label="Servicios de ejemplo" class="ds-tabs" role="tablist"><button aria-controls="ds-tab-panel" aria-selected="true" data-tab="Estrategia" id="ds-tab-strategy" role="tab" tabindex="0" type="button">Estrategia</button><button aria-controls="ds-tab-panel" aria-selected="false" data-tab="Datos" id="ds-tab-data" role="tab" tabindex="-1" type="button">Datos</button><button aria-controls="ds-tab-panel" aria-selected="false" data-tab="Personas" id="ds-tab-people" role="tab" tabindex="-1" type="button">Personas</button></div>
<div aria-labelledby="ds-tab-strategy" class="ds-tab-panel" id="ds-tab-panel" role="tabpanel" tabindex="0">Definir una dirección clara antes de elegir herramientas.</div>

Accordion

Divulgación progresiva

¿Cuándo usar un acordeón?

Para contenido secundario que el usuario puede consultar sin interrumpir el recorrido principal.

¿Qué evitar?

No esconder decisiones importantes, errores o instrucciones esenciales.

<div aria-label="Vista del componente Accordion" class="ds-view-switch"><button aria-pressed="true" class="ds-view-tab is-selected" data-view="preview" type="button">Vista previa</button><button aria-pressed="false" class="ds-view-tab" data-view="code" type="button">Código</button></div>
<details class="ds-accordion"><summary>¿Cuándo usar un acordeón?</summary><p>Para contenido secundario que el usuario puede consultar sin interrumpir el recorrido principal.</p></details>
<details class="ds-accordion"><summary>¿Qué evitar?</summary><p>No esconder decisiones importantes, errores o instrucciones esenciales.</p></details>

Alertas y feedback

Estados

InformaciónLos cambios se verán reflejados al publicar.

CorrectoLa configuración se guardó correctamente.

Revisa el campoIngresa un correo válido para continuar.

<div aria-label="Vista del componente Alertas y feedback" class="ds-view-switch"><button aria-pressed="true" class="ds-view-tab is-selected" data-view="preview" type="button">Vista previa</button><button aria-pressed="false" class="ds-view-tab" data-view="code" type="button">Código</button></div>
<div class="ds-alert ds-alert-info" role="status"><strong>Información</strong><span>Los cambios se verán reflejados al publicar.</span></div>
<div class="ds-alert ds-alert-success" role="status"><strong>Correcto</strong><span>La configuración se guardó correctamente.</span></div>
<div class="ds-alert ds-alert-error" role="alert"><strong>Revisa el campo</strong><span>Ingresa un correo válido para continuar.</span></div>

Badges y estado

Jerarquía

BorradorPublicadoEn revisiónNuevo

Correo de contactoIncluye etiqueta persistente y estado de foco visible.

<div aria-label="Vista del componente Badges y estado" class="ds-view-switch"><button aria-pressed="true" class="ds-view-tab is-selected" data-view="preview" type="button">Vista previa</button><button aria-pressed="false" class="ds-view-tab" data-view="code" type="button">Código</button></div>
<div class="ds-badges"><span class="ds-tag ds-tag-neutral">Borrador</span><span class="ds-tag ds-tag-success">Publicado</span><span class="ds-tag ds-tag-warning">En revisión</span><span class="ds-tag ds-tag-outline">Nuevo</span></div>
<div class="ds-form-preview"><label for="ds-field-example">Correo de contacto</label><input id="ds-field-example" placeholder="nombre@empresa.com" type="email"/><small>Incluye etiqueta persistente y estado de foco visible.</small></div>

Lenguaje gráfico

Elementos que acompañan.

El manual propone líneas orgánicas, flechas, trazos libres e iconos lineales de un solo color. Deben complementar el contenido, no competir con él.

✓ Iconografía recomendada

Outline o glifos, de un solo color corporativo, con espesor y estilo consistentes.

× Evitar

Iconos multicolor, rellenos 3D, degradados, sombras intensas o mezclas de estilos sin un criterio claro.