Tabbed Carousel Variant: Dark

[Gonzalo-CG]

Description

A new block, similar to the Tabbed Carousel Block will be developed in order to achieve the design named in Figma as Group 700.

The option to add a video to tabs and the auto-scrolling of tabs will be handled separately on issue #208

The design is the following:

Acceptance Criteria

• [ ] The Dark variant of the Tabbed Carousel Block is available for authors to use on any page.
• [ ] The Dark variant of the Tabbed Carousel Block has the same design for Desktop & mobile as shown in Figma.
• [ ] As an author, I can configure the link that's displayed on every tab. (The Driven By Design text overlapping the media is a link). This text is manually added by the author
• [ ] The block is one tabbed carousel component - Not split into two blocks
• [ ] Each item links to a magazine article
• [ ] The category and title of an article are pulled from the metadata
• [ ] If the title of an article is too long, it gets truncated with an ellipsis (to be defined when this happens)

Open Questions

• Is this a tabbed carousel, or 2 separate components (a hero and some buttons below)? --> This is just one "tabbed-carousel" component.
• Is the "Driven by Design" text a link? --> Yes
• Does every tab of the carousel have the "subscribe" button overlayed on the top-right corner? --> Yes
• Does this block auto-scroll? --> Yes

[WendyKruger]

I believe I addressed this in one of the calls, but just in case here are the answers to the design questions:

Open Questions

• Is this a tabbed carousel, or 2 separate components (a hero and some buttons below)? tabbed carousel
• Is the "Driven by Design" text a link? Yes
• Does every tab of the carousel have the "subscribe" button overlayed on the top-right corner? Yes
• Does this block auto-scroll? Yes

[cogniSyb]

Color contrast of inactive items is not sufficient for the small text. The contrast ratio of 3.9 can only be used for 18px+ text. It’s #000 at 50% opacity, which results in #808080. With 55% opacity we’ll end up with #747474 and an acceptable contrast ratio of 4.6.

[shirin27]

Kamino cloned this issue to hlxsites/vg-macktrucks-com