UI Kit

El sistema de disseny de la demo: colors, tipografia i components. Cada peça indica la variable del gestor on viu.

Colors

Blanc com a base i vermell només per a accions i accents. Cada color correspon a una variable del gestor.

  • Vermell Eventis$primary-color · #D1132A
  • Tinta$body-font-color · #16151A
  • Text secundari--tenant-fg-2 · #66636B
  • Fons$body-background-color · #FFFFFF
  • Superfície$caixes-color · #F8F6F6
  • Filet--tenant-rule · #E4E1E3
  • Correcte / gratuït--tenant-ok · #1E7A4C
  • Avís / suspès--tenant-warn · #B7791F

Tipografia

Druk en majúscules per als titulars grans ($secondary-font-family) i Neue Haas Grotesk Text per a la resta ($body-font-family).

Títol de pàgina · Druk
60 → 136 px

La casa de Bernarda Alba

h2 · Druk
40 → 60 px

Properes sessions

h3 · Haas 700
20 → 24 px

Teatre del Centre

h4 · Haas 600
16 → 17 px

Informació pràctica

Avantítol · 12 px
+0,12 em

Teatre · Estrena

Entradeta
19 px / 1,5

Lorca escriu el retrat d'una casa tancada per dol i de cinc germanes que volen sortir-ne.

Text
17 px / 1,65

Després de la mort del seu segon marit, Bernarda imposa vuit anys de dol a les seves filles.

Metadada
14 px

Durada: 95 min · Recomanada a partir de 14 anys

Botons i estats

Classes de Foundation (.button, .hollow, .small). Les etiquetes reprodueixen els estats reals de les funcions.

Comprar entrades Veure programació Afegir al calendari Exhaurit Comprar

A la venda Properament Exhaurides Suspès Cancel·lat Gratuït

Enllaç d'acció

Cards

Sense caixa ni ombra: imatge, data, títol i dades. Aquestes són targetes reals del shortcode [EVENT].

La casa de Bernarda Alba
Cia. La Fosca
Del dj. 5 nov. al dc. 2 des.
Centre Cultural
Adult
Entrada reduïda
Estrena
Des de 10 €
Conferències Teatre
Terra baixa
Cia. Arran
Del dg. 8 nov. al dl. 30 nov.
Sala Polivalent
Familiar
Exhaurint-se
Des de 5 €
Teatre
Joves creadors
Trobada i presentacions
Del dg. 22 nov. al dg. 29 nov.
Adult
20–30 €
Conferències

Shortcodes

Els blocs dinàmics de les pàgines es fan amb shortcodes del core, sense codi a mida.

ShortcodeÚs
[EVENT]Llistats d'activitats amb format, categoria, edició o data.
[CALENDAR]Calendari mensual de sessions.
[ESPAI]Espais per grup o identificador.
[NOTICIES]Notícies per etiquetes i format.
[GALERIA]Galeries amb lightbox.
[DOCUMENTS]Carpetes de documents.
[FORM]Formularis del Form Builder.
[PATROCINADOR]Logotips de patrocinadors.