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
  • English
  • Pattern Library
  • flexible
    • English
  • Startseite
  • Pattern nach Typus
  • Navigation
  • Tabs (07_03)

Tabs (07_03)

Ähnlich dem "Accordion" werden die "Tabs" zur Strukturierung und zur Abbildung von umfangreichen Inhalten verwendet. Tabs kommen auf Landingpages/Verteilerseiten und Artikeldetailseiten im Contentbereich zum Einsatz. In jedem der – möglichst präzise benannten – Tab-Container können individuelle Inhalte/Module platziert werden, die erst durch Klick auf den entsprechenden Tab sichtbar werden.

Das Modul besteht aus einer übergreifenden Headline, den Tab-Container-Titeln und den Modulen, die innerhalb der Tabs eingebunden werden.

Beispiel Seitenansicht

Das Modul ist orange markiert

Tabs - Modulansicht

Tabs im Contentbereich

So funktioniert das Modul

Das Modul besteht aus folgenden Komponenten:
1. ÜberschriftÜberschrift für das Tab-Modul
2. Tabs (Reiter)Es gibt keine Beschränkung in der Anzahl, aber die Übersichtlichkeit sollte gewährleistet sein.
TitelTitel wird auf jedem Reiter angezeigt
ModuleFolgende Module können in Tabs eingefügt werden (auch mehrere pro Tab

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
Kombimodule: Image + Quotation, Text + Downloads, Text + Image, Text + Link list, Text + Quotation, Text + Video
Medien: Image, Image Gallery, Images Download, PDF Gallery, Video, Video List,
Weitere: Organizational Chart, Standard Text, Table, Link List

So funktioniert das Modul

Das Modul besteht aus folgenden Komponenten:
1. ÜberschriftÜberschrift für das Tab-Modul
2. Tabs (Reiter)Es gibt keine Beschränkung in der Anzahl, aber die Übersichtlichkeit sollte gewährleistet sein.
TitelTitel wird auf jedem Reiter angezeigt
ModuleFolgende Module können in Tabs eingefügt werden (auch mehrere pro Tab

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
Kombimodule: Image + Quotation, Text + Downloads, Text + Image, Text + Link list, Text + Quotation, Text + Video
Medien: Image, Image Gallery, Images Download, PDF Gallery, Video, Video List,
Weitere: Organizational Chart, Standard Text, Table, Link List

Das Modul kann in den folgenden Seitenbereichen und Templates verwendet werden:

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
Der blaue Bereich gibt an, dass das Modul in dieser Content Area anwendbar ist.

Vermaßte Screenshots

Tabs: Vermaßung Desktop
Desktop
Tabs: Vermaßung Tablet
Tablet
Tabs: Vermaßung Mobile
Mobile
Abstände Guide

Erläuterung: Abstandswerte, die in den vermaßten Screenshots verwendet werden

Das Modul kann in folgenden Themes eingesetzt werden:

  • Internet
  • Intranet
  • Suite
Der blaue Bereich gibt an, dass das Modul in diesem Theme anwendbar ist.

So sieht das Modul aus

Tabs (07_03)

Beispielseite

arrow-down UCP Pattern Library

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

Folgen Sie uns

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Impressum
  • Rechtliche Hinweise
  • Teilen tk-share
    FacebookTwitter Email LinkedIn