Kicker Test

StyleGuide

Absatz mit der Klasse subline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Spalte hat die Klasse: txt-accent15

Absatz hat die Klasse: txt-accent10
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Standardaufbau LUKAS ERZETT Website Unterseiten

  1. Kicker; Kurzer Absatz mit der Klasse “kicker” oder gesonderter Block “kicker”
  2. Überschrift H1
  3. Optionaler Absatz mit der Klasse “subline”
  4. Content-Bereich aufgebaut aus unterschiedlichen Blöcken z.B. Spalten, Absatz, Bild, Call-to-action, Download

Mögliche Klassen-Modifikationen für allgemeine Blöcke (z.B. Spalten, Absatz, Bild)

  • padding-small: Umlaufender geringer Abstand
  • padding-medium: Umlaufender mittlerer Abstand
  • txt-ten: 10% Abstand links und rechts
  • txt-ten-left: 10% Abstand links
  • txt-ten-right: 10% Abstand rechts
  • txt-twenty: 20% Abstand links und rechts
  • txt-twenty-left: 20% Abstand links
  • txt-twenty-right: 20% Abstand rechts
  • txt-accent10: Hellgrauer Hintergrund des Blockes und umlaufender Abstand
  • txt-accent15: Mittelgrauer Hintergrund des Blockes und umlaufender Abstand
  • txt-accent-red: LUKAS-Rot Hintergrund des Blockes, weißer Text und umlaufender Abstand
  • box-border-10: Hellgraue Kontur um den Block, am besten mit einer Klasse zum Abstand kombinieren z.B. padding-medium
  • box-border-15: Mittelgraue Kontur um den Block, am besten mit einer Klasse zum Abstand kombinieren z.B. padding-medium

Beispiele von Absätzen mit unterschiedlichen Modifikationsklassen

Absatz mit den Klassen: padding-medium box-border-15
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Absatz mit der Klasse: txt-twenty
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Absatz mit der Klasse: txt-accent-red
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Mögliche Klassen-Modifikationen für Headline Blöcke

  • red: Roter Text
  • space-bottom: Fester Abstand nach unten von 3rem (45px)
  • small: Feste Schriftgröße von 1.6rem (24px)
  • smaller: Feste Schriftgröße von 1.2rem (18px)

H2 Space-bottom

H2 Small

H2 Smaller red

H3 Space-bottom

H3 Small

H3 Smaller red

H4 Space-bottom

H4 small

H4 smaller

Da die meisten Blöcke keine eingebauten Abstände haben, um mehr dynamik in der Gestaltung zu zulassen, müssen diese via dem Block “Abstand” manuell hinzugefügt werden. Abstände sollten immer 30, 60 oder 90 Pixel betragen.