Componentes base

¿Qué es esta página?

Librería de componentes compartidos que viven en themes/_base/. Se renderizan con el tema Black-yellow como base genérica del framework; cualquier otro tema puede aplicarse encima para redefinir la identidad visual sin tocar el HTML.

Botones

Variantes estándar del framework: primary, secondary, tertiary, label-m, link y badge. Clases en themes/_base/_buttons.css. Cada tema puede sobreescribirlas con su propia identidad visual.

Variantes

.btn .btn-primary
.btn .btn-secondary
.btn .btn-tertiary
.btn .btn-tertiary .hg-text-underline
.btn .btn-label-m
.btn .btn-link
.btn .btn-badge
.btn[disabled]

Tamaños

.btn .btn-sm
.btn .btn-lg

Ancho completo

.btn .btn-full

Inputs

Campos de formulario base con floating label: texto, email, password, textarea y select. Cada input vive dentro de .form-input-label-2 para que el label se anime al enfocar o al contener valor. Clases en themes/_base/_inputs.css.

Tipos

.form-input-label-2 > .input
.input (type=email)
.input (type=password)
.input (textarea)
.input (select)

Estados

Este campo tiene un error
.input-error + .helper-text-error
Campo válido
.input-success + .helper-text-success
Revisa este campo
.input-warning + .helper-text-warning
.input[disabled]

Labels

Etiquetas de formulario: base, obligatoria e inline. Clases en themes/_base/_labels.css.

Variantes

.label
.label .label-required
.label .label-inline

Checkboxes

Checkbox con input nativo oculto y marca SVG inline dentro de .checkbox-indicator. El estado visible se controla 100% con CSS (sin JS). Clases en themes/_base/_checkboxes.css.

Estados

.checkbox
.checkbox (checked)
.checkbox[disabled]

Radios

Radio buttons con el patrón .checkbox-radio: el input nativo se oculta visualmente y el círculo se pinta con label::before. Clases en themes/_base/_radios.css.

Grupo

.checkbox-radio
.checkbox-radio (checked)
.checkbox-radio[disabled]

Switches

Interruptores on/off con el patrón .checkbox-item-2: pista rectangular y un .checkbox-circle que se desplaza al marcar. Clases en themes/_base/_switches.css.

Estados

.checkbox-item-2
.checkbox-item-2 (checked)
.checkbox-item-2[disabled]
.checkbox-item-2.is-error

Formularios

Composición de campos con label flotante + estado. .form-group apila verticalmente los campos; cada uno usa .form-input-label-2 para el floating label y (opcionalmente) .helper-text para el mensaje de estado. Clases en themes/_base/_forms.css.

Grupo de formulario

.form-group > .form-input-label-2
.form-group (con textarea)
Este campo es obligatorio
.form-group (con helper-text)

Containers

Contenedores centrados con max-width responsivo y/o fijo. .container escala con los breakpoints; .container-2 es más estrecho; las variantes .container-640, .container-512 y .container-360 fijan un ancho concreto. Clases en themes/_base/_containers.css.

Responsivos

.container
.container
.container-2
.container-2

Anchos fijos

.container-640
.container-640
.container-512
.container-512
.container-360
.container-360

Grid

Utilidades de CSS Grid inspiradas en Tailwind. El contenedor debe tener display:grid y usar .hg-grid-cols-N para definir N columnas; los hijos usan .hg-col-span-N para ocupar varias. Con el prefijo md: se activan a partir de 768 px. Clases en themes/_base/objects/_grid.css.

Columnas iguales

1
2
3
.hg-grid-cols-3
1
2
3
4
.hg-grid-cols-4

Col-span

span 8
span 4
.hg-grid-cols-12 > .hg-col-span-{8,4}
span 6
span 6
.hg-grid-cols-12 > .hg-col-span-6

Typography

Clases utilitarias para texto: encabezados .h1–.h6, .lead, .muted, .large, .small, .blockquote, .code, .kbd. Clases en themes/_base/_typography.css.

Encabezados

Heading 1

.h1

Heading 2

.h2

Heading 3

.h3

Heading 4

.h4
Heading 5
.h5
Heading 6
.h6

Cuerpo

Texto de entradilla, ligero y grande.

.lead

Texto grande y semibold.

.large

Texto pequeño 12px.

.small

Texto en gris para detalles secundarios.

.muted
Cita destacada con borde lateral.
.blockquote

Inline

npm install holygrailcss
.code
⌘ K
.kbd

Headline scale (estilo ramp.com)

Headline XL

.headline-xl

Headline L

.headline-l

Headline M

.headline-m

Headline S

.headline-s

Headline XS

.headline-xs

Card

Contenedor genérico con card-header, card-body y card-footer. Usa .card-flat para fondo gris sin borde. Clases en themes/_base/_card.css.

Variantes

Plan Pro

Para equipos en crecimiento.

29 €/mes con todas las funcionalidades incluidas.
.card (con header/body/footer)
Card flat: sin borde, fondo gris.
.card.card-flat

Badge

Etiquetas pequeñas para estado / categoría. Variantes semánticas: default, secondary, outline, destructive, success, warning, info. Clases en themes/_base/_badge.css.

