Catálogo

Componentes

Cada pieza con sus estados y su movimiento. Toca los segmentos, las pestañas, el menú lateral, los chips y el interruptor; abre el diálogo. Debajo de cada una va la clase que la app usaría.

Botones

Uno principal por pantalla. Todos miden 36 px (30 el chico) y tienen esquinas de 8.

Ver informe →

.c-boton · --principal · --fantasma · --peligro · --chico · --icono · .c-enlace

Campos

Mismo alto que los botones. Al enfocar, borde de acento y un halo suave. El selector reemplaza al <select> nativo, como ya hace el marco.

DepartamentoPuedes escribir varios separados por comas.

Precio máximoRevisa el número: tiene un cero de más.

Ordenar por

Buscar

/

Nota

Solo inmuebles Con fotos Avisarme por Telegram

.c-grupo · .c-etiqueta · .c-campo · .c-buscador · .c-selector · .c-casilla · .c-interruptor · .c-ayuda--mal

Chips, insignias y etiquetas

Los chips filtran y se pueden tocar. Las insignias muestran un estado con punto y texto. Las etiquetas son datos fijos en mayúsculas.

Vigilar En vivo Probar Requiere evaluación Descartar hoy

GitHubRepositorioSUNAT

.c-chip[aria-pressed] · .c-insignia --acento/--bien/--aviso/--mal · .c-etiqueta-dato

Cifras y tarjetas

Las cifras usan números de ancho fijo para que no bailen al cambiar. La tarjeta interactiva se eleva al pasar el cursor y marca la elegida con borde de acento.

Remates activos: 610
Descuento medio: 38 %
Esta semana: 47
Favoritos: 12

Tarjeta elegida

Abierta

Borde y anillo de acento: así se ve el remate cuya ficha está abierta.

Tarjeta interactiva

Tócala para elegirla. Sube 1 px y gana sombra al pasar el cursor.

Progreso

62 %

Navegación

Pestañas para cambiar de vista, segmentos para filtrar dentro de una vista y navegación lateral para apps con secciones.

Panel de Resumen. Usa ← y → para cambiar.

.c-pestanas · .c-pestana[role=tab] · .c-segmentos · .c-segmento[aria-pressed]

.c-nav · .c-nav-item[aria-current=page] · .c-cuenta

Avisos, vacío y carga

Datos al díaLa última recolección terminó hace 12 min.

GuardadoEl tema quedó en cola para investigar.

Sesión por vencerVuelve a entrar para no perder cambios.

No se pudo cargarEl servicio no respondió. Reintenta en un momento.

Veredicto guardado

Sin coincidencias

Nada coincide con «galpón en Tacna». Prueba con menos filtros.

.c-aviso --bien/--aviso/--mal · .c-toast · .c-vacio · .c-esqueleto · .c-giro

Movimiento con Motion y AutoAnimate

Componentes tomados de colecciones de GitHub y llevados a HTML y CSS propios: lista que se reordena (AutoAnimate), acordeón con altura animada (Animata), cinta que corre sola (Magic UI) y avisos apilados (patrón de Sonner). El título de cada página aparece palabra por palabra (Motion Primitives).

Lista que se reordena

1Revisar la partida registral
2Pedir el expediente al juzgado
3Visitar el inmueble
4Calcular impuestos y notaría

[data-c-auto] · AutoAnimate 0.10

Acordeón

¿Qué es el precio base?

El monto desde el que empieza la subasta. En el primer intento suele ser dos tercios de la tasación.

¿Qué pasa si nadie compra?

Se convoca otro intento con el precio rebajado un 15 %. Después del tercero, se puede adjudicar al acreedor.

¿El remate levanta las cargas?

Por lo general sí, pero hay que confirmarlo en el expediente y en Registros Públicos antes de ofertar.

details.c-acordeon · .c-acordeon-cuerpo

Lima 214Arequipa 61La Libertad 48Piura 39Cusco 27Junín 22Lambayeque 20Ica 18

Tócalo varias veces: se apilan; pasa el mouse encima para desplegarlos.

.c-cinta · .c-cinta-pista (pausa con el mouse) · Celestia.aviso()

Tabla

En el celular se desliza de lado dentro de su caja, sin mover la página.

Lugar	Tipo	Fecha	Base	Descuento	Estado
Miraflores, Lima	Departamento	4 nov	S/ 312,000	33 %	1.er intento
Cayma, Arequipa	Casa	6 nov	S/ 189,550	43 %	2.º intento
Víctor Larco, Trujillo	Terreno	9 nov	S/ 96,300	51 %	Favorito

Diálogo

<dialog> nativo: Escape cierra, el foco vuelve al botón que lo abrió y el fondo no se mueve.

.c-dialogo · -cab · -cuerpo · -pie

Muestrario estático con datos inventados.