Componentes
La librería @arcasilesgroup/brand-kit: botones, badges, cards, gráficos y más.
El paquete @arcasilesgroup/brand-kit trae 73 componentes React construidos sobre design-tokens.json v5.0.1, del Button al CtaBlock. Todos leen las variables CSS del color de énfasis en curso, así que cambian de color sin una línea extra de JavaScript. Aquí verás 51 funcionando, agrupados por familia; los 22 restantes se documentan en sus propios capítulos.
El kit en cifras
Las cifras son el propio componente Metric en uso real: los datos salen del kit en cada build, no de un mock.
Exportados por @arcasilesgroup/brand-kit v5.0.1
Una prop, siete colores para elegir
design-tokens.json, único origen
El número grande va en BDSupperBold, la display de marca. Se reserva para cifras y portadas; el cuerpo es siempre Lexend.
Acciones
El Button con sus seis variantes, y el Dialog que confirma antes de ejecutar. Una acción principal por superficie; las demás bajan de jerarquía.
Button
Píldora (radius 100px) con etiqueta central; opcional icono leading/trailing y spinner de carga.
La llamada a la acción: dispara la intención primaria de una vista.
-
primary— LA acción de la pieza — una por superficie. -
soft— secundaria que quieres resaltar sin robar foco. -
outline— acción de bajo peso sobre fondo claro u oscuro (onDark). -
secondary— la compañera de una primary: borde neutro de 1pt; con onDark, borde y texto en blanco. -
ghost— terciaria y acciones en línea: sólo texto, sin borde. -
dark— sobre foto o relleno de color: #272727 sólido con texto blanco.
- default
- hover
- focus
- active
- disabled
- loading
- sm · 9pt
- md · 10.5pt (default)
- lg · 12pt
Usa exactamente una primary por superficie y etiqueta con un verbo.
No pongas dos primary juntas ni uses el botón como badge de estado.
role=button, min-height ≥44px, foco con anillo azul 2pt, Enter/Espacio activan; Label-in-Name (WCAG 2.5.3).
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | primary | soft | outline | secondary | ghost | dark | primary | Peso visual y jerarquía de la acción. |
accent | Accent | amber | Color de marca del relleno y el borde; solo destaca, no informa de un estado. |
size | sm | md | lg | md | Tamaño del control (el hit-target se mantiene ≥44px). |
onDark | boolean | Ajusta outline/secondary para superficies oscuras. | |
disabled | boolean | Gris neutro; ignora hover y click. Nunca es el color de marca desaturado. |
-
--arc-accent -
--arc-accent-text -
--arc-radius-badge -
--arc-duration
Dialog
Los botones del diálogo responden: pruébalos.
Panel de confirmación renderizado ESTÁTICAMENTE abierto para componer inline.
- open (estático)
Úsalo para componer confirmaciones en documentos o previews; pon las acciones en actions.
No esperes portal ni estado de apertura: no gestiona overlay ni foco atrapado. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
role=dialog con aria-label desde el título; las acciones son Button reales con teclado.
Feedback y estado
Avisos e insignias: cómo se etiqueta y cómo se responde. Aquí el color significa algo y lo fija el tono semántico; el color de énfasis se queda fuera.
Badge
Pastilla plana (radius 100px) con texto en mayúsculas Lexend 9pt; sin sombra ni foco.
Etiqueta breve en pastilla plana: categoría o marca, no estado.
- default
- live (role=status)
Úsalo para categorizar; pásale live solo si anuncia un cambio dinámico (un contador).
No lo hagas enfocable ni objetivo táctil: es texto, no un control. Para algo pulsable está el Button.
Sin rol por defecto (span). Con live → role=status + aria-live=polite. No focusable.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children
●
| ReactNode | El texto de la etiqueta. | |
accent | Accent | amber | Color del relleno y del texto; solo destaca. |
live | boolean | Convierte en role=status + aria-live=polite para cambios dinámicos. |
Campo obligatorio
-
--arc-accent -
--arc-accent-text -
--arc-radius-badge
Callout
Caja 8pt con borde 1pt; punto/icono a la izquierda, título 11pt/600 opcional y cuerpo 10.5pt.
Aviso destacado dentro del flujo: contexto, éxito, atención o error.
-
tone=info/success/warn/error— mensajería SEMÁNTICA de sistema. -
accent— énfasis de marca: el fondo se tiñe del color que recibe y no significa un estado.
Elige tone cuando comunica estado; accent cuando solo enfatiza.
No mezcles tono semántico y color de marca en el MISMO mensaje. Si el aviso informa de algo, usa tone; si solo destaca, usa el color. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Título + cuerpo legibles; el icono es decorativo (aria-hidden). Contraste AA garantizado por tono.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children
●
| ReactNode | Cuerpo del aviso. | |
tone | info | success | warn | error | Estado semántico: fondo en el paso 100 de la escala, borde en el 500 e icono en el 700. | |
accent | Accent | amber | Color de marca cuando NO hay tone (fondo, borde y punto). |
title | ReactNode | Título opcional sobre el cuerpo. |
Campo obligatorio
-
--arc-accent -
--arc-callout-bg -
--arc-radius-card
Formularios
Entrada de datos con estados de verdad: foco, ayuda, error y deshabilitado. El color de énfasis pinta el foco; el error va siempre en el rojo danger.
Input · Select · Checkbox
Input
Select
Checkbox
Input
Etiqueta arriba + caja 6pt con borde 1pt; debajo, texto de ayuda o mensaje de error.
Campo de texto de marca con etiqueta, ayuda y estado de error accesible.
- default
- focus (borde acento)
- helper
- error
- disabled
Empareja siempre label; usa error para validación (pinta rojo danger + mensaje).
No señales el error con el color de marca: el error es SIEMPRE el rojo danger, con su mensaje al lado.
label ligado por id (useId), error con aria-invalid + aria-describedby, foco anillo azul 2pt.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label | ReactNode | Etiqueta ligada al campo por id. | |
error | ReactNode | Mensaje de validación (rojo danger + aria-invalid). | |
helper | ReactNode | Texto de ayuda bajo el campo. | |
accent | Accent | amber | Tiñe el borde de foco. |
disabled | boolean | Bloquea la entrada y baja el contraste. |
-
--arc-accent -
--arc-gray -
--arc-radius-metric
Select
Desplegable nativo estilizado con etiqueta, ayuda, error y deshabilitado.
- default
- focus (borde acento)
- helper
- error
- disabled
Da opciones con value/label; para preview estático usa defaultValue.
No lo uses para 2 opciones (usa Checkbox/segmented) ni para acciones.
select nativo → teclado y lector de serie; label ligado; error con aria-invalid.
Checkbox
Casilla de una decisión binaria (aceptar, activar) con etiqueta clicable.
- unchecked
- checked
- focus (acento)
- disabled
Usa la etiqueta como área clicable; controla con checked+onChange.
No lo uses para acciones inmediatas ni para elegir 1 de N (eso es radio/Select).
input checkbox nativo, label ligado, foco visible; disabled baja opacidad y bloquea.
Datos
Cifras y series renderizadas en servidor, sin JavaScript: la métrica display, tres gráficos SVG y la tabla de marca. Los colores salen de la chartPalette que corresponde.
Metric
Card 6pt con borde: valor grande en BDSupperBold, etiqueta debajo y caption gris opcional.
Cifra display de marca (BDSupperBold) con su etiqueta: KPIs y portadas.
Resérvalo para los números que importan; dale el color de la sección en la que va.
No lo uses para texto de corrido ni para números dentro de una frase. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
El valor y la etiqueta son texto real (no imagen); contraste AA con accent="ink" sobre claro.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
value
●
| ReactNode | La cifra display. | |
label
●
| ReactNode | Qué mide el número. | |
caption | ReactNode | Nota gris opcional bajo la etiqueta. | |
accent | Accent | ink | Color text-safe del valor. |
animate | boolean | Countup 0→valor al montar (solo números; reduced-motion lo salta). |
Campo obligatorio
-
--arc-accent -
--arc-font-display -
--arc-radius-metric
DonutChart
Reparto de un total en pocas partes, en SVG de servidor.
Úsalo con 3–6 segmentos y su etiqueta; los colores salen de la chartPalette.
No pases de seis partes, y no lo uses para series en el tiempo — para eso está LineChart.
SVG con títulos accesibles; el color no es el único portador (etiqueta + valor).
BarChart
Comparar magnitudes discretas entre categorías, en SVG de servidor.
Etiqueta cada barra; ordena por criterio (magnitud o cronología).
No lo uses para partes de un todo (eso es DonutChart).
SVG server-first, sin JS; ejes y etiquetas legibles con contraste AA.
LineChart
Tendencia de una o varias series en el tiempo, en SVG de servidor.
Nombra cada serie y pásalas por props en el orden de la chartPalette.
No re-ordenes los colores a mano ni mezcles unidades en un mismo eje.
SVG accesible; cada serie con nombre — no se distingue solo por color.
BrandTable
Tabla de datos con la tipografía y el ritmo de marca.
Da headers y rows; en pantallas estrechas, déjala desbordar su contenedor.
No la uses para maquetar layout: es datos tabulares, no una rejilla.
table/th/td semánticos; el desbordamiento horizontal se recorre también con teclado.
Contenido
Las piezas con las que se compone una página o un documento: tarjetas, prosa, fotografía, cintas de partners y los cierres de marca. Todo HTML de servidor.
BenefitCard
--arc-* y reciben el color por prop, sin volver a renderizar. design-tokens.json v5.0.1: un único origen para color, radio y motion. Tarjeta numerada que enumera una ventaja o paso.
Úsala en tríos o rejillas para 3–4 beneficios; número + título + cuerpo.
No metas párrafos largos: es un resumen, no un artículo. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Encabezado real por tarjeta; el número es decorativo, el título lleva el peso.
CompareColumns
Lo que aporta Arcasiles
- Marca y comunicación del evento
- Comunidad y convocatoria
- Producción del contenido
Lo que aporta el partner
- Espacio y logística
- Difusión en sus canales
- Recursos técnicos
Dos columnas enfrentadas: lo que aporta A vs. lo que aporta B.
Úsala para acuerdos o comparativas de alcance con ítems paralelos.
No metas más de 2–3 columnas ni listas asimétricas largas. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Cada columna con su título; listas semánticas.
Diagram
Marco de figura con pie; dentro, dos lados enfrentados (Compare) o un bloque con secciones y frases marcadas (Block).
Dibujar una idea con HTML y tokens de marca, sin captura de pantalla ni PNG suelto.
-
DiagramCompare— dos versiones se enfrentan y el color dice cuál es cuál. -
DiagramBlock— un texto largo y las frases que hay que mirar dentro.
Deja la conclusión en el pie de figura: el dibujo enseña la forma, no la argumenta.
No lo uses como adorno ni en lugar de una tabla: las barras dicen «aquí hay texto», nunca cifras.
Los rótulos son texto real; las barras de relleno van aria-hidden. El veredicto no va sólo en el color: cada lado lo dice también con palabras.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
before / after
●
| DiagramSide | Los dos lados de DiagramCompare: título, cifra, cita, etiquetas y veredicto. | |
sections
●
| DiagramBlockSection[] | Secciones de DiagramBlock, cada una con sus líneas y su frase marcada. | |
tone | "problem" | "good" | "neutral" | "accent" | "neutral" | Qué dice el color de un lado antes de leerlo. |
caption | ReactNode | Pie de figura. Sin él el diagrama sale sin marco. | |
accent | Accent | Color de énfasis del subárbol. |
Campo obligatorio
-
--arc-accent -
--arc-accent-text -
--arc-danger -
--arc-green -
--arc-gray -
--arc-neutral-300
BulletList
- Primer elemento de la lista, con el punto en negro
- Segundo elemento con la misma marca visual
- Tercer elemento — el marcador es neutro, nunca del color de énfasis
Lista con el marcador de marca: un punto negro, nunca de color.
Úsala para enumeraciones cortas; el marcador es neutro por diseño.
No pintes el marcador con el color de énfasis. Si hace falta destacar, va el texto en negrita.
ul/li semántico; el punto es decorativo.
Avatar
Círculo (radius 100px) con iniciales derivadas del nombre o una imagen recortada.
Retrato o iniciales de una persona en tres tamaños.
-
name— deriva iniciales del nombre automáticamente. -
initials— iniciales explícitas cuando no hay nombre.
- sm · 20pt
- md · 28pt (default)
- lg · 36pt
Pasa name para iniciales automáticas; elige tamaño por contexto.
No lo uses como icono decorativo genérico: representa a una persona.
Texto de iniciales legible; si es imagen, alt descriptivo.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
name | string | Nombre del que se derivan las iniciales. | |
initials | string | Iniciales explícitas cuando no hay nombre. | |
src | string | Imagen de retrato (recortada al círculo). | |
size | sm | md | lg | md | Diámetro del avatar. |
-
--arc-accent -
--arc-radius-badge
AccentLine
Línea de 3pt bajo un titular, en el color de énfasis: la puntuación de la marca.
- ancho por prop
width
Úsala bajo un h2/h3 para marcar sección; hereda --arc-accent-line.
No la repitas por todo el bloque: una por sección, y el resto se separa con espacio.
Decorativa (no aporta significado); no requiere texto alternativo.
RichText
La identidad del grupo se sostiene sobre dos gestos de color. El amarillo de marca, #f9be4a, enciende los realces decorativos —nunca el texto corrido— y marca el ritmo de cada página como una pieza de marca, no como un manual.
Eventos responde con su lila, #674a98, que repinta insignias, líneas y gráficos sin tocar una sola línea de HTML. La pastilla trae el color exacto al lado del hex, y el texto de alrededor se mantiene tan legible como en un libro.
Contenedor de prosa larga con medida, interlineado y realce de libro.
Úsala para artículos/descripciones; el realce es por peso, no por color.
No pintes el texto de amarillo ni superes la medida de lectura.
Medida 45–75ch, interlineado 1.7; jerarquía por encabezados reales.
HexToken
Color #f9be4a amber y #674a98 lila.
Pastilla inline con un hex y su color, para citar tokens en la prosa.
Insértalo dentro del párrafo; el código se escribe claro u oscuro según su luminancia WCAG.
No lo uses como swatch grande (usa BrandPalette) ni fuera de texto.
El hex se lee como texto; la pastilla es decorativa.
CodeBlock
Bloque de código con resaltado, título y botón copiar.
-
lineNumbers— cuando el número de línea importa (refs). -
maxHeight— para acotar un bloque muy largo a una altura fija.
Pásale lang para el resaltado y locale para el idioma del botón.
No pegues secretos ni rutas de máquina; es contenido público.
Botón copiar con aria-label; el <pre> conserva el texto para lectores.
ServiceCard
Eventos
Producción integral de eventos corporativos y de comunidad.
- Gestión de eventos
- Organización de congresos
- Team building
Marketing
Comunicación de marca, de la estrategia a la ejecución.
- Publicidad
- Marketing
- Comunicación
Tech
Tecnología a medida para el evento y para el negocio.
- Soluciones a medida
- IT & Cloud
- Datos
Plan de ejemplo
La variante con pricing: precio display en el tono text-safe, periodo en gris y CTA de píldora. La prop featured añade el borde negro y la píldora «Recomendado».
Tarjeta de servicio o plan, con variante de pricing destacable.
-
base— describe un servicio con features. -
pricing + featured— plan con precio y CTA destacado.
Marca UN plan como featured; el precio va en el tono text-safe del color.
No destaques varios planes a la vez ni inventes tarifas. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Encabezado real; CTA es Button/enlace con objetivo ≥44px.
CoverHero
Portada de documento: título, subtítulo, destinatario y banda.
-
default— cubierta clara, con la banda en color. -
accent + invertBand— cubierta oscura invertida (Tech).
Úsala como primera página de propuestas/documentos.
No la uses como hero web genérico (para eso está el hero del sitio).
Un h1 por documento; contraste AA garantizado por la banda.
LogoStrip
Fila de logotipos con título: partners o marcas del grupo.
Usa los ficheros originales de cada marca; da alt por logo.
No recrees logos ajenos ni los pintes de un color que no es suyo. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Cada logo con alt; el título encabeza la tira.
LogoMarquee
Cinta animada de logotipos que se desplaza en bucle.
- animada
- pausa (hover/focus)
- estática (reduced-motion)
Úsala para muchos partners; se pausa con cursor o foco de teclado.
No metas texto de lectura en la cinta ni animaciones que no respeten reduced-motion.
aria-label describe la cinta; con prefers-reduced-motion queda fila estática.
SponsorTiers
- Logo en materiales
- Mención en apertura
- Todo lo de Bronce
- Stand en el evento
- Post dedicado
- Todo lo de Plata
- Charla patrocinada
- Logo en escenario
Niveles de patrocinio con precio y perks, uno destacado.
Ordena de menor a mayor; destaca el nivel recomendado con featured.
No inventes precios reales ni destaques todos los niveles. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Cada tier con encabezado; listas de perks semánticas.
TeamGrid
Nombre Apellido
El rol se escribe con el tono text-safe del color de énfasis, nunca con el amarillo crudo: sobre claro el amarillo no se lee.
Nombre Apellido
Nombre en BDSupperBold y bio en Lexend de 14px con interlineado 1.6 — la ficha entera es HTML del servidor.
Nombre Apellido
Con Instagram o LinkedIn presentes, la ficha añade iconos SVG con área táctil por encima del mínimo WCAG.
Rejilla de fichas de equipo (TeamCard): retrato, nombre y rol.
Usa retratos reales, nombre y rol; añade redes con área táctil ≥44px.
No inventes personas ni pongas el personaje de marca en producción: van retratos reales, con nombre y rol. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Nombre en encabezado; iconos de red con aria-label y objetivo táctil.
PhotoGallery
Rejilla densa de fotos con caption y lightbox opcional.
Usa span para destacar una foto; encuadra con position donde el crop corta caras.
No mezcles proporciones dispares ni dejes fotos sin alt.
Cada foto con alt; lightbox operable por teclado y con Escape.
BrandPhoto · PhotoBlock
BrandPhoto
Una de las seis fotos curadas del kit, con encuadre y radio de marca.
Elige photo (charla/publico/qa/ponente/grupo/postevento); sube position si el crop corta caras.
No uses BrandPhoto para fotos propias (usa PhotoBlock).
alt descriptivo obligatorio; radio y encuadre por diseño.
PhotoBlock
Acota una foto PROPIA con el radio de 8pt de marca y caption opcional.
Úsalo para fotos que no vienen del kit; da alt y opcional caption.
No lo uses para las seis curadas del kit (usa BrandPhoto).
alt obligatorio; caption como texto real bajo la imagen.
SocialLinks
Fila de iconos de las redes OFICIALES del grupo (glifos verificados).
- sm 16px
- md 20px
- lg 24px
Usa los canales del kit; los iconos heredan el color del texto de la superficie.
No sustituyas por emoji ni por URLs de canal no verificadas.
Cada enlace con aria-label del canal, objetivo 36px (≥24px WCAG), rel=me.
BrandPalette
#272727
#afafaf
#e9e9e9
#f5f5f5
#faf9f7
#f9be4a
#7fbf80
#2797c4
#674a98
#e887a7
#da7835
#114F82
#7fbf80
#2797c4
#f9be4a
#b3362a
#114F82
Referencia viva de la paleta: nombres y hex exactos del canon.
Úsalo para citar el color de marca; es referencia, no decoración.
No re-declares hex a mano en otro sitio: esta es la fuente citada.
Nombres y hex como texto legible; no depende solo del swatch.
CtaBlock
| info@arcasiles.com | |
| Web | arcasiles.com |
Cierre de documento a sangre: fondo negro, logo y canales de contacto.
Úsalo como pie de propuestas; pon email y web en channels.
No lo uses como banner intermedio: es un cierre.
Contraste AA sobre el fondo negro; los canales son texto real, no una imagen.
NavHeader
PageFooter
Eventos y blog
La agenda y el blog del grupo: una misma fuente de datos en tarjeta, lista, calendario y entrada. El kit nunca consulta una API — recibe todo por props.
EventCards
Meetup de la comunidad
El badge toma su color del registro del kit; la foto queda acotada y el CTA hereda ese mismo color, con el texto de encima ya calculado por contraste.
InscríbeteArcasiles Community · Networking de otoño
Encuentro abierto de la comunidad para cerrar la temporada; la plaza se reserva en Luma.
Tech Talk · IA aplicada a la producción de eventos
Charla técnica con demo en vivo; apúntate en Luma o síguela desde LinkedIn Events.
Meetup mensual de la comunidad
El meetup abierto de cada mes; la convocatoria y las plazas viven en Meetup.
Jornada Arcasiles · Balance de temporada
Repasamos la temporada con el equipo y la comunidad; el resumen y las fotos quedan publicados.
Arcasiles Group · Kickoff de temporada
Arranque de temporada con todo el grupo: agenda y objetivos del trimestre.
Tech Talk · Diseño de sistemas con IA
Charla técnica con demo en vivo; plaza en Luma.
Feria de proyectos de la comunidad
Muestra abierta de los proyectos de la temporada.
Las Noches de Arcasiles · Jazz en vivo
Sesión de jazz de la sub-marca nocturna.
EventCard
Card de 8pt: cartel opcional arriba, badge de color, título, fecha y lugar, y un CTA de píldora.
Tarjeta de un evento: cartel, badge de color, fecha, lugar y CTA.
Da fecha, lugar y cta; acota el cartel con imagePosition.
No inventes eventos ni llames a una API desde aquí: el kit recibe los datos por props. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
CTA con objetivo táctil ≥44px; el badge solo destaca, no informa de un estado.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title / date / place
●
| ReactNode | Datos base del evento. | |
accent | Accent | amber | Color del badge de categoría. |
cta / ctaHref | string | Etiqueta + destino del botón. | |
image / imagePosition | string | Cartel opcional y su encuadre. |
Campo obligatorio
-
--arc-accent -
--arc-radius-card -
--arc-radius-badge
EventCards
Los mismos eventos en rejilla de tarjetas (auto-fit).
Reusa la MISMA fuente de datos que EventList/EventCalendar.
No dupliques la agenda: una sola fuente de datos, tres presentaciones. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
Cada tarjeta con encabezado; chips con icono + etiqueta.
EventList
Próximos7 eventos
- Comunidad
Arcasiles Community · Networking de otoño
Encuentro abierto de la comunidad para cerrar la temporada; la plaza se reserva en Luma.
- Tech
Tech Talk · IA aplicada a la producción de eventos
Charla técnica con demo en vivo; apúntate en Luma o síguela desde LinkedIn Events.
- Group
Arcasiles Group · Kickoff de temporada
Arranque de temporada con todo el grupo: agenda y objetivos del trimestre.
- Tech
Tech Talk · Diseño de sistemas con IA
Charla técnica con demo en vivo; plaza en Luma.
- Meetup
Meetup mensual de la comunidad
El meetup abierto de cada mes; la convocatoria y las plazas viven en Meetup.
- Eventos
Feria de proyectos de la comunidad
Muestra abierta de los proyectos de la temporada.
- Música
Las Noches de Arcasiles · Jazz en vivo
Sesión de jazz de la sub-marca nocturna.
Pasados1 evento
- Jornada
Jornada Arcasiles · Balance de temporada
Repasamos la temporada con el equipo y la comunidad; el resumen y las fotos quedan publicados.
Agenda en lista agrupada por estado (Próximos, Pasados).
Pasa items con estado; el pasado ofrece «ver resumen».
No mezcles el orden: primero los próximos, después los pasados.
Chips ≥24px, CTA 44px; iconos SVG con etiqueta, nunca emoji.
EventCalendar
Noviembre 2026
- Group
- Tech
- Meetup
- Eventos
- Música
| L | M | X | J | V | S | D |
|---|---|---|---|---|---|---|
| 26 | 27 | 28 | 29 | 30 | 31 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13Meetup mensual de la comunidad | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
Jueves 5 de noviembre
Jueves 12 de noviembre
Viernes 13 de noviembre
Viernes 20 de noviembre
Viernes 27 de noviembre
Calendario mensual navegable con los eventos como pastillas por día.
- isla (client)
- colapsa a lista por día en móvil
Fija month/year para el primer render (SSR estable); el «hoy» lo resuelve el navegador.
No uses new Date en render, que rompe el SSR: pasa el mes y el año por props.
Tabla semántica accesible; glifos ‹/› con etiqueta; en móvil lista por día.
PostCard
Tarjeta de entrada de blog: cover opcional, título, excerpt y meta.
-
con imagen— hay cover (alt vacío, decorativo del link). -
solo texto— sin cover: variante de texto.
Enlaza a la entrada real con href; PostMeta compone fecha ISO + autor.
No metas un h1 dentro: el título de la tarjeta es un h3, y el h1 lo pone PostHero en la entrada abierta. Nunca uses una franja de color pegada a un solo borde de la tarjeta, panel o contenedor: ni superior, inferior, izquierdo ni derecho.
La tarjeta entera es un enlace; la fecha es <time> ISO.
51 componentes en vivo en este capítulo, de los 73 que exporta el kit. Todos leen la misma prop de color, y ninguno guarda un hex propio.
Los 22 restantes no faltan: trabajan en otro capítulo. Logo y SectionCard están en Logo, ColorSwatch en Color, Alcachofil en su propio capítulo, CodeBlock en MCP, y DocPage y SlidePage en Plantillas. SectionHeader y Heading componen estas mismas páginas.