UI Kit

El sistema de diseño de la demo: colores, tipografía y componentes. Cada pieza indica la variable del gestor donde vive.

Colores

Blanco como base y rojo solo para acciones y acentos. Cada color corresponde a una variable del gestor.

  • Rojo Eventis$primary-color · #D1132A
  • Tinta$body-font-color · #16151A
  • Texto secundario--tenant-fg-2 · #66636B
  • Fondo$body-background-color · #FFFFFF
  • Superficie$caixes-color · #F8F6F6
  • Filete--tenant-rule · #E4E1E3
  • Correcto / gratuito--tenant-ok · #1E7A4C
  • Aviso / suspendido--tenant-warn · #B7791F

Tipografía

Druk en mayúsculas para los titulares grandes ($secondary-font-family) y Neue Haas Grotesk Text para el resto ($body-font-family).

Título de página · Druk
60 → 136 px

La casa de Bernarda Alba

h2 · Druk
40 → 60 px

Próximas sesiones

h3 · Haas 700
20 → 24 px

Teatre del Centre

h4 · Haas 600
16 → 17 px

Información práctica

Antetítulo · 12 px
+0,12 em

Teatro · Estreno

Entradilla
19 px / 1,5

Lorca escribe el retrato de una casa cerrada por luto y de cinco hermanas que quieren salir de ella.

Text
17 px / 1,65

Tras la muerte de su segundo marido, Bernarda impone ocho años de luto a sus hijas.

Metadato
14 px

Duración: 95 min · Recomendada a partir de 14 años

Botones y estados

Clases de Foundation (.button, .hollow, .small). Las etiquetas reproducen los estados reales de las funciones.

Comprar entradas Ver programación Añadir al calendario Agotado Comprar

A la venta Próximamente Agotadas Suspendido Cancelado Gratuito

Enlace de acción

Cards

Sin caja ni sombra: imagen, fecha, título y datos. Estas son tarjetas reales del shortcode [EVENT].

La casa de Bernarda Alba
Cía. La Fosca
Del JU 5 nov. al MI 2 dic.
Centro Cultural
adulto
Entrada reducida
Estreno
Desde 10 €
Conferencias Teatro
Terra baixa
Cía. Arran
Del DO 8 nov. al LU 30 nov.
Sala Polivalente
familiar
Agotándose
Desde 5 €
Teatro
Jóvenes creadores
Encuentro y presentaciones
Del DO 22 nov. al DO 29 nov.
adulto
20–30 €
Conferencias

Shortcodes

Los bloques dinámicos de las páginas se hacen con shortcodes del core, sin código a medida.

ShortcodeUso
[EVENT]Listados de actividades con formato, categoría, edición o fecha.
[CALENDAR]Calendario mensual de sesiones.
[ESPAI]Espacios por grupo o identificador.
[NOTICIES]Noticias por etiquetas y formato.
[GALERIA]Galerías con lightbox.
[DOCUMENTS]Carpetas de documentos.
[FORM]Formularios del Form Builder.
[PATROCINADOR]Logotipos de patrocinadores.