Base

Accessibility

Visually hidden

You need a screen reader (or look at the source code) to see anything.

I am only visible for screen reader users

Button

Button

Button - dark

Colors

arteducation

arteducation
arteducation-comp
arteducation-hover
arteducation-text-link

black

black

darkgray

darkgray
darkgray-darkmode

design

design
design-comp
design-hover
design-text-link

elearning

elearning
elearning-comp
elearning-hover
elearning-text-link

film

film
film-comp
film-hover
film-text-link

gray

gray

jahresbericht

jahresbericht-green
jahresbericht-lavender
jahresbericht-orange
jahresbericht-pink
jahresbericht-yellow

jahresbericht21

jahresbericht21-green
jahresbericht21-pink
jahresbericht21-yellow

jahresbericht22

jahresbericht22-darkgreen
jahresbericht22-darkpurple
jahresbericht22-green
jahresbericht22-lightpurple
jahresbericht22-spotgreen

jahresbericht23

jahresbericht23-nightblue
jahresbericht23-pink
jahresbericht23-red
jahresbericht23-skyblue

kunst

kunst
kunst-comp
kunst-hover
kunst-text-link

lightgray

lightgray
lightgray-darkmode

miz

miz
miz-comp
miz-hover
miz-text-link

musik

musik
musik-comp
musik-hover
musik-text-link

red

red

tanz

tanz
tanz-comp
tanz-hover
tanz-text-link

taz

taz
taz-comp
taz-hover
taz-text-link

theater

theater
theater-comp
theater-hover
theater-text-link

transdisziplinaritaet

transdisziplinaritaet
transdisziplinaritaet-comp
transdisziplinaritaet-hover
transdisziplinaritaet-text-link

valid

valid-error
valid-success

white

white

zhdk

zhdk
zhdk-comp
zhdk-hover
zhdk-text-link

Fonts

Helvetica Neue Light

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890

Helvetica Neue Bold

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890

Georgia Italic

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890

Form

Exemplary Form

Personal

Contact

Please enter your private email address. We will only use it to contact you periodically for news and important information.

Also note that you can highlight important information and link to other sites if you feel like it.

More

Required fields are marked *

Exemplary Form - dark (e.g. on filters)

Personal

Contact

Please enter your private email address. We will only use it to contact you periodically for news and important information.

Also note that you can highlight important information and link to other sites if you feel like it.

More

Required fields are marked *

Icons

Easy to use icons

zhdk-logo-black

zhdk-logo-white

arrow_large_left

arrow_large_left_white

arrow_large_right

arrow_large_right_white

share-rollover

zett

zett-black

zett-white

bookmark-large

bookmark-large-active

lightbox-close-black

lightbox-close-white

social-facebook

social-facebook-gray

social-instagram

social-instagram-gray

social-twitter

social-twitter-gray

z

z-black

z-white

list-view

list-view-white

darkmode

darkmode-white

grid-view

grid-view-black

grid-view-white

chevron_up_large

document

document-rollover

document-rollover-white

document-white

event-create

event-create-white

refresh

search-black

search-white

filter-reset

bookmark

bookmark-active

bookmark-white

arrow_up_white

arrow_left

arrow_left_white

arrow_right

arrow_right_white

pfeil_white

close-black

close-white

filter

twitter

twitter_black

twitter_white

youtube

youtube_black

youtube_white

share-black

audio

share

share-white

arrow_down

arrow_up

pfeil

facebook

facebook_black

flickr

flickr_black

flickr_white

facebook_white

wordpress

wordpress_black

wordpress_white

tiktok

tiktok_white

instagram

instagram_black

instagram_white

linkedin

linkedin_black

linkedin_white

vimeo_black

vimeo_white

video

arrow_thin_up

blog

blog-black

blog-white

checkbox_up

checkbox_down

checkbox_left

checkbox_right

checkbox_down-white

checkbox_up-white

checkbox-select

breadcrumbs

breadcrumbs-gray

breadcrumbs-white

Input Daterange

Layout

Layout

Mediaqueries

desktop

Visible for desktop
Hidden for desktop

tablet

Visible for tablet
Hidden for tablet

tablet-portrait

Visible for tablet-portrait
Hidden for tablet-portrait

mobile

Visible for mobile
Hidden for mobile

mobile-portrait

Visible for mobile-portrait
Hidden for mobile-portrait

js

Visible for js
Hidden for js

print

Visible for print
Hidden for print

Table

Are Cool
col 1 is Are Text can be really long and also left-aligned. But we will make sure everything looks alright. Cool CHF 1'600
Column2hastobeonewordToMakeItReallyReallyLong Are centered Cool $12'000'000
col 3 is Are right-aligned Cool $1

Text

Heading 1

Paragraphs

Excepturi cumque error ab alias. accusantium praesentium sed nihil voluptas iusto. et est rem quia eos. fugit ducimus accusamus rerum nihil accusantium omnis nihil et et et. ad omnis totam aut incidunt molestiae ullam hic voluptatem et et nisi sed. praesentium et exercitationem aliquid earum suscipit occaecati est. odit laboriosam nam quis dolores officiis sapiente eos ipsum voluptates

Accusantium repellendus occaecati quis nulla cumque quia. quo velit ut laborum alias error iure vel deserunt rerum laboriosam sit ea. rerum iure id quidem praesentium ut numquam iure perferendis iusto dolorem. excepturi cumque error ab alias. accusantium praesentium sed nihil voluptas iusto There can be bold text.

Strong

I am Strong

Links

I am a Link

Lists

Unordered

  • Et est rem quia eos
  • Fugit ducimus accusamus rerum nihil accusantium omnis nihil et et et
  • Ad omnis totam aut incidunt molestiae ullam hic voluptatem et et nisi sed

Unstyled (workaround due to imported data...)

  • Praesentium et exercitationem aliquid earum suscipit occaecati est
  • Odit laboriosam nam quis dolores officiis sapiente eos ipsum voluptates
  • Enim accusantium repellendus occaecati quis nulla cumque quia consequatur quo velit ut

Ordered

  1. Alias error iure vel deserunt
  2. Laboriosam sit ea iusto rerum iure id quidem praesentium ut numquam iure perferendis iusto
  3. Incidunt excepturi cumque error ab alias autem accusantium praesentium sed

Themes

Theme Colors - Panels

tanz
transdisziplinaritaet
arteducation
musik
film
kunst
theater
design
miz
taz
zhdk
elearning
jahresbericht-orange
jahresbericht-lavender
jahresbericht-pink
jahresbericht-green

Theme Colors - Panels hover & Overlays

tanz
transdisziplinaritaet
arteducation
musik
film
kunst
theater
design
miz
taz
zhdk
elearning
jahresbericht-orange
jahresbericht-lavender
jahresbericht-pink
jahresbericht-green

Theme Colors - Text Links

tanz
transdisziplinaritaet
arteducation
musik
film
kunst
theater
design
miz
taz
zhdk
elearning
jahresbericht-orange
jahresbericht-lavender
jahresbericht-pink
jahresbericht-green

Theme Complementary Colors - Used primarly for Stickers

tanz
transdisziplinaritaet
arteducation
musik
film
kunst
theater
design
miz
taz
zhdk
elearning
jahresbericht-orange
jahresbericht-lavender
jahresbericht-pink
jahresbericht-green