Variantes

Default
.badge
Secondary
.badge-secondary
Outline
.badge-outline
Destructive
.badge-destructive
Success
.badge-success
Warning
.badge-warning
Info
.badge-info

Alert

Banner inline para info / warning / error / success. Usa alert-icon, alert-content con alert-title y alert-description. Clases en themes/_base/_alert.css.

Variantes

Heads up

Tu trial expira en 3 días.

.alert.alert-info
Guardado

Tus cambios están publicados.

.alert.alert-success
Atención

El stock es limitado.

.alert.alert-warning
Error

No se pudo guardar.

.alert.alert-destructive

Avatar

Círculo con imagen + fallback de iniciales. Tamaños -sm 24, default 40, -lg 56, -xl 80. Variante .avatar-square. Clases en themes/_base/_avatar.css.

Tamaños

MR
.avatar.avatar-sm
MR
.avatar
MR
.avatar.avatar-lg
MR
.avatar.avatar-xl

Variantes

SQ
.avatar.avatar-square
ABC
.avatar-group

Separator

Divisor horizontal o vertical. Variante con texto en el centro. Clases en themes/_base/_separator.css.

Variantes

.separator
Izq
Der
.separator.separator-vertical
o continúa con
.separator-with-label

Progress

Barra de progreso con tamaños -sm, default y -lg. Variante indeterminada. Clases en themes/_base/_progress.css.

Determinado

.progress (30%)
.progress (65%)
.progress.progress-success

Tamaños

.progress.progress-sm
.progress.progress-lg

Indeterminado

.progress.progress-indeterminate

Skeleton

Placeholders animados durante la carga. Modificadores -text, -title, -avatar, -button, -card. Clases en themes/_base/_skeleton.css.

Variantes

.skeleton-title + .skeleton-text
.skeleton-avatar
.skeleton-button
.skeleton-card

Textarea

Multilinea con misma estética del Input. Estados error / success / warning. Variante -fixed sin redimensionar. Clases en themes/_base/_textarea.css.

Estados

.textarea
.textarea-error
.textarea[disabled]
.textarea-fixed

Select

Select nativo con caret SVG personalizado, más una maqueta de dropdown custom. Clases en themes/_base/_select.css.

Nativo

.select
.select[disabled]

Custom (mock)

  • Opción A
  • Opción B
  • Opción C
.select-custom (open)

Slider

Range input estilizado en WebKit + Firefox. Clases en themes/_base/_slider.css.

Variantes

.slider
.slider[disabled]

Toggle Group

Botones tipo pill agrupados con estado activo. Clases en themes/_base/_toggle-group.css.

Single

.toggle
.toggle.is-active

Group

.toggle-group

Input OTP

Celdas individuales para códigos OTP / 2FA. Tamaños -sm, default y -lg. Clases en themes/_base/_input-otp.css.

Default

-
.otp

Table

Tabla con divisores horizontales, header sutil y hover de fila. Variantes -bordered, -striped, -compact. Clases en themes/_base/_table.css.

Default

ClienteEstadoImporte
Acme Inc.Pagado250,00 €
GlobexPendiente1.500,00 €
InitechVencido820,00 €
.table

Tabs

CSS-only con :has() + radio inputs ocultos. Variante tabs-pills. Clases en themes/_base/_tabs.css.

Underline (default)

Panel General
Panel Notificaciones
Panel Facturación
.tabs

Accordion

Construido con <details>/<summary> nativo, sin JS. Variante -bordered. Clases en themes/_base/_accordion.css.

Default

¿Qué incluye el plan?
Acceso completo a todas las funciones, soporte por email y actualizaciones gratuitas.
¿Puedo cancelar en cualquier momento?
Sí, sin permanencia. Cancela desde tu panel cuando quieras.
.accordion

Pagination

Lista de páginas con prev/next y elipsis. Clases en themes/_base/_pagination.css.

Default

.pagination

Dialog

Modal sobre <dialog> nativo. Tamaños -sm, default, -lg, -xl. En el demo se muestra inline (con atributo open) para visualizar los estilos. Clases en themes/_base/_dialog.css.

Estructura

¿Estás seguro?

Esta acción no se puede deshacer.

Se eliminarán permanentemente todos los datos asociados a tu cuenta.
.dialog

Drawer

Panel lateral. Lados: -left, -right, -top, -bottom. En el demo se muestra inline con override de posición. Clases en themes/_base/_drawer.css.

Estructura

.drawer.drawer-right.is-open

Tooltip

CSS-only con :hover / :focus-within. Posiciones -top (default), -bottom, -left, -right. Pasa el cursor sobre el botón. Clases en themes/_base/_tooltip.css.

Posiciones

Tooltip arriba
.tooltip-top
Tooltip debajo
.tooltip-bottom
Tooltip derecha
.tooltip-right

Toast

Notificación efímera. En producción vive dentro de .toaster (fixed). En el demo se muestra inline. Clases en themes/_base/_toast.css.

Variantes

Guardado

Tus cambios están publicados.

.toast
Compra confirmada

Recibirás el pedido en 24 h.

.toast.toast-success
Error

No se pudo conectar.

.toast.toast-destructive