Feature Section Juliet

Related Frames

Related Components

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.