Styleguide

Grid

Desktop: Max width 1200px, 20px padding left & right, 2 rows with 40px gap

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Desktop: Max width 1200px, 20px padding left & right, 3 rows with 40px gap

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Desktop: Source Sans Pro, 200 Extra Light, 100 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Fontguide

h1 heading = HTML Tag "all h1 headings"

comboclass = "H1" & "light"

Lorem ipsum dolor

comboclass = "H1" & "dark"

Lorem ipsum dolor

Desktop: Source Sans Pro, 200 Extra Light, 70 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Tablet: Source Sans Pro, 200 Extra Light, 75 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Mobile Landscape: Source Sans Pro, 200 Extra Light, 50 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Mobile Portrait: Source Sans Pro, 200 Extra Light, 35 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

H2 heading = HTML Tag "all H2 headings"

comboclass = "H2" & "light"

Lorem ipsum dolor sit amet

comboclass = "H2" & "dark"

Lorem ipsum dolor sit amet

Desktop: Source Sans Pro, 300 Light, 50 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Tablet: Source Sans Pro, 300 Light, 50 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Mobile Landscape: Source Sans Pro, 300 Light, 35 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

Mobile Portrait: Source Sans Pro, 300 Light, 30 Px, 1.0- height, 2pt Letter spacing, All caps, Left align, Bold span

H3 heading = HTML Tag "all H3 headings"

comboclass = "H3" & "light"

Lorem ipsum dolor

comboclass = "H3" & "dark"

Lorem ipsum dolor

Desktop: Source Sans Pro, 700 Bold, 35 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Tablet: Source Sans Pro, 700 Bold, 30 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Mobile Landscape: Source Sans Pro, 700 Bold, 25 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Mobile Portrait: Source Sans Pro, 700 Bold, 23 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

h4 heading = HTML Tag "all h4 headings"

comboclass = "H4" & "light"

Lorem ipsum dolor

comboclass = "H4" & "dark"

Lorem ipsum dolor

Desktop: Source Sans Pro, 700 Bold, 25 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Tablet: Source Sans Pro, 700 Bold, 20 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Mobile Landscape: Source Sans Pro, 700 Bold, 20 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

Mobile Portrait: Source Sans Pro, 700 Bold, 18 Px, 1.2- height, 1.5pt Letter spacing, All caps, Left align

h5 heading = Not in Use

h6 heading = Not in Use

Lead paragraph = Class "Lead paragraph"

comboclass = "Lead Paragraph" & "light"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

comboclass = "Lead Paragraph" & "dark"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Desktop: Source Sans Pro, 400 Normal, 25 Px, 1.4- height, Left align, Bold span

Tablet: Source Sans Pro, 400 Normal, 20 Px, 1.4- height, Left align, Bold span

Mobile Landscape: Source Sans Pro, 400 Normal, 25 Px, 1.4- height, Left align, Bold span

Mobile Portrait: Source Sans Pro, 400 Normal, 25 Px, 1.4- height, Left align, Bold span

paragraph = HTML Tag "all paragraphs"

comboclass = "Paragraph" & "light"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

comboclass = "Paragraph" & "dark"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Desktop: Source Sans Pro, 400 Normal, 0.5 Px letterspacing, 20 Px, 1.3- height, Left align, Bold span

Tablet: Source Sans Pro, 400 Normal, 0.5 Px letterspacing, 18 Px, 1.4- height, Left align, Bold span

Mobile Landscape: Source Sans Pro, 400 Normal, 0.5 Px letterspacing, 15 Px, 1.5- height, Left align, Bold span

Mobile Portrait: Source Sans Pro, 400 Normal, 0.5 Px letterspacing, 14 Px, 1.5- height, Left align, Bold span

Text Block = Class "Text Block"

comboclass = "Paragraph" & "light"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

comboclass = "Paragraph" & "dark"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Desktop: Source Sans Pro, 400 Normal, 0.5 Px letterspacing, 20 Px, 1.5- height, Left align, Bold span

Desktop: safsfsfsfs

Desktop: safsfsfsfs

Desktop: safsfsfsfs

Buttons = Class: Primär Button |Sekundär Button | Terziär Button

comboclass = "... Button" & "light"

comboclass = "... button" & "dark" / "Purple"

Desktop: Source Sans Pro, 300 Light, 20 Px, 1.4- height, Left align, Bold span

Desktop: safsfsfsfs

Desktop: safsfsfsfs

Desktop: safsfsfsfs

Wenn Sie auf “Annehmen”, klicken, stimmen Sie der Speicherung von Cookies auf Ihrem Gerät zu. Weitere Informationen finden Sie in unserer Datenschutzerklärung.