Styleguide

Kundenspezifische Inhaltselemente

fussnote text-left

Mauris nec rhoncus risus. Nunc commodo iaculis aliquam. Vivamus nec lectus laoreet, sodales justo eu, consequat quam. Integer ac pellentesque tortor. Morbi ultrices eu massa viverra tempor. Vivamus dui odio, sagittis ut arcu sit amet, egestas rhoncus ipsum. Quisque non felis luctus, sollicitudin lectus a, ullamcorper erat. Vestibulum id velit nec mauris viverra tristique. Proin enim neque, fermentum nec maximus finibus, porta ut nibh. Nunc eu lorem id ex eleifend consequat. Vivamus non sapien leo. Vestibulum id malesuada quam. Suspendisse non risus nec tortor elementum posuere nec et ipsum.

ol list

  1. Fusce porttitor, tellus ac congue sollicitudin,
  2. ante nulla consectetur ipsum, ac dapibus urna dolor vel purus.
  3. Aenean volutpat lorem id lectus faucibus, tincidunt euismod est sagittis.
  4. In at accumsan risus. Maecenas dignissim interdum odio eu interdum.
  5. Donec id lobortis nulla. Nulla rhoncus felis in lectus molestie, at eleifend nisl condimentum.
  6. Suspendisse odio sapien, sollicitudin non dui feugiat, scelerisque convallis massa. Etiam rutrum gravida imperdiet.
    1. Fusce porttitor, tellus ac congue sollicitudin,
    2. ante nulla consectetur ipsum, ac dapibus urna dolor vel purus.
    3. Aenean volutpat lorem id lectus faucibus, tincidunt euismod est sagittis.
    4. In at accumsan risus. Maecenas dignissim interdum odio eu interdum.
    5. Donec id lobortis nulla. Nulla rhoncus felis in lectus molestie, at eleifend nisl condimentum.
    6. Suspendisse odio sapien, sollicitudin non dui feugiat, scelerisque convallis massa. Etiam rutrum gravida imperdiet.
    7. Donec imperdiet et ex vel vulputate. Quisque vulputate arcu eleifend, dictum orci non, convallis orci.
  7. Donec imperdiet et ex vel vulputate. Quisque vulputate arcu eleifend, dictum orci non, convallis orci.
    1. Fusce porttitor, tellus ac congue sollicitudin,
      1. Fusce porttitor, tellus ac congue sollicitudin,
      2. ante nulla consectetur ipsum, ac dapibus urna dolor vel purus.
      3. Aenean volutpat lorem id lectus faucibus, tincidunt euismod est sagittis.
      4. In at accumsan risus. Maecenas dignissim interdum odio eu interdum.
      5. Donec id lobortis nulla. Nulla rhoncus felis in lectus molestie, at eleifend nisl condimentum.
      6. Suspendisse odio sapien, sollicitudin non dui feugiat, scelerisque convallis massa. Etiam rutrum gravida imperdiet.
      7. Donec imperdiet et ex vel vulputate. Quisque vulputate arcu eleifend, dictum orci non, convallis orci.
    2. ante nulla consectetur ipsum, ac dapibus urna dolor vel purus.
    3. Aenean volutpat lorem id lectus faucibus, tincidunt euismod est sagittis.
    4. In at accumsan risus. Maecenas dignissim interdum odio eu interdum.
    5. Donec id lobortis nulla. Nulla rhoncus felis in lectus molestie, at eleifend nisl condimentum.
    6. Suspendisse odio sapien, sollicitudin non dui feugiat, scelerisque convallis massa. Etiam rutrum gravida imperdiet.
    7. Donec imperdiet et ex vel vulputate. Quisque vulputate arcu eleifend, dictum orci non, convallis orci.

ui list

  • Fusce faucibus mi at est malesuada faucibus. Sed auctor est id dapibus laoreet.
    • Fusce faucibus mi at est malesuada faucibus. Sed auctor est id dapibus laoreet.
      • Fusce faucibus mi at est malesuada faucibus. Sed auctor est id dapibus laoreet.
      • Praesent semper nulla dictum ipsum ullamcorper efficitur.
      • Donec facilisis nunc sit amet condimentum dictum.
      • Nunc dictum turpis non ipsum sagittis euismod. Nulla molestie nisi vel dolor sodales, vitae aliquam neque pulvinar.
    • Praesent semper nulla dictum ipsum ullamcorper efficitur.
    • Donec facilisis nunc sit amet condimentum dictum.
    • Nunc dictum turpis non ipsum sagittis euismod. Nulla molestie nisi vel dolor sodales, vitae aliquam neque pulvinar.
  • Praesent semper nulla dictum ipsum ullamcorper efficitur.
    • Fusce faucibus mi at est malesuada faucibus. Sed auctor est id dapibus laoreet.
    • Praesent semper nulla dictum ipsum ullamcorper efficitur.
    • Donec facilisis nunc sit amet condimentum dictum.
    • Nunc dictum turpis non ipsum sagittis euismod. Nulla molestie nisi vel dolor sodales, vitae aliquam neque pulvinar.
  • Donec facilisis nunc sit amet condimentum dictum.
  • Nunc dictum turpis non ipsum sagittis euismod. Nulla molestie nisi vel dolor sodales, vitae aliquam neque pulvinar.

