Back to overview

Text and image elements

Text with 1-column image

Text with 1-column image (left-aligned)

Text with 1-column image (left-aligned)

Back to top

Text with 2-column image

Text with 2 column image (right-aligned)

Text with 2 column image (right-aligned)

Back to top

Image XXL or text only

Image XXL or text only

The image XXL is a three column image with the size 676 pixel x variable.

Back to top

Lists – Numbering

Lists – Numbering
Back to top

Lists – Bullet points

Lists – Bullet points
Back to top

Video with text

Video with text
Back to top

Benefit communication

Benefit communication
Back to top

E-learning with text

E-learning with text
Back to top

Image with text and downloads

The image width is 220 pixels and its height is variable.

Image with downloads
Back to top

Image with text and link list

The image width is 220 pixels, and its height is variable.

Image with link list
Back to top

Interactive flash – embedded

Interactive flash embedded

The dotted line marks the top and bottom edge of the interactive flash. Its width is 676 pixels and its height is variable.

Back to top

Listing section with connected item

A listing section is typically used for the news overview page. The image has a fixed size of 220 x 124 pixels. It is automatically resized to 188 x 106 pixels.

Listing section with connected item
Back to top

Image and text with single link and frame

This module can be used with or without a grey gradient.

Image and text with single link and frame
Back to top

HIGHLIGHTS single link (HIGHLIGHTS only)

HIGHLIGHTS single link (HIGHLIGHTS only)
Back to top

HIGHLIGHTS gallery (HIGHLIGHTS only)

HIGHLIGHTS gallery (HIGHLIGHTS only)
Back to top

Text and call-to-action button

Text and call-to-action button
Back to top

Text and image with single link and download

The image with is 200 pixels, the height is variable.

Text and image with single link and download
Back to top

Testimonial gallery

The image width is 220 pixels, its height is 124 pixels. It is automatically resized to a width of 188 pixels and a height of 108 pixels.

Testimonial gallery
Back to top

Testimonial detail view

The image width is 220 pixels, its height is 124 pixels. It is automatically resized to a width of 188 pixels and a height of 108 pixels.

Testimonial detail view

Image gallery on a subpage

This image gallery is placed within the content area. When clicking on one of the thumbnails a layer with enlarged images is opened

The arrow icon is centered. The size of the thumbnails is 85 x 85 pixels.

Image gallery on a subpage
Back to top

Interaction concept

Action 1

If the arrow buttons are offered the user can “navigate” to the offered thumbnail images.

With click on an arrow button the whole view is changed. That means six new images replace the six visible images.

  • Carousel effect of the image gallery
  • Animation: horizontal movement of images by container width
  • Transition: easeOutCubic
  • Time: 0.5 seconds
  • Status bar: no animation, changes on click
Action 2

When clicking on a thumbnail the background is shaded and simultaneously the layer opens. The layer is centered.

Background:

  • Animation: Alpha from 0 to 100 %
  • Time: 0 seconds
  • Layer:
  • Animation: Alpha from 0 to 100 %
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
Action 3

With clicking on the next or back links at the top left of the zoomed in image, the user can navigate through the offered images. Because images can vary in their format (portrait, square and landscape) the layer automatically adjusts to the offered image format.

  • Change of width and height according to image format
  • Animation: change of width and height
  • Transition: easeOutCubic
  • Time: 0.5 seconds

Image galleries on subpages – enlargement

This type of enlarged image gallery may contain images in different sizes. The user can navigate with the “back“ and “next“ function. The layer adapts automatically according to the size of the selected image. The maximum width is 896 pixel and the maximum height is 400 pixel.

Image gallery enlargement

Interaction concept

This describes the behavior in “zoom-view” with changing image formats.

With clicking on the next or back links at the top left of the zoomed in image, the user can navigate through the offered images.

Because images can vary in their format (portrait, square and landscape) the layer automatically adjusts to the offered image format.

Change of width and height according to image format

  • Animation: change of width and height
  • Transition: easeOutCubic
  • Time: 0.5 seconds

Image gallery on a product detail page

In this gallery different media types can be combined – product images, videos and 3D-views. The size for product images and 3D-view is 408 x 408 pixels, the size for video is 640 x 360 pixels.

The enlarged image, as well as the thumbnails, is centered horizontally. At mouse-over the thumbnail appears with a black frame.

Image gallery on a product detail page

Image and video enlargement

Image and video enlargements can be displayed with or without a headline on top and with or without an image caption below the image or video. Images can have different sizes while a video enlargement has a fixed size. In case the height of the image is bigger than the height of the screen, the browser scrollbar can be used. The maximum size of the layer is 928 pixels. The maximum size of an image in a layer is 896 x 672 pixels.

Back to top

Layer with functional elements

Layer with functional elements
Back to top

Layer with content elements

The is fixed size of the layer is 726 x 500 pixel.

Layer with content elements

Interaction concept:

If the user clicks on a defined link the background is shaded and simultaneously the layer opens.

Background

  • Animation: Alpha from 0 to 100 %
  • Time: 0 seconds

Layer

  • Animation: Alpha from 0 to 100 %
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
Back to top

Tooltip

The page background is displayed with a shadow (multiply 30 %, distance three pixels, size 5 pixels). The color of the tooltip border is #ccd0d2.

Tooltip
Back to top

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines