Feature Section Juliet
overview
Overview
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
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.