Styleguide

Mainsite

Basic architecture

Für die GESIS Mainsites gibt es zwei Varianten, die je nach Tiefe der Hierarchie in der Struktur zur Anwendung kommen.

  • Variante (a wird für die obersten Seiten der Ebenen 1 bis 3 verwendet und beinhalten ein Page Banner
  • Variante (b für tiefere Seiten ab Level 4 sind ohne Page Banner nur mit Breadcrumb

There are two variants for the GESIS main sites, which are used depending on the depth of the hierarchy in the structure.

  • Variant (a is used for the top pages of levels 1 to 3 and includes a page banner
  • Variant (b for deeper pages from level 4 are without page banner only with breadcrumb

Layout (a

Page-Banner: True

Breadcrumb: Level 0 > 3

Structure (a

Page-Banner: True
        

          body // The root container
          ├── header // GESIS Main-Header
          │    ├── .logo-and-navigations
          │    │     ╰── .logo-and-navigations--inner
          │    │           ├── .logo-wrapper 
          │    │           │     ╰── logo_gesis.svg // GESIS main Logo
          │    │           ╰── .navigations-wrapper
          │    │                 ├── // GESIS MegaMenu
          │    │                 ╰── // topnav    
          │    ╰── .gesis-search-wrapper // GESIS Suche
          ├── main .gs-main // content Area
          │    ├── section .page-banner // banner image
          │    │     ╰── .page-banner--inner 
          │    │           ├── .gs_rootline
          │    │           │     ╰── // breadcrumb
          │    │           ╰── h1
          │    │               ╰── // site title
          │    ├── section .content-section // Content opener for a new content topic
          │    │     ╰── .content-section--inner
          │    │           ├── h2 // clean SEO content structures
          │    │           ├── h3
          │    │           ├── p
          │    │           ├── ul
          │    │           ╰── ...
          │    ├── section .content-section // new content topic
          │    │     ╰── .content-section--inner
          │    │           ╰── ...
          │    ╰── //  As many content items as required
          ╰── footer


HTML (a

Page-Banner: True

Layout (b

Page-Banner: False

Breadcrumb: >= Level 4

Structure (b

Page-Banner: False 


          body // The root container
          ├── header // GESIS Main-Header
          │    ╰── //  ...
          ├── main .gs-main // content Area
          │    ├── .gs_rootline // breadcrumb
          │    │     ╰── .page-banner--inner 
          │    ├── section .content-section // Content opener for a new content topic
          │    │     ╰── .content-section--inner
          │    │           ├── h1 // clean SEO content structures
          │    │           ├── h2
          │    │           ├── h3
          │    │           ├── p
          │    │           ├── ul
          │    │           ╰── ...
          │    ├── section .content-section // new content topic
          │    │     ╰── .content-section--inner
          │    │           ╰── ...
          │    ╰── //  As many content items as required
          ╰── footer

HTML (b

Page-Banner: False