Colors

Source: fra-lsg-colors/fra-lsg-colors.md

Colors used in this project.

Example

Grid

Source: fra-lsg-grid/fra-lsg-grid.md

Row-Container

  • <div class="fra-grid-row"></div>

Green box, shows through padding of item container

Grid-Item-Container

  • <div class="fra-grid-col-M-W"></div>

Lightgreen box Where M equals the Mediaquery/Breakpint (ie. mq1 - mq5) this rule is applied from and W equals the number of columns it will span (full width equals 12).

Breakpoint Viewport width
MQ1 0 - 479px
MQ2 480px - 767px
MQ3 768px - 991px
MQ4 992px - 1279px
MQ5 1280px and up
Example

Icons

Source: fra-e-icon/fra-e-icon.md

This is a list of all icons used in project. There are icons in sizes 32x32, 24x24 and 16x16 dimensions available. You will need to provide a correct container size to style them appropriately.

Usage

<fra-e-icon class="fra-e-icon {{cssClasses}}"
  icon-id="{{iconId}}">
</fra-e-icon>

cssClasses - can be used to individualise the icon.

ìconId - is one of the IDs listed below.

Example

Lazy Image

Source: fra-e-lazy-image/fra-e-lazy-image.md

Lazy Image

Lazy-Image-Example for Full-Grid-Width and 16:9 Aspect Ratio.

Breakpoint Viewport size Image size
MQ1 0px - 479px 476x268px
MQ2 480px - 767px 767x431px
MQ3 768px - 991px 991x557px
MQ4 992px - 1279px 1279x719px
MQ5 1280px and up 1280x720px
Example

Lazy Video

Source: fra-e-lazy-video/fra-e-lazy-video.md

Descriptive Text goes here.

Example

Typography

Source: fra-lsg-typography/fra-lsg-typography.md
Example

Button

Source: fra-e-button/fra-e-button.md

Default buttons used in project.

Usage:

{{> fra-e-button
  isButton=true
  iconOnly=true
  cssClasses=this.cssClasses
  label="Button"
  iconID=this.iconID
  href="#"
  newWindow=true
}}

isButton- (optional) mark-up is rendered as button, defaults to <a>

iconOnly- (optional) mark-up is rendered as icon only

cssClasses - (optional) can be used to individualise the button. Note: icon-only needs to be set w/ class as well as boolean!

label - text label to be used on button

