Country Accordion

Country Accordion is a polished section component that turns "we operate in 24 countries" into an interactive list of real flags grouped by region. Instead of a wall of text or a static grid, countries are organized into expandable region rows — show the first four inline, then let visitors click Show all to reveal the rest with a smooth height animation.

Each region row features a typographic label (uppercase, tracked), a responsive flag grid, and a transparent toggle that rotates a + icon to × when expanded. Country pills use real flag icons loaded automatically from flagcdn.com — no manual uploads, no broken image links. A configurable mobile breakpoint stacks the layout vertically on narrow widths, with the grid reducing to two columns for readability.

Designed for fintech, ecommerce, SaaS, and travel brands that need to communicate geographic reach without burying it in a footer or hiding it behind a "see all countries" link.

Key Features

• Flat country list — one entry per country, grouped at render by region label

• Real flag icons via flagcdn.com (2-letter ISO codes, no manual hosting)

• Smooth expand/collapse animation per region (Framer Motion height + opacity)

• Configurable visible-items count before "Show all" appears

• 1–6 grid columns on desktop, auto-reduces to 2 columns on mobile

• Container-based responsive — uses ResizeObserver, adapts to canvas width not viewport

• Editable fonts for subtitle, title, region labels, country names, description, and CTA via Framer Font controls

• Per-element visibility toggles (subtitle, title, description, CTA) with auto-hiding sub-options

• 7 separate color controls — card, border, pill, muted text, foreground, CTA background, CTA text

• Adjustable border radii for card, pills, and CTA

• CTA button with hover arrow slide-swap and tap scale animation

• Up to 200 countries via Array property control

• 24 countries pre-loaded across 3 regions (Europe, Africa, Americas)

• Works on canvas and published site

Where to Use

• Fintech and remittance landing pages listing supported countries

• Ecommerce stores showing shipping destinations

• SaaS marketing pages communicating global reach

• Travel platforms displaying their booking network

• Crypto exchanges showing supported jurisdictions

• Hiring pages listing countries where the company employs

• About pages with a "Markets we serve" section

Best For

• Teams that need to display 15+ countries without overwhelming the layout

• Brands that want supported regions to feel structured, not like an afterthought

• Designers who want full typographic and color control from the Properties panel

• Framer users who need a drop-in coverage section with zero data wiring

Why This Component

A bullet list of countries is forgettable. A world map is heavy and rarely accurate. Country Accordion sits between the two — structured enough to scan, light enough to drop into a page that's already busy. Regions stay collapsed by default so the section never dominates the layout, and the Show all toggle reveals depth on demand. Real flags ground the list visually, and the property controls let you match your brand without touching code.

Built for Framer. Drop it on your canvas and publish.