Feature Section Juliet

overview

Feature Section Juliet
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Query Loop Compatible

Variables

This frame doesn't use any locally scoped variables.

Other frames within this frame may contain variables. You can see all related frames further down the page.

HTML5 Tags & Attributes

Other frames within this frame may contain specific HTML5 tags. You can see all related frames further down the page.

Accessibility Notes

No additional accessibility notes for this frame.

This frame uses the clickable parent technique.

Related Frames

FAQs

I would like to add more than 3 cards, how do I do that?

You can use this CSS, so you can then use 5 cards.

fr-feature-section-juliet__cards

root *:nth-child(1) { grid-area: 3 / 1 / 7 / 2; }
root *:nth-child(2) { grid-area: 7 / 1 / 11 / 2; }
root *:nth-child(3) { grid-area: 1 / 2 / 5 / 3; }
root *:nth-child(4) { grid-area: 5 / 2 / 9 / 3; }
root *:nth-child(5) { grid-area: 9 / 2 / 13 / 3; }
What is the Clickable Parent Technique & Why Does Frames Use It?

The “Clickable Parent” technique makes clickable blocks with multiple child text elements more accessible. It typically works by turning the heading of a card into a hyperlink and then using advanced CSS techniques to expand the clickable area of that link to the entire card.

In ACSS & Frames, this technique is easily accomplished by adding the .clickable-parent class to the linked element in the card and making sure the card or parent block is set to position relative.

When the link/card is focused by the keyboard with this technique, the link gets announced by the card’s heading automatically.

This is preferable over the common and incorrect technique of wrapping entire cards with a link. When you wrap an entire card or block with a link, the accessibility announcement becomes unidentifiable and/or confusing because the block contains too many text elements.

This is also preferable over using generic links or buttons inside the card. Usually these buttons contain repetitive generic text like “learn more,” which gives screen reader users zero context.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.