IconID - (optional) is one of the known icon IDs (see [#icons])

href - target URL of this link/button

newWindow - (optional) target window of link/button, defaults to _self

Example

Datepicker

Source: fra-e-datepicker/fra-e-datepicker.md

Datepicker element for reuse in different components.

Usage

allowPastSelection - (optional) disallow selection of past dates

min - (optional) date string in format yyyy-mm-dd to disallow date selection below this date

max - (optional) date string in format yyyy-mm-dd to disallow date selection above this date

{{> fra-e-datepicker allowPastSelection="{{allowPastSelection}}" min="{{min}}" max="{{max}}"}}
Example

Dropdown

Source: fra-e-dropdown/fra-e-dropdown.md

Dropdown element for reuse in different components e.g. in shop form.

Example

Highlight Headline

Source: fra-e-highlight-headline/fra-e-highlight-headline.md

The highlight headline element

Example

Horizontal Rule (hr)

Source: fra-e-hr/fra-e-hr.md

Horizontal Rule to be used with Module Heading

Example

Links

Source: fra-e-link/fra-e-link.md

This is a list of link types used in project.

Usage

{{> fra-e-link linkLabel="{{linkLabel}}" linkHref="{{linkHref}}" linkIcon="{{linkIcon}}" cssClasses="{{cssClasses}}"}}

linkLabel- displayed link text

linkHref - target URL of this link

linkIcon - (optional) is one of the known icon IDs (see [#icons])

cssClasses - (optional) can be used to individualise the link.

Example

List

Source: fra-e-list/fra-e-list.md

Render a Decription List <dl> with alternating background colors. Links in description entries have two states: Icon only in MQ 1-3 and Default Link with Icon in MQ 4-5.

Use w/ data JSON following this structure

{
  "definitions": [
    {
      "label": "Simple Term",
      "desc": {
        "text": "Simple Description",
        "ccsClasses": ""
      }
    },
    {
      "label": "Term with Link",
      "link": {
        "linkLabel": "http://www.lufthansa.com/de/",
        "linkHref": "http://www.lufthansa.com/de/",
        "cssClasses": "fra-e-list__desc-link__link",
        "linkIcon": "fra-icon-arrow-right-extern",
        "iconID": "fra-icon-language"
      }
    },
    {
      "label": "Term with Footnote",
      "desc": {
        "text": "Description with Footnote",
        "footnote": "#ref1"
      }
    }
  ],
  "footnotes": {
    "ref1": {
      "text": "Footnote content"
    }
  }
}

Note the "link": {} structure where two icons are set, "linkIcon" sets the icon for the Default Link used in MQ 4-5 and iconID sets the icon used as a replacement in MQ 1-3. Also note the footnote structure w/ two entries, one as a reference in the description footnote and one as a seperate list using the reference as key. Foototes are then rendered w/ the help of CSS counters to keep track of the references.

Example

Print

Source: fra-e-print/fra-e-print.md

Print button used within Content Navigation.

Example

Radio

Source: fra-e-radio/fra-e-radio.md

Radiobutton Group, for example used in fra-m-car-park-booking, flight-search etc.

Example

Table

Source: fra-e-table/fra-e-table.md

This is a generic responsive table. In MQ1 and MQ2 content of a row will be displayed as cards. Optional Labels per entry are achieved by setting data-title on each cell.

Example

Timepicker

Source: fra-e-timepicker/fra-e-timepicker.md

Timepicker element used in module fra-m-date-time-accordion.

Example

Accordion

Source: fra-m-accordion/fra-m-accordion.md

Accordion template to be included in components.
Accordion is used as a content-component (use modifier "fra-m-accordion--white-section-header" for consistent styling) and within the footer on mobile MQs.

Example

Accordion Container

Source: fra-m-accordion-container/fra-m-accordion-container.md

Accordion used for editorial contents. Components that can be included: Text-Image, Image, Richtext, Download-list, Richtext-Table.

Accordion-Container is also used for locations-template with full-width-list and brand-module.

Example

Airline

Source: fra-m-airline/fra-m-airline.md

Implementation of fra-e-list with sample data for airlines.

Example

Airlines Accordion

Source: fra-m-airlines-accordion/fra-m-airlines-accordion.md
Example

Benefits

Source: fra-m-benefits/fra-m-benefits.md

Component showing a list of "benefits" as check-icon and text.

Example

Brand Module

Source: fra-m-brand-module/fra-m-brand-module.md

Collection of brand images used in location template.

Example

Car Park Booking

Source: fra-m-car-park-booking/fra-m-car-park-booking.md

Car park booking component which is included in Jumbotron (Slider, Non-Slider). This component can be used standalone and can also be a part of the Flight-Park-Search-Widget.

Example

Components Container

Source: fra-m-components-container/fra-m-components-container.md

Container-Wrapper for two or more components without any space between each other (e.g. offer-teaser and benefit-module).

Example

Contact Teaser

Source: fra-m-contact-teaser/fra-m-contact-teaser.md

Contact teaser component with image and contact details, including phone and email.

If there are more teasers that won't fit side by side a slider will be added automatically, see example: Teaser Slider.

Example

Content Navigation

Source: fra-m-content-navigation/fra-m-content-navigation.md

Content Navigation containing back and print button.

Example

Cookie Layer

Source: fra-m-cookie-layer/fra-m-cookie-layer.md

This is the sticky cookie-layer, positioned on page's bottom.

Example

Cta

Source: fra-m-cta/fra-m-cta.md

Standalone-Button-Component that is positioned within the grid. This CTA is only available as a primary button without an icon.

Example

Date Input

Source: fra-m-date-input/fra-m-date-input.md

Date input with datepicker (as used in "Wartezeiten")

Usage

allow-past-selection - (optional) disallow selection of past dates (see #Datepicker)

min - (optional) date string in format yyyy-mm-dd to disallow date selection below this date (see #Datepicker)

max - (optional) date string in format yyyy-mm-dd to disallow date selection above this date (see #Datepicker)

preset-date - (optional) date in yyyy-mm-dd to pre-fill the input with. Or use the special value today to pre-fill with the current date

<fra-m-date-input 
  allow-past-selection 
  min="yyyy-mm-dd" 
  max="yyyy-mm-dd" 
  preset-date="today|yyyy-mm-dd">
</fra-m-date-input>
Example

Date Time Accordion

Source: fra-m-date-time-accordion/fra-m-date-time-accordion.md

Date-time-Accordion, used for example in car-park-booking-component.

Example

Datepicker Text

Source: fra-m-datepicker-text/fra-m-datepicker-text.md

The Datepicker-Text component (e.g. 'Wartezeiten'). Extends functionality of fra-m-expandable-container.

Usage

variantMid- (optional) set true to display the box in orange

variantHigh - (optional) set true to display the box in red

{{> fra-m-datepicker-text}}
{{> fra-m-datepicker-text variantMid=true}}
{{> fra-m-datepicker-text variantHigh=true}}
Example

Download List

Source: fra-m-download-list/fra-m-download-list.md

List with download-Items. Can be used standalone or within an Accordion-Section.

Example

Expandable Container

Source: fra-m-expandable-container/fra-m-expandable-container.md

Container with several editorial components. Collapsed by default, can be expanded/collapsed by click on plus/close-button. Fuctionality can be extended by other components (e.g. fra-m-datepicker-text).

Example

Flight Detail

Source: fra-m-flight-detail/fra-m-flight-detail.md

Flight detail list, data and labels given by JSON.

Example

Flights

Source: fra-m-flights/fra-m-flights.md

Table with flight info. Loads 10 entries initially and on each click on button below. Entries link to Flight Detail. Includes fra-m-flights-search to filter flights.

Example

Flights Search

Source: fra-m-flights-search/fra-m-flights-search.md

Search for flights. Has two implementations:

Overview

Search form acts as filter for flights. Input is collected and on input change an event is despatched that is handled by flights-component to generate a request. If a query is detected in URL, these settings are applied to the form and used for an initial request, otherwise the form uses default values (flighttype=departures&time=<now>).

See Flights.

Tab (Widget)

Form preselects filter by handing over a search string via URL to overview. An action-attribute on parent form is required to link to overview and apply selected filter.

See Tab.

Parameters

On form

Flight search behaves differently based on action presents.

Example:
 <form class="fra-m-flights-search__form" action="overview-flights.html" method="GET">

If action-attribute is present, it will submit all formdata to provided URL.

On input

Actual search input (fra-m-flights-search-input) takes one data-attribute

Example:
<fra-m-flights-search-input class="fra-m-flights-search-input" data-api-url="https://rh.dev.fraport.pvqa.net/en/_jcr_content.flights.json/search">

data-api-url - URL of suggestion API, should take q parameter via get and return JSON with {data:[{"display": <Displayed Label>, "type": <Type>", "key": <Key>}]}

Example

Flightupdate

Source: fra-m-flightupdate/fra-m-flightupdate.md

The module is used by the user to sign up for push information. The user can choose between Email / FB-Messenger / Twitter.

Example

Flyout

Source: fra-m-flyout/fra-m-flyout.md

Flyout

Example

Gallery

Source: fra-m-gallery/fra-m-gallery.md

This component is used for showing images within a gallery. The images can be slided through. On click an overlay is opened containing the big image versions within another slider.

Example

Image

Source: fra-m-image/fra-m-image.md

Image component that opens overlay on button click.

Example

Jumbotron

Source: fra-m-jumbotron/fra-m-jumbotron.md

Jumbotron Slider used on top of startpage and Jumbotron used on top of some content pages.

Example

Link List

Source: fra-m-link-list/fra-m-link-list.md

This is a configurable list of links.

Usage

{{> fra-e-link-list list=list_of_links}}

list_of_links - reference to an array of links (ie. reference to JSON)

links consists of:

classes- (optional) any additional classes to add to <a> element

linkLabel- displayed link text

linkIcon - (optional) is one of the known icon IDs (see #icons)

linkHref - target of this link

Example

Location List

Source: fra-m-location-list/fra-m-location-list.md

List for Location-Template. Can be used as a standalone-component and within the accordion-container-component.

Example

Main Navigation

Source: fra-m-main-navigation/fra-m-main-navigation.md

Main Navigation as a part of the header.

Example

Module Heading

Source: fra-m-module-heading/fra-m-module-heading.md

Heading Element for Modules

Example

Next Best Activity

Source: fra-m-next-best-activity/fra-m-next-best-activity.md

The Next Best Activity component.

Example

Offer Teaser

Source: fra-m-offer-teaser/fra-m-offer-teaser.md

Teaser for offering anything. Can be used standalone or in combination with the benefits-module within the components-container.

Example

Overlay

Source: fra-m-overlay/fra-m-overlay.md

Generic Overlay for reuse in Components.

Example

Page Description

Source: fra-m-page-description/fra-m-page-description.md

Introduction-Text on overview pages (given by page properties, no richtext).

Example

Product Teaser

Source: fra-m-product-teaser/fra-m-product-teaser.md

This is the product teaser component with image, title, price and link. Optional there is a badge, former price and price info.

Product teasers are used within an teaser overview container. See Overview Teaser (load more).

Example

Promotion Teaser

Source: fra-m-promotion-teaser/fra-m-promotion-teaser.md

Promotion teaser is used to place banners on page. The image has a link and a short text (e.g. "Anzeige") above. There are two types of banners:

Default Banner Super Banner
MQ1: ratio 3:4 MQ1: ratio 1,2:1
MQ2-5: ratio 3:1 MQ2-5: ratio 8,1:1
Example

Quicklink Teaser

Source: fra-m-quicklink-teaser/fra-m-quicklink-teaser.md

Group of links to important pages to be positioned beneath the jumbotron on the homepage.

Example

Richtext

Source: fra-m-richtext/fra-m-richtext.md

Richtext-Wrapper with styling on tags for AEM Richtext editor. Allowed Components so far: 3 types of headlines, paragraphs with inline-links, unordered lists, link and button.

Example

Richtext Table

Source: fra-m-richtext-table/fra-m-richtext-table.md

Editorial table that can also be used in richtext and accordion.

Example

Search

Source: fra-m-search/fra-m-search.md

Search form opening in an overlay (triggered by search-icon in meta-navigation).

Example

Search Result Overview

Source: fra-m-search-result-overview/fra-m-search-result-overview.md

List of search result with load-more button to expand list.

Example

Search Result Search

Source: fra-m-search-result-search/fra-m-search-result-search.md

Search bar and linklist used in search result page.

Example

Search Result Teaser

Source: fra-m-search-result-teaser/fra-m-search-result-teaser.md

Search result teaser.

Example

Shop Accordion

Source: fra-m-shop-accordion/fra-m-shop-accordion.md

Shop Overview inside an Accordion.

Example

Slider

Source: fra-m-slider/fra-m-slider.md

This is the default Slider/ Carousel component.

To change default control button color from Blue to White, add modificator class fra-m-slider--controls-bright to class fra-m-slider.

Example

Social Media Links

Source: fra-m-social-media-links/fra-m-social-media-links.md
Example

Sticky Page Header Container

Source: fra-m-sticky-page-header-container/fra-m-sticky-page-header-container.md

A sticky wrapper for the page header component including the traffic notifications

Example

Tab

Source: fra-m-tab/fra-m-tab.md

This is a Tab module that can be used in in the jumbotrons of the startsite and overviewsite. It can contain car park the booking and flightsearch modules.

Example

Teaser Overview (Load more)

Source: fra-m-teaser-overview/fra-m-teaser-overview.md

Wrapper Component for teasers like text-image or product to provide a grid view of teasers with a "show more" option. If there are more than 6 teasers on MQ4 - MQ5, more than 4 teasers on MQ3 or more than 2 teasers on MQ1 - MQ2 a plus button is added. On click there are loaded three more on MQ4 - MQ5 and two more on MQ1 - MQ3.

Example

Teaser Slider

Source: fra-m-teaser-slider/fra-m-teaser-slider.md

Slider component with text-image-teasers.

Example

Text Image

Source: fra-m-text-image/fra-m-text-image.md

Text Image component with overlay to expand images.

Example

Text Image Teaser

Source: fra-m-text-image-teaser/fra-m-text-image-teaser.md

Teaser component to be used in a carousel or a grid-list

Example

Video

Source: fra-m-video/fra-m-video.md

Video component with grid using fra-e-lazy-video.

Example

Page Footer

Source: fra-m-page-footer/fra-m-page-footer.md

Page footer

Example

Page Header

Source: fra-m-page-header/fra-m-page-header.md

Page header

Example

Page Notification

Source: fra-m-page-notification/fra-m-page-notification.md

Page notification.

Example

Shop

Source: fra-m-shop/fra-m-shop.md

Organism combined from filter and accordion to display shops.

Example

RH Styleguide

Atoms
Colors Grid Icons Lazy Image Lazy Video Typography
Elements
Button Datepicker Dropdown Highlight Headline Horizontal Rule (hr) Links List Logo Print Radio Table Timepicker
Modules
Accordion Accordion Container Airline Airlines Accordion Benefits Brand Module Car Park Booking Components Container Contact Teaser Content Navigation Cookie Layer Cta Date Input Date Time Accordion Datepicker Text Download List Expandable Container Flight Detail Flights Flights Search Flightupdate Flyout Gallery Image Jumbotron Link List Location List Location Logo Main Navigation Module Heading Next Best Activity Offer Teaser Overlay Page Description Product Teaser Promotion Teaser Quicklink Teaser Richtext Richtext Table Search Search Result Overview Search Result Search Search Result Teaser Shop Accordion Slider Social Media Links Sticky Page Header Container Tab Teaser Overview (Load more) Teaser Slider Text Image Text Image Teaser Video
Organisms
Page Footer Page Header Page Notification Shop
No matches.
Generated by Stylemark