Styleguide

Patterns

Patterns

• Accessibility

  • Flyingfocus
  • Focus Only
  • Visuallyhidden

• Base

  • CSS Icons
  • Colors
  • Fonts
  • Icons
  • Social Metatags
  • Text
  • Visible / Hidden

• Elements

  • Button
  • Button Group
  • Close Button
  • Flyout
  • Icon Link
  • Image
  • Link
  • Richtext Button
  • Table
  • Tag
  • Tooltip

• Form

  • Field Repeater
  • Form Inputs
  • Form Row

• Layout

  • Flex Grid
  • L-Grid
  • Left-Right Layout
  • Masonry Layout
  • Sitewidth
  • Table Layout
  • l-Gap
  • l-Pagegrid
  • l-Timeline

• Widget

  • Lightbox
  • Odometer
  • Toggle

Components

Components

• Cms

  • Article Accordion
  • Article Aside
  • Article Figure
  • Article Form
  • Article Fullwidth Image
  • Article Image Slider
  • Article Inlinevideo
  • Article Lead
  • Article Link List
  • Article Meta
  • Article Quote
  • Article Text
  • Article Title
  • Article Video
  • ArticleShare
  • Employee List
  • Hero
  • Jobs List
  • Office List

• Content

  • Article Next
  • Article Related
  • Card
  • Card Employee
  • Card Facts
  • Contact Form
  • Contact Person Finder
  • Document List
  • Fullscreen Slider
  • Link List
  • Magazin Filter
  • Matching Products
  • Notification
  • Product Accessories
  • Product Categories
  • Product Example Usage
  • Product Filter
  • Product Footer
  • Product Header
  • Product Info
  • Product Intro
  • Product List
  • Product Technical Details
  • Search Results
  • Watch List Container

• Global

  • Accordion
  • Back Link
  • Breadcrumb
  • Burger
  • Footer Address
  • Footer Certificates
  • Footer Copyrights
  • Footer Language Selector
  • Footer Main Nav
  • Footer Meta Nav
  • Footer Newsletter
  • Footer Social Media
  • Mobile Nav
  • Search
  • Search Form
  • Share
  • Sidebar Nav
  • Site Footer
  • Site Header
  • Site Logo
  • Site Main Nav
  • TopLink
  • View Mode Changer
  • Visualgrid
  • Watch List Indicator
  • WidgetBar

• Teasers

  • Contact Teaser
  • Fullwidth Teaser
  • Journal Teaser
  • Magazin Teaser
  • Reference Teaser
  • Service Picto Teaser
  • Service Teaser
  • Teaser

• Timeline

  • Timeline Connector
  • Timeline Inlinevideo
  • Timeline Intro
  • Timeline Navigation
  • Timeline Text
  • Timeline Video
  • Timeline Year
  • Timeline Slider
  • Timeline Text / Media
  • Timeline Text / Quote
  • Timeline Text Center

Pages

Pages

• 01 Home

  • 01 Home

• 02 References

  • 01 References
  • 02 Reference Detail

• 03 Journal

  • 01 Journal
  • 02 Journal Detail
  • 03 Journal Detail (with Hero)
  • 04 Journal Detail (with Hero Video)

• 04 Uber Uns

  • 01 Philosophy
  • 04 Team
  • 05 Karriere
  • 05a Karriere - No Jobs
  • 05b Karriere - Jobs
  • 05c Karriere - Job Detail
  • 06 Partner
  • 07.1 Sustainability
  • 07.2 History

• 05 Product

  • 01 More Product Categories
  • 01 Product Categories
  • 02 Product Filter
  • 03 Product Family
  • 03 Product Family (many!)
  • 03.1 Product Family (light background test)
  • 03.2 Product Family (dark background test)
  • 04 Product Family - with subcategories in filter
  • 05 Product Detail
  • 05.1 Product Detail (Just to test WatchList)

• 06 Magazin

  • 01 Magazin
  • 02 Magazin Overview
  • 02.1 Magazin Overview (static)
  • 03 Magazin Detail
  • 03.1 Magazin Detail (with Hero)
  • 03.2 Magazin Detail (with Hero Video)

• 07 User Flow

  • 01 Product Categories
  • 03 Product Family

• 08 Landing Pages

  • 08.0 Landing Page

• 99 Various

  • 01 Impressum
  • 02 error 404
  • 02.1 EOL 404
  • 03 Kontakt
  • 04 Merkliste
  • 05 Search Result
  • 06 Search Results Empty

Docs & Notes

Git Log

Release Notes