Feature Section Romeo
A feature section with left-aligned content and an accessible, animated vertical accordion.
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.
This frame uses the clickable parent technique.
No related components.
How do I keep the card open so I can see what I'm editing?
Add the class
.is-hoverto the card and it’ll stay open. Remove the class when you’re done editing.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.