edas

Tarjetas (Cards)

Clases: .card, .card-header, .card-body, .card-footer, .elevated, .compact, .borderless, .primary, .success, .danger, .warning, .info, .brand-primary, .brand-secondary.

Variantes básicas

Tarjeta básica
Contenido de la tarjeta. Estilo liquid-glass con fondo semitransparente y blur.
Footer opcional
Elevada
.elevated — más relieve y sombra.
Compacta
.compact — menos padding.
.borderless — sin borde visible.

Variantes de color

Background translúcido con tint suave del color y borde de color.

Primary
.primary — tint azul suave con borde azul.
Success
.success — tint verde suave con borde verde.
Danger
.danger — tint rojo suave con borde rojo.
Warning
.warning — tint amarillo suave con borde amarillo.
Info
.info — tint cyan suave con borde cyan.
Brand principal
.brand-primary — tint con color principal del site.
Brand secundario
.brand-secondary — tint con color secundario del site.

Botones (Buttons)

Clase base: .btn. Modificadores: .primary, .success, .danger, .warning, .info, .ghost, .link, .brand-primary, .brand-secondary, .sm, .lg, .block. Redondos: .round con tamaños .sm, .lg, .lg-xl (entre lg y xl), .xl (super grande, 3× lg).

Las variantes de color usan background translúcido con tint suave del color y borde de color (no fondo sólido).

Variantes de color

Colores del site (Portfolio Settings)

Otras variantes

Tamaños

Block (ancho completo)

Botón redondo solo icono

Clase .btn.round. Solo icono (lucide). Opcional: envolver en .btn-icon-label y añadir .btn-icon-label-text debajo para mostrar texto bajo el botón.

Sin etiqueta (solo icono)

Con etiqueta debajo

Inicio
Aceptar
Eliminar
Ajustes
Favorito

Tamaños (.sm / .lg / .lg-xl / .xl)

Entre lg y xl con etiqueta (.lg-xl)

Variante .btn.round.lg-xl dentro de .btn-icon-label.lg-xl.

Inicio
Aceptar
Favorito

Super grande con etiqueta (.xl — 3× lg)

Variante .btn.round.xl dentro de .btn-icon-label.xl para botón circular muy grande con etiqueta debajo.

Inicio
Aceptar
Favorito

Etiquetas (Badges)

Clase base: .badge. Modificadores: .primary, .success, .danger, .warning, .info, .muted, .brand-primary, .brand-secondary, .sm, .lg, .square.

Default Primary Success Danger Warning Info Muted

Colores del site (Portfolio Settings)

Brand principal Brand secundario
sm lg square

Helpers (espaciado, texto, utilidades)

Padding: .p-4 … .p-24, .pt-*, .pb-*, .pl-*, .pr-*. Margin: .m-4 … .m-24, .mt-*, .mb-*, .mv-*. Anchos: .w-100, .w-50… Texto: .text-center, .text-muted, .bold, .text-uppercase. Otros: .cursor-pointer, .decoration-none, .box-shadow, .border-radius.

Ejemplo: text-muted y uppercase.

.p-16 en card .row .gap-8 .wrap

Grid y layout

Clases: .container, .row, .column, .grid, .grid-columns, .row.mobile, .gap-8, .v-gap-8, .center, .space-between, .wrap.

.row .gap-16 .wrap — ítem 1
ítem 2
ítem 3

Grid automático

.grid
.grid
.grid

Tipografía (text.less)

Clases: .title, .sub-title, .capitalize, .uppercase, .font-size-12 … .font-size-40.

.title

.sub-title

.font-size-12

.font-size-20

Transición entre fondos (section tint)

Clases para integrar secciones con un tinte sutil del color principal/secundario (Portfolio Settings). Sin líneas; el fondo del tema predomina y se añade una capa de color muy suave.

Clases: .section-tint (centro), .section-tint-top (transparencia arriba → tinte abajo, p. ej. footer), .section-tint-bottom (tinte arriba → transparencia abajo), y variantes .section-tint-secondary, .section-tint-top-secondary, .section-tint-bottom-secondary.

.section-tint-bottom

Tinte en la parte superior que se desvanece hacia abajo (p. ej. primera sección bajo el header).

Contenido de ejemplo. El tinte del color principal aparece arriba y se desvanece.

.section-tint

Sección entre contenidos: transparente → tinte en el centro → transparente.

Contenido de ejemplo. El tinte es más visible en el centro de la sección.

.section-tint-top

Transparencia de arriba abajo; el tinte aparece hacia la parte inferior (p. ej. footer).

Contenido de ejemplo. Arriba transparente, el tinte crece hacia abajo.

Variante secundaria

Mismo patrón con el color secundario: .section-tint-secondary, .section-tint-top-secondary, .section-tint-bottom-secondary.

.section-tint-secondary — tinte en el centro con color secundario.

Scroll y efectos

.pretty-scroll, .elevation, .backdrop-layer, .brightness-layer, .fixed-header, .blur-fixed-header.

.elevation en una tarjeta.

Iconos