Mediahuis - Styleguide

Dit is de styleguide voor het project Mediahuis. Hierin zijn een aantal huisstijl onderdelen gedefinieerd.

Gebruik de volgende gedeelde stylesheet binnen je eigen project: <link rel="stylesheet" href="https://vsheo.github.io/look-and-feel-styleguide/mediahuis.css">

Kleuren van Radio veronica

Bij het onderdeel kleuren staat het kleurgebruik.

Veronica

#0091FF
Brand-kleur Veronica primary veronica
#E60063
Accent-kleur Veronica secondary veronica
#011564
Footer-kleur Veronica footer veronica
#fafafa
Achtergrond-kleur Algemeen Veronica background-neutral veronica
#ffffff
Showblokken & Sidebar Achtergrond-kleur Veronica neutral veronica
#000000
Tekst-kleur zwart Veronica text-primary veronica
#8B8B8B
Tekst-kleur grijs Veronica text-secondary veronica
#ffffff
Tekst-kleur wit text-on-brand text-on-brand-veronica

SLAM

#000000
Brand-kleur SLAM primary slam
#E60063
Accent-kleur SLAM secondary slam
#222222
Achtergrond-kleur Algemeen SLAM neutral slam
#000000
Showblokken & Sidebar Achtergrond-kleur SLAM background-neutral slam
#FFFFFF
Tekst-kleur SLAM text-primary slam
#5D5D5D
Tekst-kleur SLAM text-secondary slam

Sublime

#1A1E1D
Brand-kleur Sublime primary sublime
#CCFFA3
Accent-kleur Sublime secondary sublime
#1A1E1D
Achtergrond-kleur Algemeen Sublime neutral sublime
#252929
Showblokken & Sidebar Achtergrond-kleur Sublime background-neutral sublime
#FFFFFF
Tekst-kleur Sublime text-primary sublime
#8D8F8E
Tekst-kleur Sublime text-secondary sublime

100%NL

#000000
Brand-kleur 100%NL primary honderdp
#10A637
Accent-kleur 100%NL secondary honderdp
#FFFFFF
Achtergrond-kleur Algemeen 100%NL neutral honderdp
#FAFAFA
Showblokken & Sidebar Achtergrond-kleur 100%NL background-neutral honderdp
#1E1E1E
Tekst-kleur 100%NL text-primary honderdp
#8B8B8B
Tekst-kleur 100%NL text-secondary honderdp

Typografie

Bij het onderdeel typografie worden fonts en groottes gedemonstreerd.

Kop 1

Kop 2

Kop 3

Kop 4

Kop 5
font-nav-primary
gebruikt voor de nav

font-nav-secondary
gebruikt voor een nav die minder belangrijk is

font-card-title
gebruikt voor de title van een programma kaart

font-card-description
gebruikt voor de uitleg over de programma

font-card-info
gebruikt voor de tijd en dj in de programma kaart

font-info
gebruikt voor highlights

font-title
gebruikt voor titles van de highlights

Simpele alinea's
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Informatie over tijd & DJ's
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Titels van artikelen
Lorem ipsum dolor sit amet

geordende lijst voor de tijdlijn
  1. 0:00
  2. 1:00
  3. 2:00

Formulier elementen

Hier maken wij in onze website geen gebruik van

Bij het onderdeel formulier elementen worden input, radio, checkbox en buttons gedemonstreerd.

Radio options:
Checkbox



button highlights
veronica

slam!

sublime

honderdp