stil

Nulla mattis ex vitae sollicitudin lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Donec rutrum laoreet dignissim. Fusce in semper justo. Fusce porta elit ut velit auctor aliquam. Praesent gravida metus nec eleifend suscipit. Aliquam erat volutpat. Etiam semper lacus vel enim facilisis pretium. Nulla consequat eros vitae sodales ultricies. Mauris et pellentesque libero, vel commodo ligula. Duis condimentum congue rhoncus.

Nulla mattis ex vitae sollicitudin lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Donec rutrum laoreet dignissim. Fusce in semper justo. Fusce porta elit ut velit auctor aliquam. Praesent gravida metus nec eleifend suscipit. Aliquam erat volutpat. Etiam semper lacus vel enim facilisis pretium. Nulla consequat eros vitae sodales ultricies. Mauris et pellentesque libero, vel commodo ligula. Duis condimentum congue rhoncus.

Nulla mattis ex vitae sollicitudin lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Donec rutrum laoreet dignissim. Fusce in semper justo. Fusce porta elit ut velit auctor aliquam. Praesent gravida metus nec eleifend suscipit. Aliquam erat volutpat. Etiam semper lacus vel enim facilisis pretium. Nulla consequat eros vitae sodales ultricies. Mauris et pellentesque libero, vel commodo ligula. Duis condimentum congue rhoncus.

Mask Element - Graue Box

Das Konstrukt der «zirkulären Migration» entstammt dem EU-Projekt «Well-being 2030», ausgearbeitet vom Brüsseler Think tank «European Policy Centre». Zirkuläre Migration wird so beschrieben: «Ein beträchtlicher Teil der grenzüberschreitenden Wanderungsbewegungen mündet nicht in dauerhafter Niederlassung im Zielland. Manche Migranten kehren nach einer bestimmten Zeit in ihr Herkunftsland zurück, andere wandern in ein Drittland weiter oder ‹pendeln› (zum Beispiel saisonal) für jeweils kürzere Aufenthalte zwischen zwei Staaten. Die Grenzen zwischen ‹temporären›, ‹zirkulären› und ‹saisonalen› Wanderungsformen sind somit fliessend.»8 Dass ein solches Wanderleben den meisten Menschen auf Dauer widerstrebt, soll wohl durch die Bezeichnung «Wohlbefinden» übertüncht werden.

eins

eins

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.


ruhesitz

Fusce porttitor, tellus ac congue sollicitudin, ante nulla consectetur ipsum, ac dapibus urna dolor vel purus. Aenean volutpat lorem id lectus faucibus, tincidunt euismod est sagittis. In at accumsan risus. Maecenas dignissim interdum odio eu interdum. Donec id lobortis nulla. Nulla rhoncus felis in lectus molestie, at eleifend nisl condimentum. Suspendisse odio sapien, sollicitudin non dui feugiat, scelerisque convallis massa. Etiam rutrum gravida imperdiet. Donec imperdiet et ex vel vulputate. Quisque vulputate arcu eleifend, dictum orci non, convallis orci.

zwei

zwei

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.

2-spaltiges Raster-Element - mit Spalten-Aufteilung 66%-33%

Grid 50/50 - Textmedias - C

Text-Element

Erscheinungsbild -> Anzahl Spalten -> 3 spaltig - D

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, ccLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, ccLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, cc

Text&Medien-Element

Erscheinungsbild -> Anzahl Spalten -> 2 spaltig

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, ccLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, ccLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed Link 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, cc

WS Standard Inhaltselemente

Überschrift 2 - linksbündig (h2)

Untertitel

Überschrift 2 - zentriert, mit roter Linie

Untertitel

Überschrift 3 - linksbündig

Untertitel

Überschrift 3 - zentriert

Untertitel

Überschrift 3 - zentriert, mit roter Linie

Untertitel

Überschrift 4 - linksbündig

Untertitel

Überschrift Normal fett

Untertitel


Überschrift 2 linksbündig

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

Bild zugeschnitten

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.df sdf asdf 

 

Bild 1-spaltig, neben Text rechts

Erscheinungsbild -> Hintergrundfarbe -> Hellgrau

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.

Bild 1-spaltig, neben Text 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.

Bilder 4-spaltig, oberhalb Text mittig

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.

Dies ist ein Test

  1. Test
    1. Test
    2. asfd
    3. asdf
    4. asdf
  1. one
    1. one
    2. two
    3. three
      1. one
      2. two
      3. three
  2. two
  3. three
  • one
    • one
    • two
    • three
      • one
      • two
      • three
  • two
  • three

Unsere Website verwendet Cookies, damit wir die Page fortlaufend verbessern und Ihnen ein optimiertes Besucher-Erlebnis ermöglichen können. Wenn Sie auf dieser Webseite weiterlesen, erklären Sie sich mit der Verwendung von Cookies einverstanden.
Weitere Informationen zu Cookies finden Sie in unserer Datenschutzerklärung.
 

Wenn Sie das Setzen von Cookies z.B. durch Google Analytics unterbinden möchten, können Sie dies mithilfe dieses Browser Add-Ons einrichten.

OK