You are using Internet Explorer 11 or earlier, this browser is no longer supported by this website. We suggest to use a modern browser.

UCP Pattern Library
UCP Pattern Library
UCP Pattern LibraryUCP Pattern LibraryUCP Pattern Library
  • Deutsch
  • Pattern Library
  • flexible
    • Deutsch
  • Home
  • Patterns by type
  • Content > Media
  • Image (03_01)

Image (03_01)

The "Image" module can be used to display an image on article detail pages. It is made of the image itself and an optional caption. With the Lightbox, it is possible to display the image enlarged.

Alternatively, animated cinemagraphs can also be integrated via the "Flixel" service.

Example page view

The module is marked in orange

Image - Module view

Image in the content area

This is how the module works

The module consists of the following components:
1. Headline
optional
2. Image or Cinemagraph (Flixel)display in full image width also possible
Cropped image- in landscape format: width 450px (mobile), width 886px (tablet/desktop), width 1334px (bottom/desktop)
- in portrait format: height 600px (mobile), height 664px (tablet/desktop), height 750px (bottom/desktop)
Image descriptionoptional
Link to lightboxoptional

This is how the module works

The module consists of the following components:
1. Headline
optional
2. Image or Cinemagraph (Flixel)display in full image width also possible
Cropped image- in landscape format: width 450px (mobile), width 886px (tablet/desktop), width 1334px (bottom/desktop)
- in portrait format: height 600px (mobile), height 664px (tablet/desktop), height 750px (bottom/desktop)
Image descriptionoptional
Link to lightboxoptional

The module can be used in the following templates and page areas:

Startpage
stage
content
Content Page
stage
main content
right
bottom
Flexible Layout
full-width
default
default with sidebar right
sidebar
sidebar
default with sidebar left
The blue area indicates that the module is applicable in this content area.

Dimensioned screenshots

Image: Dimensioning Desktop
Desktop
Image: Dimensioning Tablet
Tablet
Image: Dimensioning Mobile
Mobile

This module can be used in the following themes:

  • Internet
  • Intranet
  • Suite
The blue area indicates that the module is applicable in this theme.

This is what the module looks like

Image (03_01)

Example page

arrow-down UCP Pattern Library

  • brandfactory
  • media pool - das Digital Asset Management System für thyssenkrupp
  • CMS Login

Follow us

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Imprint
  • Legal Notes
  • Share tk-share
    FacebookTwitter Email LinkedIn