5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tf08,

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.

5a:[["$","$L5d",null,{"post":{"id":"019e9be1-94f8-7359-b85b-345fbd996866","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"FMISPHE9YXpBPGd4VBFv","resolved":true,"title":"Country Accordion","body":"$5e","bodyJson":null,"introduction":"Show every country you serve, by region","slug":"country-accordion","author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/FMISPHE9YXpBPGd4VBFv/country-accordion-wd2WPyJncpbLkzdmkC08f7S75Fu1jx","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T06:38:46.931Z","updatedAt":"2026-06-05T16:37:56.375Z","publishedAt":"2026-06-06T07:41:52.760Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/CountryAccordion-eO0kf3.js@gXrcjhYN6bgZpmRvY9EM","previewUrl":"https://country-accordion-made-by-onyri-strategy.framer.media/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"gXrcjhYN6bgZpmRvY9EM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T07:41:52.760Z","updatedAt":"2026-06-06T07:41:52.760Z","reported":false}}],"$L5f"]

Suggested for you