Website Relaunch LANTAL

About this Styleguide

Assets

• Image-Files
  • @Lantal-Logo.svg
  • Arrow-Back.svg
  • Arrow-Link.svg
  • Close-accordeon.svg
  • close.svg
  • Download.svg
  • hidden.svg
  • menue.svg
  • Navigation-Link.svg
  • Open-accordeon.svg
  • Quote_downwards.svg
  • Quote_upwards.svg
  • search.svg
  • visible.svg
  • _Facebook.svg
  • _Github.svg
  • _Instagram.svg
  • _Kununu.svg
  • _Linkedin.svg
  • _Pinterest.svg
  • _Slack.svg
  • _Tiktok.svg
  • _Vimeo.svg
  • _Whatsapp.svg
  • _X.svg
  • _Xing.svg
  • _Youtube.svg
  • __Lantal_02.jpg
  • __Lantal_03.jpg
  • __Lantal_04.jpg
• Audio+Video
  • Lantal-low.mp4

Design-Token

• Colors
  • Foreground-Colors
  • FSC2
  • FEC
  • FSB
  • FPB
  • FSC1
  • FC8
  • FC9
  • FC10
  • FC7
  • FC6
  • FC5
  • FC4
  • FC3
  • FC2
  • FC1
  • FDC
  • Background-Colors
  • BDC
  • BEC
  • BSC4
  • BSC3
  • BSC1
  • BC6
  • BC7
  • BC8
  • BC5
  • BC3
  • BC1
  • BSC2
  • BC4
  • BC2
  • Border-Colors
  • LDC
  • LEC
  • LSC2
  • LSC1
  • LC7
  • LC6
  • LC5
  • LC4
  • LC3
  • LC2
  • LC1
• Typography
  • Font-Faces
  • Body Font (bold/strong)
  • Body Font
  • Headline Font (H2 und kleiner)
  • Headline Font (H1)
  • Font of OffCanvas-Menue
  • Font-Sizes
  • FS-XXXXL
  • FS-XXXL
  • FS-XXL
  • FS-XL
  • FS-LL
  • FS-L
  • FS-M
  • FS-S
  • FS-XS
  • FS-XXS
  • FS-XXXS

Atoms

• Navigation
  • Close Icon
  • Search Icon
  • Hamburger Menue (desktop)
  • Hamburger Menue (mobile)
  • Language Switch
  • Menue Item (with DropDown)
  • Tooltip
• Media
  • Logo
  • LinkedIn
  • TikTok
  • Vimeo
  • WhatsApp
  • X (Twitter)
  • Xing
  • YouTube
  • Facebook
  • Github
  • Instagram
  • Kununu
  • Pinterest
  • Slack
• Text
  • Headline (H1)
  • List (also with linked items)
  • List with download items
  • Label (in Teaser or at H1)
  • Quote
  • Introduction Paragraph
  • Paragraph
  • Headline (H2 - animated)
  • Back-Link
  • Headline (H3)
  • Teaser-Text
  • Headline (H5)
  • Headline (H2)
  • More-Link
  • Text Link
  • Headline (H4)
  • Caption
• Buttons
  • Share on Instagram
  • Share on LinkedIn
  • Small Button (default)
  • Secondary Button (large)
  • Primary Button (large)
  • Small Button (active)
• Layout
  • Accordion
  • Table

Molecules

• Interaction & Messaging
  • Sharing Button-Group
• Content
  • Button (horicontal-aligned-center)
  • Table (responsive)
• Forms
  • Text Input Field
  • Password Field
  • Invalid Input Field
  • Textarea
  • Select Menue
  • Radiobutton
  • Checkbox
  • Button Group

Organisms

• Content
  • Accordion 8-10-12
  • Bodytext-Column 8-10-12
  • Label + H1 + Introduction
  • H2 + Paragraph
  • Teaser-Column (3s) with BG
  • Text-Column 50%
• Forms
  • Form

Components

• General notes
• Grid
• Header with Hamburger Menue
• Footer
• Second-Footer
• Offcanvas-Navigation
• Hero-Video (full view)
• Hero-Area
• Hero-Area (H2)
• Text-Block (breit)
• _ Text-Block (schmal)
• Accordion (breit)
• _ Accordion (schmal)
• Sharing (breit)
• _ Sharing (schmal)
• Back-Link
• Filter-Area
• Quote
• C2A
• Carousel-Block (Swiper)
• Teaser-Block (Label + Headline)
• _ Teaser-Block (H5, Text + Button)
• _ Teaser-Block [with only 2 images]
• Single-Teaser (image left)
• _ Single-Teaser (image right)
• Youtube-Video
• Teaser-Set
• Image-Block (full)
• _ Image-Block (L)
• _ Image-Block (M)
• Form-Block

Templates

• Startpage
• Overview-Page
• Jobs & Karriere
• Download-Center
• Example-Page 1
• Example-Page 2
• Example-Page 3