Tarjeta enlazada
Toda la superficie responde al clic y al foco del teclado.
El proyecto
Sistema de diseño
Guía viva de los tokens y componentes de @municipio/ui. Todo lo que se publica en este sitio, incluidos los proyectos ciudadanos, se construye con estas piezas. Los colores se adaptan solos al modo claro u oscuro del sistema.
Color
Los componentes usan solo tokens semánticos. Las escalas de base (verde de la bandera andaluza y albero, sobre blanco cal) quedan por debajo, así otro municipio puede cambiar la paleta entera tocando unas pocas variables. El selector de la cabecera fuerza tema claro u oscuro; por defecto se sigue el del sistema.
surfaceFondo de la páginasurface-raisedTarjetas y panelessurface-sunkenFranjas y fondos hundidosinkTexto principalink-mutedTexto secundarioink-faintTexto terciario y notaslineBordes y separadoresbrandColor de marca (verde de Andalucía)brand-strongMarca reforzada, hoversbrand-softFondos suaves de marcaaccentAcento (albero)accent-strongAcento sobre fondos clarosaccent-softFondos suaves de acento
Tipografía
Instrument Sans para todo: los titulares usan peso alto y tracking apretado, el texto corrido queda en peso normal. Los tamaños grandes son fluidos: crecen con la pantalla sin saltos.
Titular grande, con énfasis
Título de sección
Subtítulo o título de tarjeta
Párrafo de entrada, un punto más grande que el texto normal para abrir secciones.
Texto de lectura normal. Las cifras usan numerales tabulares para que las columnas de datos queden alineadas: 1.234.567.
Etiquetas y avisos
Las etiquetas marcan estados y categorías. Los avisos comunican contexto sin interrumpir.
NeutralEn caminoPiloto
Dato provisional
El INE publica esta serie con unos meses de retraso. La cifra se actualizará sola cuando salga la definitiva.
Funcionalidad con clave
Esta sección necesita una clave gratuita de AEMET. Sin ella, la página se muestra igualmente con un aviso como este.
Tarjetas y cifras
La tarjeta es la pieza básica de composición. Cuando toda la tarjeta es un enlace, el título lleva el enlace real y el resto se hace clicable sin duplicar destinos para lectores de pantalla.
Tarjeta estática
Para contenido que no lleva a ningún sitio.
Panel: la misma superficie sin opiniones de relleno, para tablas, buscadores y figuras. Los enlaces dentro del texto usan TextLink, subrayado discreto que se vuelve verde al pasar.
- Habitantes
- 87.493
- Padrón 2024
- Superficie
- 203 km²
- Playas
- 6
- Densidad
- 431 /km²
Fuentes: INE (CC BY 4.0) y SIMA, Junta de Andalucía.
Chips seleccionables
El selector pequeño del portal: distritos, trimestres, capas del mapa. Verde cuando está activo. Para alternar capas lleva aria-pressed; para seleccionar uno entre varios, no.
Buscadores
Un único input de búsqueda en todo el portal (SearchInput), siempre con etiqueta accesible. Los resultados van en una lista bajo el campo, nunca en desplegables nativos.
Gráficas
Serie temporal en SVG con los tokens del tema. Interactiva con puntero, tacto y flechas del teclado, y con su tabla equivalente oculta para lectores de pantalla. En pantallas estrechas se desliza dentro de su marco; la página nunca scrollea. El título visible entra por la prop caption.
Ejemplo: población 2019-2025
| Año | Habitantes |
|---|---|
| 2019 | 84.568 |
| 2020 | 85.204 |
| 2021 | 86.086 |
| 2022 | 87.493 |
| 2023 | 88.537 |
| 2024 | 89.794 |
| 2025 | 90.864 |
Barras por categoría
Para repartos (presupuesto por capítulos, visitantes por origen): BarList, renderizada en servidor, con el valor y su porcentaje siempre en texto.
- Gastos de personal28.738.740(44,3 %)
- Bienes corrientes y servicios31.119.025(48 %)
- Inversiones reales5.030.229(7,8 %)
Tablas de datos
Toda tabla del portal sale de DataTable: panel con tabla semántica dentro (caption para lectores de pantalla, scope en las celdas de cabecera), cifras alineadas a la derecha con numerales tabulares, y scroll horizontal contenido en su marco en pantallas estrechas. Las filas de grupo usan emphasis y sus hijas indent.
| Zona | Por persona |
|---|---|
| Distrito 1 | 12.122 € |
| Sección 1 | 12.681 € |
| Sección 2 | 14.284 € |
Mapas de valor por sección
Para pintar un dato sobre las secciones censales (renta, población): SectionChoropleth, renderizado en servidor, con escala del color de marca y leyenda con los extremos. El mapa es decorativo para lectores de pantalla: la misma información va siempre en una tabla al lado, como en las gráficas.
9200 €18.352 €
Avisos
Cuando una fuente no responde, la página lo dice con un aviso en su sitio: nada de huecos silenciosos ni datos fingidos.
Dato provisional
La fuente aún no ha publicado la cifra definitiva.
Datos no disponibles ahora mismo
No hemos podido consultar la fuente. Suele ser algo temporal.