Tabbed carousel block

[cogniSyb]

Similar to Volvo Trucks' tabbed-carousel block, this will be a new block for Mack Trucks.

Requirements

• Full width dark background (graphite colour)
• Section contains headline
• Image with a caption
• Tab controls are placed below the image, with a red indicator for the active
• When the tab controls don’t fit in the viewport, they will be scrollable as in Trucks lineup carousel (MVP) #13* and defined in Volvo Experience System:

On small screens, if the tabs are wider than screen, the user can side scroll to see all tabs.

• When the tab controls don’t fit in the viewport, they will be scrolled into view when active
• Use scroll-snap (same as on trucks line-up, on the trucks images), for the tabs

Image

• On mobile and tablet, the image is full width
• The image won’t expand the content container (maximum 1040px)
• On mobile and tablet, the caption text will be shown below the image
• On desktop, the image caption text will be shown above a black/transparent gradient to ensure contrast
• On all platforms, the image caption text will be sized to maximum 572px (55% of the maximum content container)
• On desktop, the image caption text will have a margin-left of 32px and a 16px margin-bottom

[cogniSyb]

• @cogniSyb to agree with agency: background colour of section.

[Andrei-Boiangiu]

marked as done with the minor and minimal mentiones of the Minor bug above and the fact that the bottom-margin of the Image caption text is 15px instead of 16px