GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
Styleguide

Main

Für Standard Microsites

Basic-Struktur 

        

          body // The root container
          │
          ├── // GESIS Micro-Header
          ├── // Microsite Banner
          │── // Microsite Navigation
          │
          ├── main .microsite-main // content Area
          │    │
          │    ├── section .content-section // Content opener new topic
          │    │     ╰── .content-section--inner
          │    │           ├── h1 // clean SEO content structures
          │    │           ├── h2
          │    │           ├── h3
          │    │           ├── p
          │    │           ├── ul
          │    │           ╰── ...
          │    ├── section .content-section // new content topic
          │    │     ╰── .content-section--inner
          │    │           ├── h2 // clean SEO content structures
          │    │           ├── h3
          │    │           ╰── ...
          │    ╰── //  As many content items as required
          │
          ╰── // api/footer

HTML Beispiel 


     <main class="microsite-main">
      
      <!-- content area -->
      <section id="..." class="content-section ...">
        <div class="content-section--inner">
          <h1>Lorem ipsum dolor</h1>
          <h2>Lorem ipsum dolor</h2>
          <h3>At vero eos et accusam</h3>
          <p>
            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.
          </p>
        </div>
      </section>

      <section id="..." class="content-section ...">
        <div class="content-section--inner">
          <h2>Lorem ipsum dolor</h2>
          <h3>At vero eos et accusam</h3>
          <p>
            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.
          </p>
        </div>
      </section>

      <section id="..." class="content-section ...">
       <div class="content-section--inner">
          ...
        </div>
      </section>

      ...
      <!-- END content area -->
    </main>

Live Beispiel

Lorem ipsum dolor

At vero eos et accusam

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.