Hinweis zur jeweiligen Sprachversion:

Das hier ist die Englische Übersetzung der Layout-Seite, auch wenn alles auf DE erscheint. Bei Tests mit global übersetzten Feldern (bspw. FAQ) wird es dann ersichtlich. 

Ziel dieser Seite ist, alle möglichen Layouts auf zuerich.com vorzustellen für externe Partnerschaften, aber auch intern zu Testzwecken.

Ich bin eine H2 Überschrift

Ich bin ein Lead und fasse mich kurz (Mobile-Ansicht!)

Ich bin ein Textfeld mit diversen Schriftgrössen, Tabelleneinbindung, Aufzählungen etc. 

Ich bin die H1-Schrift

Ich bin die H2-Schrift

Ich bin die H3-Schrift

Ich bin die H4-Schrift

Ich bin die H5-Schrift
Ich bin die H6-Schrift

Man kann die Standardschrift auch verlinken 

intern mit Pfeil geradeaus

oder extern mit Pfeil nach oben rechts.

Primary Button 

Button Secondary

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  • sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 

Ich bin ein Textfeld in 2 Spalten und gehighlighted

Das ist ein WYSIWYG-Feld. Hier kann beliebig langer Text eingefügt werden. Ich bin ein Standardtext

Ich bin die H1-Schrift

Ich bin die H2-Schrift

Ich bin die H3-Schrift

Ich bin die H4-Schrift

Ich bin die H5-Schrift
Ich bin die H6-Schrift

Man kann die Standardschrift auch verlinken intern oder extern

Primary Button 

Button Secondary

Akkordeon

In ein Akkordeon können diverse Styles eingeüfgt werden, ob Lauftext, Bilder oder Bulletpoints und Verlinkungen. Finde es heraus.

  • Bullet Point 1
  • Bullet Point 2 mit Link
  • Bullet Point 3 fett
  • Hier noch ein Bullet Point

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Toggle Test

Toggle Päsche

Das ist ein Subtitle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

All Glory to the Hypnotoad!
Pascal Schwager
Päsche Schwager
Lead Digital Products & Services
Flussbad
Flussbad
Pestalozzi
Pestalozzi
Bonheur
Bonheur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Ich bin 2-Spalten und mein Layout lässt sich «dritteln»

50:50

Gleichbreite Spalten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

33:66

Spalte links schmaler als die rechts

Hier könnte ein Titel stehen

Hier könnte ein Lead stehen

66:33

Spalte rechts schmaler als die links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Achtung

Die Spielereien und Layouts sind auf Desktop ganz nett und schön, aber denke immer dran

70% der User:innen 

kommen über Mobile auf die Seite. Darum immer kurz checken, wie dein Layout mobile wirkd! 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

90 Gästen: Hier erwartet Besucher:innen ein authentisches und genussvolles Erlebnis. 

Neben dem täglichen Betrieb organisiert der Schlachthof Letzigrund unter anderem Grillpartys sowie Weinverkostungen und lädt im Sommer die Gäste dazu ein, auf der grossen Aussenterrasse zu verweilen. 

Ich bin eine Tabelle

Ich bin ein Subtitel

Das ist eine Tabelle
Auch hiergibt es
mehrereDarstellungsoptionenfettkursiv
oder eine 
  • Aufzählung
  • ist
möglich.

Ich bin eine Text / Image / Box

Hier könnte ein Text stehen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Limmat, Wipkingen

Hier könnte auch ein Text stehen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Ich bin eine Text / Image / Box

Hier könnte ein Text stehen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Limmat, Wipkingen

Ich bin eine Text / Image / Box RECHTSBÜNDIG

Hier könnte ein Text stehen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Park Stadelhofen

Hier könnte auch ein Text stehen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Ich bin ein Zürich Card Widget

Ich bin ein Untertitel (optional)

Zürich
Card.
Public Transport
Public Transport

Unlimited 2nd class travel on trams, buses, and trains in the city and the surrounding fare zones. 

Boat Cruises
Boat Cruises

Free river cruise and mini and short lake cruises.

Cable Cars
Cable Cars

Unlimited travel on the Polybahn, Seilbahn Rigiblick and Dolderbahn funiculars, and on the Felsenegg cable car.

Museums
Museums

Free admission to most of Zurich’s museums. 

Tours
Tours

Up to 50% discount on popular city tours. 

Culture
Culture

Reduced or free admission to concert venues, clubs, movie theaters, and the Casino Zurich.

Gastronomy
Gastronomy

Up to 15% price reduction in participating restaurants and bars.

Experiences
Experiences

Various discounts on leisure activities and experiences. 

Shopping
Shopping

Up to 20% discount in selected Zurich stores. 

Ich bin eine Teaser List

Meine Teaser werden 100%-Grid angezeigt

Ich bin ein Teaser-Slider

Ich bin ein Untertitel (optional)

Ich bin eine Teaser List

Meine Teaser werden als 50%-Grid angezeigt

Ich bin eine Teaser List

Meine Teaser werden als 33%-Grid angezeigt.

Ich bin eine Teaser List

Meine Teaser werden als 25%-Grid angezeigt.

Ich bin eine Teaser List

Meine Teaser werden als 20%-Grid angezeigt.

Titel Column with Sidebar und Video

Titel Column with Sidebar und Video

FAQ Test 1

Test: mehrere Kategorien in einem FAQ-Block (General Questions | Prices | During the tour) General Questions About City Tours

FAQ Test 2

Test: Nur eine FAQ Categorie im Block, hier «Using the Zürich Card» Using the Zürich Card

Titel Column with Sidebar und Video

Titel Column with Sidebar und Video

90 Gästen: Hier erwartet Besucher:innen ein authentisches und genussvolles Erlebnis. 

Neben dem täglichen Betrieb organisiert der Schlachthof Letzigrund unter anderem Grillpartys sowie Weinverkostungen und lädt im Sommer die Gäste dazu ein, auf der grossen Aussenterrasse zu verweilen. 

Intercomestibles, der Laden

Ich bin ein Layout mit zwei Kolonnen

Es gibt auch die Kombination mit Text & Bild

Limmat, River Cruise

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

Ich bin ein Layout mit zwei Kolonnen

Ich bin ein Untertitel (optional)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

Ich bin ein Link

Ich bin ein Bild

Ich bin ein Untertitel (optional)

Grossmünsterplatz, Aussicht Fraumünster

Ich bin ein Video

Ich bin ein Untertitel (optional)

Ich bin ein Untertitel (optional)

Limmat, River Cruise
Limmat, River Cruise
Summer in Zurich, View on the River Limmat
Summer in Zurich, View on the River Limmat
Limmat River Cruise
Limmat River Cruise

Ich bin ein Zitat

Ich bin ein Untertitel (optional)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Ich bin ein Zitat
Hier steht ein Text.

Ich bin eine Issuu-Integration

Ich bin ein Untertitel (optional)

Issuu thumbnail

Ich bin eine Karte

Ich bin ein Untertitel (optional)

Ich bin ein Modal Video

Ich bin ein Untertitel (optional)

Ich bin ein Remote Video

Ich bin ein Untertitel (optional)

Ich bin ein Countdown

Ich bin ein Untertitel (optional)

Ich bin eine Crowdriff Galery

Ich bin ein Untertitel (optional)

Ich bin das Bsp. für die WYSIWIG Funktion Interview

Gretta fragt

Susanna Antwortet weiss ich was

gretta fragt erneut

susanna sagt dies und das