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
  • Gallery/List/Teasers
  • Product tiles (12_11)

Product tiles (12_11)

The “Product tiles” module displays an individual selection of products from thyssenkrupp in a tile matrix. Each tile displays one product name.

Clicking opens an enlarged tile with additional product information and an (optional) CTA.

In the back end, it is only possible to select the industries and categories to be displayed. The text and links cannot be edited here, but are edited in the data sources, just like the other product information.

This module is particularly suitable for use on overview and distributor pages, and on landing pages.

Example page view

The module is marked in orange

Product tiles: Module view
zoom

Product tiles in the footer area of a page

This is how the module works

The individual products can be edited in the data sources (“Products” table). The “Product tiles” module only accesses this information and displays it. The following information is saved in the data sources:

  • Country

  • Product

  • Region

  • Regional link (CTA)

This is how the module works

The module consists of the following components

ContentDescription
HeadlineText to be displayed as main heading.
ContentThis tab consist of creation of product categories and selection of products from Datasource.
LabelsThis tab consist of labels for link button and dropdown.
AppearanceThis tab consist the configuration of text and background colors.

Content

This tab consists of the following:

ContentDescription
Product list (products from the datasource)Add as many number of product categories by clicking on products button.
Category for selected productsEnter the name of category.
Product(s)Select the products from the datsource.

Labels

This tab consists of the following:

ContentDescription
Button captionEnter caption which will be displayed on button
„Selection field“ labelLabel for dropdown fields

Appearance

This tab consists of the following:

ContentDescription
Gap between the tilesSelect the gap between the product tiles(Default or none)
Category tiles(Colors)Select the color of text and background for category tiles
Product tilesSelect color of the title and background color
TitleSelect the color for title
BackgroundSelect background of product tiles

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

Product tiles: Dimensioning Desktop
Desktop
Product tiles: Dimensioning Tablet
Tablet
Product tiles: Dimensioning Mobile
Mobile
Spacing Guide

Description: Spacing values used in the dimensioned screenshots

This module can be used in the following themes:

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

Example page "Product Tiles"

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