This VI Frontend Framework is a framework to build state of the art websites with an approved UI look and feel. It provides ready-to-use layouts, design and functionaliy and incorporates many proven practices used to build excellent websites. It has an adaptive / responsive design, is build mobile first and while it makes use of modern browser's capabilities, it also works on browsers as ancient as Internet Explorer 9. We hope to save you and your team hundreds of hours of work - Hours which you can invest in better content and maybe even into helping us improve this framework.

storytelling

Toralf Haag im Interview

Digitales Portrait

Robotics

Panda und die strategische Partnerschaft mit Franka-Emika

layout

Home Page

The home page layout structure (no breadcrumbs)

Sub Page

The layout structure of a sub page

External Hub Home Page

The home page layout structure with keyvisual for the anniversary microsite

External Hub Sub Page

The layout structure of a sub page with keyvisual for the anniversary microsite

Grid Layout

The grid layout variants

iFrame Layout

The iFrame layout variants

Microsite Layout

Diffrent Header for Microsites without search, breadcrumbs or secondary navigation (login/contact)

Landing page Layout

Header with jumpMark navigation for landing pages

iFrame Layout (Lightbox-Template)

The iFrame layout (used as Lightbox-Template) with normal content an jumpmarks as test case

basic

Headlines

h1 and h2 with subline

Hero Image

Component Hero Image

Quote

The quote component

Logo within section

Section with a logo placed in the upper right corner

snackable news

The snackable news component

Social Media Stream

Component Social Media Stream

Text Card Rows

Rows with 3 or 4 text cards next to each other

Social Media Sharing Buttons

sticky sharing social media buttons

Buttons

Primary, secondary and special buttons styled for different states

Lists Bullets, Numeric

Unordered listing with bulletpoints Ordered numeric listing of 1-n list elements

Download-/Link-List component

List of links, Simple list of downloads, Downloads with picture

Image

Image component

Single Map Marker

google map with position marker

Event Teaser

Event Teaser always shows one single event

News and Social Media Stream Mixed

Variant of Social Media Stream with News Teaser Element

Location List

location List based on Table Component

Cookie Policy

The cookie policy component

Need Analyzer

Component Need Analyzer

medium

Text / Image and Text / Video

Component used for most article pages.

Teaser

Teaser component for simple teaser, teaser rows and image teaser

Teaser News

Teaser component for News teasers

Accordion

The accordion component

Image accordion

The image accordion component (expands horizontally)

Tabs

The tabs component

Gallery Pagination

Displays the difference between dotted and numbered Pagination

Gallery Captions

Shows main, individual and no caption component variants

Jump Marks

Shows headline jump marks

Contact

Shows main, contact component

Filtered List

A generic filtered list

Simple List

A generic simple list with load-more feature

Filtered List for Image Database

A generic filtered list

Global Search Results

global search using custom search google API

Contact and Location List

List of contacts and locations (optionally filtered)

References List

References List with filter and load more option.

Figure

A number key visual with descriptive text. Number size will be shown as large as possible

Internationalization Hint

A hint that lets the user know that the current page might not be fully available in the selected language

Interactive Feature English

Graphic with interactive elements as jumpmarks to other content on the page

Interactive Feature German

Graphic with interactive elements as jumpmarks to other content on the page

Benefit

Visual surrounded by benefits.

Benefit (landscape image - 4 benefits)

Landscape visual surrounded by 4 benefits.

Benefit (landscape image - 5 benefits)

Landscape visual surrounded by 5 benefits.

Benefit (landscape image - 6 benefits)

Landscape visual surrounded by 6 benefits.

Benefit (portrait image - 4 benefits)

Portrait visual surrounded by 4 benefits.

Benefit (portrait image - 5 benefits)

Portrait visual surrounded by 5 benefits.

Benefit (portrait image - 6 benefits)

Portrait visual surrounded by 6 benefits.

Benefit (round image - 4 benefits)

Round visual surrounded by 4 benefits.

Benefit (round image - 5 benefits)

Round visual surrounded by 5 benefits.

Benefit (round image - 6 benefits)

Round visual surrounded by 6 benefits.

complex

Stage

Animated Stage component

Stage with full opacity

Animated Stage component

Video-Stage

Animated Stage component with a background video

Video-Stage (Background & Autoplay)

Stage component with a background video that plays automatically

Video-Stage (Background & Autoplay) V2

Stage component with a background video that plays automatically

History Feature - Chinese

the Chinese version of the interactive history feature

History Feature - English

the English version of the interactive history feature

History Feature - German

the German version of the interactive history feature

History Feature - Portuguese

the Portuguese version of the interactive history feature

Result List - news

Result list for snackable news

Result List - teaser

Result list for teaser (story overview)

Result List - single select

Result list with single select filter

Video within articles

Videoplayer inside default articles

Alerts and notifications

Various types of alerts and notifications

Form

Form with diverse inputs

Form in container

Form with diverse inputs in container component for highlighting

Form (hubspot)

Theming for Forms generated from hubspot

Multi-steps form

Form with diverse inputs splited in logical steps

Table

Generic table

Filtered Map

A Map and Filter to find References

Location Finder

A map and filters to find locations

Product and Service Finder

Product and Service Finder

Product and Service Finder Search Results

Product and Service Finder Search Results

Video

Several video components

Vzaar Video Player for China

An extra player for china

myVoith

MyVoith global frame

MyVoith frame based on VCR

App Management

Demo MyVoith App Management

App Management - no apps

Demo MyVoith App Management (No apps available)

App Management - registration

Demo MyVoith App Management - App Registration

User registration

Demo MyVoith user registration

Dashboard

MyVoith dashboard with draggable widgets

Dashboard - no apps

MyVoith dashboard with draggable widgets

Alerts and notifications

Various types of alerts and notifications based on liferay generated markup

App Store

App Store component

demo

Icons

The custom Iconset Webfont

Demo Content

some demo content

Demo of Homepage

external hub homepage

Demo of Story Detail page

external hub story detail

Demo of Products

Retarders - Bus 2018

Demo Language Selector

Language Selector with only one available language

Demo of Home

home demo page

Demo of Home Variant 2

another home demo page variant

Demo of OpenText Buttons (text/image)

positioning of OpenText buttons in a text/image component

Demo of OpenText Buttons (gallery)

positioning of OpenText buttons in a text/image component

Demo Content Migration 'Shift'

Demo of fixes for shifting stage of product pages

Demo filtered lists

Demo of different filtered Lists and fail states

Demo Tracking

Demo content showcasing event tracking

Demo Tracking (Filtered List)

Demo content showcasing event tracking with a filtered list

Demo Tracking (Form)

Demo content showcasing event tracking with form

Demo Tracking (Simple Form)

Demo content showcasing event tracking with very simple form

Demo Tracking (with Social Sharing)

Demo content showcasing event tracking

Demo Tracking (Video)

Demo content showcasing event tracking for videos

Demo Scroll Section

Demo of pmPortal Scroll Section

Demo Scroll Section with Mixed SVG/image/video

Demo of pmPortal Scroll Section with a Mix of Animated SVG Background, Videos and Images

Demo Scroll Section with SVG

Demo of pmPortal Scroll Section with Animated SVG Background

Demo Hubspot

Demo of Connecting the Voith Form component with Hubspot