Colors used in this project.

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/Breakpoint (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

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.

Lazy Image

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

Breakpoint | <span style="color

: #82af32;">Viewport size	Image size
MQ1	0px - 479px
MQ2	480px - 767px
MQ3	768px - 991px
MQ4	992px - 1279px
MQ5	1280px and up

Descriptive Text goes here.

Page footer

VIP Page footer

Page header

VIP Page header

CC Page header

Page notification.

Organism combined from filter and accordion to display shops.

@TODO : Descriptive Text goes here.

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

Generic <input type=checkbox> provides data-attributes fo label and value.

Usage

name - parameter name used in form submit

value - value to be used in form submit

label - text label to be shown

cssClasses - (optional) any CSS classes added to wrapping <label> element

checked - (optional) set to "checked" if box should be checked and checkmark should be active

disabled - (optional) set to "disabled" if input should be deactivated

{{> fra-e-checkbox name="{{name}}" value="{{value}}" label="{{label}}" checked="checked" disabled="disabled"}}

Disclaimer at usually placed at the end of component / page content area.

Date and Time Picker

Design

[https ://xd.adobe.com/view/c7573a08-b1a2-46dd-8bdc-499d08b9daf5-9204/grid/]

Usage

<fra-e-datetime-picker> element needs one or two <fra-e-datetime-picker__filed> elements inside it. Having two elements means user can select a start and end date (range mode).

<fra-e-datetime-picker__filed> Attributes

type

Can be "date" or "datetime". datetime means there is a time picker in the UI as well. And the custom element will return dates with a time part.

value

The current value. It has a YYYY-MM-DD format (ISO8601) for the date type (similar to input type=[date]) and a YYYY-MM-DDTmm :hh format (e.g. '2022-03-31T08 :22') for the datetime type (similar to input type=[datetime-local]). It can also have placeholder values which will be replaced with the current date / time. for example `value="{TODAY}".

{TODAY}	will be replaced with the current date
{NOW}	will be replaced with current date containing the time value. (should be used with the datetime type)
{TODAY-1d}	yesterday
{TODAY+7d}T12:00	one week from today at noon

min (optional)

Earliest date that the user can choose from. Placeholder values cn be used.

• the min/max restriction from the first fra-e-datetime-picker__filed element is applied to the datepicker. (start, end have the same restriction in the range mode)
• the time part is currently ignored.

max (optional)

Last date that the user can choose from. Placeholder values cn be used.

aria-label

Label floating above the filed describing what date it is. e.g. "Departure".

time-label

Label shown in the dialog beside the time picker. (for type=datetime)

form-field-name (optional)

If field is placed in a form, its value will be found in the formDate under this name.

date-form-field-name (optional)

(usefull for [type=datetime]) If field is placed in a form, its date part will be found in the formDate under this name.

time-form-field-name (optional)

(usefull for [type=datetime]) If field is placed in a form, its time part will be found in the formDate under this name.

disabled (optional)

If set, the field is ignored by the datetime picker. i.e. when one of two fields are disabled, the date picker allows selecting on date (no range mode any more). When both or the only filed is disabled, the datepicker UI won't open.

It also won't be in a formDate

<fra-e-datetime-picker> Properties

Other components should not read directly from the <fra-e-datetime-picker__filed> attributes and properties, but rather use the properties of the <fra-e-datetime-picker>.

.date

Returns the current selected date for a non range mode (only one filed).

formats : "YYYY-MM-DD" for type=date, "YYYY-MM-DDTmm :hh" for type=datetime

.start

Returns the current selected date for the start date in range mode (two filed)

.end

Returns the current selected date for the end date in range mode (two filed)

.min

Returns the min allowed date

.min

Returns the max allowed date

.validity

Current use cases have always a default date, so there isn't any scenario were the field is empty and invalid.

.isRange (readonly)

user can select a start and end date

isDateTime (readonly)

Fileds are of type datetime

Example

<fra-e-datetime-picker class="fra-e-datetime-picker">
  <fra-e-datetime-picker__field class="fra-e-datetime-picker__field"
    type="datetime"
    aria-label="Hinflug am"
    time-label="Start:"
    value="{NOW}"
    min="{TODAY}"
    max="2022-12-31"
    form-field-name="start-datetime"
    tabindex="0"
    >
  </fra-e-datetime-picker__field>

  <fra-e-datetime-picker__field class="fra-e-datetime-picker__field"
    type="datetime"
    aria-label="Rückflug am"
    time-label="Ende:"
    value="{NOW+1d}"
    min="{TODAY}"
    max="2022-12-31"
    date-form-field-name="end-date"
    time-form-field-name="end-time"
    >
  </fra-e-datetime-picker__field>
</fra-e-datetime-picker>

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

Custom element which lazy loads FB SDK and initializes it, it would then automatically pick up the markup for the ["send to messenger" plugin](https ://developers.facebook.com/docs/messenger-platform/discovery/send-to-messenger-plugin/) and render a CTA which will connect users FB messenger to FRAnky chat bot which will send information regarding the Flight.

Displays GetYourGuide Widget

The highlight headline element

Horizontal Rule to be used with Module Heading

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.

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.

Fraport Main Logo

Print button used within Content Navigation.

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

Link to <main> content for accessibility (keyboard user) purposes.

Link is visually hidden until focused. It should always be the first focusable element in the document.

A wrapper component that gives two inputs the functionality to swap their value.

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.

Clickable tags used in Location Filter

Design

[https ://xd.adobe.com/view/94155ac4-76f0-4d34-9749-6a548bf54f09-c146/specs/](https ://xd.adobe.com/view/94155ac4-76f0-4d34-9749-6a548bf54f09-c146/specs/)

Usage

<fra-e-time-picker> element needs one or two <fra-e-time-picker__field> elements inside it. Having two elements means user can select a start and end date (range mode).

Attributes

value

The current value. It has a HH-MM format for time. for example value="{NOW}". This will be replaced with current time value.

disabled (optional)

If set/ the field is disabled, the timepicker UI won't open.

Properties

Other components should not read directly from the <fra-e-time-picker__field> attributes and properties, but rather use the properties of the <fra-e-time-picker>.

Toggle between two options

Custom element which loads airport ai SDK and initializes it.

Parameters:

• client-id

Basic functionality for a back button

Basic functionality for a logout button which triggers the "gigya" SSO logout.

Only visible when user has already logged-in.

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.

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.

VIP

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

Component to filter airlines depending on terminal, hall and so on.

An autosuggester input for Airports.

Usage

data-value if is setted, set the initial airport value.

VIP Module

shows a background image and displays a banner with headlines, text and cta on top

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

Parameters:

• button
• reverse
• links
• headline

The flight booking always links to the domain "flights.frankfurt-airport.com" and appears only on the overview page.

Configuration

You can change the values of the following data attributes for i18n purpose:

data-pax-chd-error The error message to be shown when more toddlers than adults are selected.

data-pax-error The error message to be shown when more than 9 travelers are selected.

data-pax-input-text The text to be shown inside the passenger input.

Collection of brand images used in location template.

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.

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

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.

Content Navigation containing back and print button.

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

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

VIP cta

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}}

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

VIP

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).

Flight bookmark used within Content Navigation.

Flight detail list, data and labels given by JSON.

Component used on flight detail page to show information of the selected flight or train connection

Flight Info Navigation containing back, print and flight bookmark button.

@TODO : Descriptive Text goes here.

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.

Displays selected flight type and lays over page-jumbotron. The text changes when Arrivals/ Departures Tab is clicked from flights overview.

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>}]}

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

Floating (sticky) button in the bottom right corner on any page to link to map.

VIP

Flyout

List of some links as part of the footer.

A wrapper component for legacy form that gives css classes to old markup for new styles. Take a look [hier](http ://localhost :8015/pages/form.html)

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.

iFrame wrapper w/ fixed ratio for external legacy content. If fra-m-iframe--mobile-button is set, an external link (styled as button) will be shown in mq1.

Image component that opens overlay on button click.

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

VIP Jumbotron

Parameter startpage=true is needed

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

Component to filter locations depending on terminal, hall and so on.

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

Logo for Location-Template (fra-e-lazy-image with border).

Main Navigation as a part of the header.

Heading Element for Modules

The Next Best Activity component.

Input type number with increment and decrement buttons.

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

Background Color Options

• green (default)
• blue
• orange

Parameters:

• apiOverviewUrl
• apiDetailsUrl

Generic Overlay for reuse in Components.

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

Account module which shows the park bookings of the current User

Design

[https ://xd.adobe.com/view/1af4ac0f-729e-4163-b107-9fc4be7b6a90-4fa7/grid]

Feedback Popup component

Parameters:

• feedback-url: URL used as link for Feedback button
• user-consent: Used to override usercentrics consent decision, or for testing purposes in dev environment

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).

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

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

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.

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

@TODO : Descriptive Text goes here.

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

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

Search bar and linklist used in search result page.

Search result teaser.

Wrapper Component to embed sherpa trip element which shows travel restriction information such as covid testing, visa etc.

sherpa JS will be loaded after cookie consent is set.

Only Visa information. e.g. on Flight Process steps

Shop Overview inside an Accordion.

Navigation with links to top level pages used in larger MQs instead of the main navigation.

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.

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

A two-column link list with icons for navigation.

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.

Tabbar to toggle between different components

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.

Slider component with text-image-teasers.

VIP component to show a gallery with module heading on top. There are multiple versions of this component enabled by following parameters:

• backgroundImage shows a red overlay and a background image
• cta enables the cta button beneath the gallery
• labels shows a label as overlay on each gallery slide

Text Image component with overlay to expand images.

VIP

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

VIP

Shows train departures for given time

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

A variation of the generic slider meant to be used on VIP page.

Teaser for waiting times anything. Can be used standalone.

Breadcrumb component showing a hierarchical list of pages leading to the current page.

Currently used on the Account pages.

Design

[AdobeXD](https ://xd.adobe.com/view/1af4ac0f-729e-4163-b107-9fc4be7b6a90-4fa7/screen/6c718482-a129-44a0-9d40-c32af2cd8da3/specs/)

Component to load based on user user login state.

Component to load and render (SAP's) gigya screens for user login, or loading protected content only when the user is logged in.

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

Component part of header which allows the user to have access to SSO relevant ctas