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
  • Navigation
  • Accordion (07_01)

Accordion (07_01)

The "Accordion" module is ideal for displaying a large number of contents clearly below each other on landing pages/distribution pages and article detail pages in the content area.

By clicking on the individual container titles, these are expanded and the previously stored content becomes visible. In detail, the "Accordion" module consists of a headline, the - as clearly as possible named - container titles and the variable modules integrated within the container.

Example page view

The module is marked in orange

Accordion - Module view

Accordion in the content area

This is how the module works

The module consists of the following components:
1. HeadlineHeadline for the Accordion module
2. Accordion elements- any number

Display options:
- Display the first accordion element in open format when page is accessed: yes/no
- Always display only one accordion element in open format: yes/no
HeadlineHeadline is displayed on every element
ModulesThe following modules can be inserted into an Accordion (also multiple per Accordion):

Teaser: Download Teaser, Event Teaser, Figure Teaser, Press Teaser, Quotation Teaser, Text Teaser, Text Teaser List, Image Teaser, Image Teaser Slider, Contact Teaser, Text + Image Teaser
Combination modules: Image + Quotation, Text + Downloads, Text + Image, Text + Link list, Text + Quotation, Text + Video
Media: Image, Image Gallery, Images Download, PDF Gallery, Video, Video List,
Others: Organisational Chart, Standard Text, Table, Link List

This is how the module works

The module consists of the following components:
1. HeadlineHeadline for the Accordion module
2. Accordion elements- any number

Display options:
- Display the first accordion element in open format when page is accessed: yes/no
- Always display only one accordion element in open format: yes/no
HeadlineHeadline is displayed on every element
ModulesThe following modules can be inserted into an Accordion (also multiple per Accordion):

Teaser: Download Teaser, Event Teaser, Figure Teaser, Press Teaser, Quotation Teaser, Text Teaser, Text Teaser List, Image Teaser, Image Teaser Slider, Contact Teaser, Text + Image Teaser
Combination modules: Image + Quotation, Text + Downloads, Text + Image, Text + Link list, Text + Quotation, Text + Video
Media: Image, Image Gallery, Images Download, PDF Gallery, Video, Video List,
Others: Organisational Chart, Standard Text, Table, Link List

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

Accordion: Dimensioning Desktop
Desktop
Accordion: Dimensioning Tablet
Tablet
Accordion: 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.

This is what the module looks like

Accordion (07_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