GEO - Content Library
-
Index
- Content Sections
-
Snippets
- Teaser Grid
-
Teaser
- Teaser - Large
- Teaser - Large (With App Store Buttons)
- Teaser - Large (Linked)
- Teaser - Large (2 Columns)
- Teaser - Large (2 Columns & Linked)
- Teaser - Large (2 Columns & Reversed)
- Teaser - Large (2 Columns & Reversed & Linked)
- Teaser - Wide
- Teaser - Wide (Linked)
- Teaser - Wide (Reversed)
- Teaser - Wide (Reversed & Linked)
- Teaser - Wide (3 columns)
- Teaser - Wide (2 columns, w/o image)
- Teaser - Medium
- Teaser - Medium (Linked)
- Teaser - Medium (Reversed)
- Teaser - Medium (Reversed & Linked)
- Teaser - Medium (Inline)
- Teaser - Medium (Inline & Linked)
- Teaser - Medium (Inline & Reversed)
- Teaser - Medium (Inline & Reversed & Linked)
- Teaser - Small
- Teaser - Small (Linked)
- Teaser - Small (Reversed)
- Teaser - Small (Reversed & Linked)
- Lists
- Accordion
- Abo Listing Details
- Teaser Wide Carousel
-
Content Sections
-
General Information
-
To handle the spacing between content sections, we use two different classes.
.pageSection
and.pageSectionInner
. -
.pageSection
adds an outer spacing (margin) at the top and bottom of a component. Margins of consecutive components merge into each other. -
.pageSectionInner
adds an inner spacing (padding) at the top and bottom of a component. Paddings of consecutive components doesn't merge into each other. This means that this class should be used for components with a background color that differs from the <body>. - For further information (including an visual example) please have a look at the styleguide (section 'page sections')
- Of course, it is possible to combine both classes to add a inner and outer vertical spacing.
-
To change the background color of a component to a slightly grey, just use the class
.pageSection--backgroundGrey
. This class should normally only be used in combination with.pageSectionInner
. -
Additionally you are able to add a border at the top or the bottom of a component section by adding class
.pageSection--borderTop
/.pageSection--borderBottom
-
If you want to remove the spacing at the top or the bottom of a component section just add class
.pageSection--noSpacingTop
/.pageSection--noSpacingBottom
-
If you want to add an (one column wide) indention on screens up from 1200 pixels, just add class
.pageSection--indented
- If you are searching for more general information regarding the frontend, just have a look at the styleguide. This page contains e.g. information about the grid system, typography, colors, icons, form elements, buttons, pictures, includes etc.
-
Summarized, content sections should always follow the general markup below:
<section class="pageSection"> <!-- Options as described above: Replace 'pageSection' by 'pageSectionInner' Add: pageSection--backgroundGrey, pageSection--borderTop, pageSection--borderBottom, pageSection--noSpacingTop, pageSection--noSpacingBottom, pageSection--indented --> <div class="pageSection__container"> <div class="pageSection__content"> <div class="pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed] </div> <div class="pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed] </div> [Content] </div> </div> </section>
-
To handle the spacing between content sections, we use two different classes.
-
Basic Content Section Components
(Optional) Lorem ipsum dolor sit amet
(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.<!-- Basic Content Section Components -->
<section class="pageSection"> <div class="pageSection__container"> <div class="pageSection__content"> <h2 class="pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed] </h2> <div class="pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed] </div> <div class="pageSection__buttonWrapper"> <a href="[...]" class="button button--primary button--large" aria-hidden="false" tabindex="0"> [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed] </a> </div> </div> </div> </section> -
Logo with Subheading
(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.<!-- Logo with Subheading -->
<section class="pageSection"> <div class="pageSection__container"> <div class="pageSection__content"> <h2 class="pageSection__heading"> $include('Include-Picture', 'src', '[Image path from library]', 'sm', '166', 'md', '228', 'lg', '228', 'xl', '290', 'alttext', 'Logo')$ </h2> <div class="pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed] </div> </div> </div> </section>To avoid crispy images on high-resolution screens, please make sure to include the image with (at least) double width as it will be displayed. The image will be scaled down by a fixed height via CSS and we get nice clean edges... -
Carousel containing Category Tiles (Category Carousel Include)
(Optional) Lorem ipsum dolor sit amet
(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.<!-- Carousel containing Category Tiles (Category Carousel Include) -->
<section class="pageSection"> <div class="pageSection__container"> <div class="pageSection__content"> <h2 class="pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed] </h2> <div class="pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed] </div> $include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'small')$ <div class="pageSection__buttonWrapper"> <a href="[...]" class="button button--secondary button--large" aria-hidden="false" tabindex="0"> [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed] </a> </div> </div> </div> </section>- For more detailed information and further options about the category carousel include, please have a look at the styleguide (section 'category carousel include')
-
Carousel containing Product Tiles (Product Carousel Include)
(Optional) Lorem ipsum dolor sit amet
(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.<!-- Carousel containing Product Tiles (Product Carousel Include) -->
<section class="pageSection"> <div class="pageSection__container"> <div class="pageSection__content"> <h2 class="pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed] </h2> <div class="pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed] </div> $include('Include-ProductsCarousel', 'pids', '1829525+1829525+1829525+1829525+1829525+1829525', 'format', 'normal')$ <div class="pageSection__buttonWrapper"> <a href="[...]" class="button button--secondary button--large" aria-hidden="false" tabindex="0"> [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed] </a> </div> </div> </div> </section>- For more detailed information and further options about the product carousel include, please have a look at the styleguide (section 'product carousel include')
-
Text Block
This is a heading (level 1)
This is a heading (level 2)
This is a heading (level 3)
This is a heading (level 4)
This is a heading (level 5)
This is a heading (level 6)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<!-- Text Block -->
<section class="pageSection pageSection--indented"> <div class="pageSection__container"> <div class="pageSection__content"> <h1 class="heading heading--1"> [Heading 1] </h1> <h2 class="heading heading--2"> [Heading 2] </h2> <h3 class="heading heading--3"> [Heading 3] </h3> <h4 class="heading heading--4"> [Heading 4] </h4> <h5 class="heading heading--5"> [Heading 5] </h5> <h6 class="heading heading--6"> [Heading 6] </h6> <p> [Paragraph] </p> <p> [Paragraph] </p> <p> [Paragraph] </p> </div> </div> </section> -
Icon Grid
-
Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
-
Sed: Diam nonumy eirmod tempor invidunt ut labore
-
Dolore: Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
-
Stet: Clita kasd gubergren, no sea takimata sanctus est
<!-- Icon Grid -->
<section class="pageSection"> <div class="pageSection__container"> <div class="pageSection__content"> <div class="iconGrid__row"> <div class="iconGrid__content"> <ul class="iconGrid__list"> <li class="iconGrid__listItem"> <div class="iconGrid__iconWrapper"> $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconGrid__icon')$ </div> <div class="iconGrid__text"> <strong> [Label] </strong> [Text] </div> </li> <li class="iconGrid__listItem"> [...] </li> <li class="iconGrid__listItem"> [...] </li> <li class="iconGrid__listItem"> [...] </li> </ul> </div> </div> </div> </div> </section> -
-
-
Snippets
-
Lists
-
Check List
-
Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
-
Sed: Diam nonumy eirmod tempor invidunt ut labore
-
Dolore: Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
-
Stet: Clita kasd gubergren, no sea takimata sanctus est
<!-- Check List -->
<ul class="checkList__list"> <li class="checkList__listItem"> <div class="checkList__iconWrapper"> $include('SVGIcon-Render', 'iconid', 'circle-check', 'classname', 'checkList__icon')$ </div> <div class="checkList__text"> <strong> [Label] </strong> [Text] </div> </li> <li class="checkList__listItem"> [...] </li> <li class="checkList__listItem"> [...] </li> <li class="checkList__listItem"> [...] </li> </ul> -
-
Icon List
-
Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
-
Sed: Diam nonumy eirmod tempor invidunt ut labore
-
Dolore: Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
-
Stet: Clita kasd gubergren, no sea takimata sanctus est
<!-- Icon List -->
<ul class="iconList__list"> <li class="iconList__listItem"> <div class="iconList__iconWrapper"> $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconList__icon')$ </div> <div class="iconList__text"> <strong> [Label] </strong> [Text] </div> </li> <li class="iconList__listItem"> [...] </li> <li class="iconList__listItem"> [...] </li> <li class="iconList__listItem"> [...] </li> </ul> -
-
-
Accordion
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet
<!-- Accordion -->
<ul class="accordion js-accordion" aria-label="Accordion" role="tablist"> <li class="accordion__item js-accordionItem"> <div class="accordion__itemToggle js-accordionToggle" role="tab" tabindex="0" aria-expanded="false"> <div class="accordion__itemTitle"> [Toggle Button] </div> <div class="accordion__itemIconWrapper"> $include('SVGIcon-Render', 'iconid', 'caret', 'classname', 'accordion__itemIcon')$ </div> </div> <div class="accordion__itemContent js-accordionItem__content" aria-hidden="true" role="tabpanel"> <div class="accordion__itemContentInner"> [Content] </div> </div> </li> <li class="accordion__item js-accordionItem"> [...] </li> <li class="accordion__item js-accordionItem"> [...] </li> <li class="accordion__item js-accordionItem"> [...] </li> </ul> -
-
Abo Listing Details
Section Heading
Attribute Label:Attribute ValueLorem ipsum dolor sit amet, consetetur sadipscing elitr-
Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
-
Sed: Diam nonumy eirmod tempor invidunt ut labore
-
Dolore: Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
-
Stet: Clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Zum Verschenken ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Leser werben Leser laboris nisi ut aliquip ex ea commodo consequat.<!-- Abo Listing Details -->
<h2 class="aboListing__detailsHeading"> [Section Heading] </h2> <div class="aboListing__publishing"> <div class="aboListing__publishingLabel"> [Attribute Label]: </div> <div class="aboListing__publishingValue"> [Attribute Value] </div> </div> <div class="aboListing__benefitsIntro"> [Intro Text] </div> <div class="aboListing__benefitsListWrapper"> <ul class="iconList__list"> <li class="iconList__listItem"> <div class="iconList__iconWrapper"> $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconList__icon')$ </div> <div class="iconList__text"> <strong> [Label] </strong> [Text] </div> </li> <li class="iconList__listItem"> [...] </li> <li class="iconList__listItem"> [...] </li> <li class="iconList__listItem"> [...] </li> </ul> </div> <div class="aboListing__description"> [Descriptional Text] </div> -
-