Desktop view

Two column teaser

One column teaser

Mobile view

Two column teaser

One column teaser

How it works

  • The Vertical Tab Teaser component allows to create and display content using tab navigation elements.
  • The Vertical Tab Teaser can be used to show various content inside the tabs.
  • The Vertical Tab Teaser content is displayed based on tabs, each tab can have multiple components within
  • The component allows to configure multiple tabs (Vertical Tabs Teaser): current limitation is up to 5 tabs
  • For M and larger viewports, one of available tabs is always open. 
    • Component must be in a 100% grid (without left hand navigation and/or RFA)
  • On small and x-small viewports the component is shown as an accordion.
  • On pages with left hand navigation and or RFA the component is shown as an accordion.
  • Each Teaser contains one or two areas allowing to drag and drop selected components within. The layout with "two areas" divide available space accordingly: 60%-40%, 40%-60% or 50%-50%.
  • Following components can be integrated into a teaser element:
    • Button
    • Double image
    • Link list
    • Link list re-imagined
    • Process steps
    • Teaser
    • Text & image
  • Two teaser styles are possible:
    • regular
    • wide    

Reference for publisher

AEM view

Screenshot of the vertical tab container

AEM view

Screenshot of the vertical tab teaser

AEM view

Here you can edit the relevant tab teaser

AEM view

Availabe components for a tab teaser