Feature Grid Romeo

Feature Romeo is an advanced frame that’s perfect for showcasing features, services, locations, team members, and anything else that needs visual card representation.

The cards are placed in a vertical accordion with a vertical heading. When the user hovers, the card expands to fill more space in the accordion and animates the vertical heading out of view while animating in a real heading and a description.

The accordion will stack on mobile, removing the vertical heading and original overlay. The result will be a traditional stack of cards with a gradient overlay to make the text more readable.

We’ve put a lot of emphasis on accessibility with this frame. The actual headings (non-vertical) are the links and use the clickable-parent technique to make the entire card clickable.

Additionally, we’ve removed the focus-within styles and ensured that the cards get the same effect on focus as they do when hovered. This makes the accordion keyboard navigable.

Note that the real heading of this card doesn’t animate. This is because clickable-parent is incompatible with CSS transform and most animation techniques. Don’t try to animate the heading of this frame as there’s a high chance you’ll break the card’s accessibility.