Feature Section Juliet


Feature Section Juliet
Available for:
Buy Frames
Back to library

Related Frames

Related Components

No related components.


  • 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.


    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.