---
title: "Country Accordion — Free Framer component · Best of Framer"
description: "Free Framer component · by ONYRI Strategy · Accordions. Country Accordion is a polished section component that turns \"we operate in 24 countries\" into an interactive list of real flags…"
canonical: "https://framer.elliotli.dev/component/country-accordion"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Country Accordion

# Country Accordion

Show every country you serve, by region

[View on Framer](https://framer.com/marketplace/components/country-accordion/?via=elliot-li)

![Country Accordion preview image 1](https://framer.elliotli.dev/og/component/country-accordion/be4119fa71cd1f13/1600x1200.jpg)

## Summary

Country Accordion is a polished section component that turns "we operate in 24 countries" into an interactive list of real flags grouped by region.

## Description

**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](http://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](http://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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3314

## Details

- **Author**: ONYRI Strategy
- **Published**: 2026-06-06
- **Updated**: 2026-06-05
- **Added**: 2026-05-27
- **Categories**: Accordions

## More like this

-   [Reel Accordion](/component/reel-accordion) — Lamin Touray · Free — Services that play as you hover
-   [AnswerVault](/component/answervault) — knokknokD · $12 — AnswerVault handles the quiet production details that make a FAQ useful after launch: searchable answers, category filtering, crawlable…
-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section