- Taxonomic name: M-COUNTRY-SELECTION
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.13.0 (13/09/19)
Masthead country selector
The country selector component is used to allow customers to navigate to Abeille Assurances’ global markets websites and select a preferred language where available.
Design and usage
- Language options should be displayed where they are available and should link to the appropriate version of the site. The language label itself should be displayed in that language.
- Countries should be listed in alphabetical order.
- Guides or notes that are specific to the desktop, tablet or mobile viewports (where appropriate).
Structure
-
Masthead addition:
- Format: '[Flag][Country label] - [website domain] (Desktop and Tablet)'.
-
Icons:
- Global: See FW icon library 'Global News and Comms Badge'.
- Country: See System Icons - Flags.
- Label.
- Chevron (Mobile).
- BG banding box.
-
Panel:
- Title.
- Tabs (see FW 'Tabs' pattern).
-
Country cards:
- Country flag.
- Country label.
- Country website domain.
- Link (for each available language) - follows current pattern (NB: Scope to refine for v5.0 - see original UI recommendations - available on request).
- Over state - consistent with 'Date Picker' FW pattern.
- BG container: Full width (all breakpoints).
Accessibility and screen readers
- Colour labels, colours, contrast and typography WCAG compliant.
Non-JS requirements
-
Defaults to reveal all countries:
- Region label: Source Sans Pro, 20px, semi-bold, #5c596d.
- Region label divider line (always with 'Region label'): See FW pattern 'Divider Lines' (#cccccc).
-
Desktop:
- 3 columns display (4 grid columns each) for all country cards with associated language link/s.
-
Tablet:
- 2 columns display (4 grid columns each) for all country cards with associated language link/s.
-
Mobile:
- 1 column display for all country cards (4 grid columns each) with associated language link/s.
Placement
- Masthead addition positioned to right edge.
- Menu full width appearing from below the masthead.
- Tabs positioned left aligned.
-
Positioned centrally on BG within respective grid widths. Refer to country card anatomy.
-
Desktop:
- Heading: Left aligned, 30px vertical spacing from masthead.
- Tabs: 40px vertical spacing from heading.
- Country cards: 3 columns (4 grid columns each), 30px horizontal spacing between each, 40px vertical spacing for stacking.
- BG container: 40px vertical spacing from bounding box of last card.
-
Tablet:
- Heading: Left aligned, 30px vertical spacing from masthead.
- Tabs: 40px vertical spacing from heading.
- Country cards: 2 columns (4 grid columns each), 20px horizontal spacing between each, 40px vertical spacing for stacking.
- BG container: 40px vertical spacing from bounding box of last card.
-
Mobile:
- Heading: Left aligned, 30px vertical spacing from masthead.
- Tabs: 40px vertical spacing from heading.
- Country cards: 1 column (4 grid columns each) left aligned, 40px vertical spacing for stacking.
- BG container: 40px vertical spacing from bounding box of last card.
-
Use case and exception scenarios
- For use in conjunction with global masthead.
Design notes
-
Masthead enhancement:
-
Icon:
- 15px horizontal padding from edges of BG banding box.
- Global - UK: See FW icon library 'Global News and Comms Badge'.
-
Additional country flags:
- 49px X 33px (see FW website - System Icons - Flags).
- Label (Desktop and Tablet only): Source Sans Pro 14px Regular #ffffff, 8px horizontal padding from icon.
- Chevron: 9px X 6px, #ffffff, 10px horizontal padding from label (Desktop and Tablet) or 10px horizontal padding from icon (Mobile).
- BG banding box: #444444.
-
Tabs: See FW pattern 'Tabs':
- Use full width across all breakpoints.
- Labels: 'Global', 'Americas', 'Asia', 'Europe'.
- Vertical padding to Country Cards: 40px.
-
Country cards:
- Country flag icon: 49px X 33px (alternative icon for Global: see 'Generic - Global News and Comms - Functional').
- Country name label: Source Sans Pro 16px, semi-bold, #444444.
- Country website domain label: Source Sans Pro 16px, regular, #747474.
- Country language text link: See existing FW pattern 'Country Selector'.
-
Over state: BG fill #f5f8fc, outline #dce6f4, shadow 2px y-axis 4px blur #000000 5& opacity (see FW pattern 'Date Picker' pattern styling), 82px height.
- Desktop: 390 px width.
- Tablet: 340px width.
- Mobile: 280px width.
- NOTE: 20px horizontal/vertical padding from country card content lockups.
-
Measurements/Padding:
-
All breakpoints:
- Country flag icon: 20px horizontal padding to country label.
- Country label: 281px width (keep label content to country label and country website domain only).
- Country language text links: See existing FW pattern 'Country Selector'.
- Vertical stacking: 40px.
- BG: Full width, fill #ffffff, 40px vertical padding exit rule.
-
Desktop:
- 3 columns: 30px horizontal spacing between each country card.
-
Tablet:
- 2 columns: 20px horizontal spacing between each country card.
-
Mobile:
- 1 column: Only vertically stacked 40px padding between country card lockups.
-
-
Examples
Interactive example
Code example
<div class="m-country-selection" data-module="m-country-selection">
<h1 class="a-heading a-heading--2 a-heading--semibold m-country-selection__main-heading">Abeille Assurances global websites</h1> <h2 class="a-heading a-heading--3 a-heading--light m-country-selection__heading">Global</h2>
<ul class="a-list-plain m-country-selection-list">
<li class="m-country-selection-list__item m-country-selection-list__item--com is-selected">
<h3 class="m-country-selection-list__heading">Global<span>.com</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a class="is-selected" href="https://www.abeille-assurances.fr/" aria-label="abeille-assurances.fr (English)">English</a></li>
</ul>
</li>
</ul> <h2 class="a-heading a-heading--3 a-heading--light m-country-selection__heading">Americas</h2>
<ul class="a-list-plain m-country-selection-list">
<li class="m-country-selection-list__item m-country-selection-list__item--ca">
<h3 class="m-country-selection-list__heading">Canada<span>.ca</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.avivacanada.com/fr" aria-label="avivacanada.com (Français)">Français</a></li>
<li><a href="https://www.avivacanada.com/" aria-label="avivacanada.com (English)">English</a></li>
</ul>
</li>
</ul> <h2 class="a-heading a-heading--3 a-heading--light m-country-selection__heading">Asia</h2>
<ul class="a-list-plain m-country-selection-list">
<li class="m-country-selection-list__item m-country-selection-list__item--cn">
<h3 class="m-country-selection-list__heading">China<span>.com.cn</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva-cofco.com.cn/" aria-label="aviva-cofco.com.cn (中文)">中文</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--hk">
<h3 class="m-country-selection-list__heading">Hong Kong<span>.com.hk</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.abeille-assurances.fr.hk/tc/" aria-label="abeille-assurances.fr.hk (中文)">中文</a></li>
<li><a href="https://www.abeille-assurances.fr.hk/en/" aria-label="abeille-assurances.fr.hk (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--in">
<h3 class="m-country-selection-list__heading">India<span>.india.in</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.avivaindia.com/" aria-label="avivaindia.com (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--id">
<h3 class="m-country-selection-list__heading">Indonesia<span>.co.id</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.astralife.co.id/" aria-label="astralife.co.id (Bahasa Indonesia)">Bahasa Indonesia</a></li>
<li><a href="https://www.astralife.co.id/?lang=en" aria-label="astralife.co.id (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--sg">
<h3 class="m-country-selection-list__heading">Singapore<span>.com.sg</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.abeille-assurances.fr.sg/" aria-label="abeille-assurances.fr.sg (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--tw">
<h3 class="m-country-selection-list__heading">Taiwan<span>.tw</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.tw/" aria-label="aviva.tw (中文)">中文</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--vn">
<h3 class="m-country-selection-list__heading">Vietnam<span>.com.vn</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.vietinaviva.vn/" aria-label="vietinaviva.vn (Tiẽng Việt)">Tiẽng Việt</a></li>
</ul>
</li>
</ul> <h2 class="a-heading a-heading--3 a-heading--light m-country-selection__heading">Europe</h2>
<ul class="a-list-plain m-country-selection-list">
<li class="m-country-selection-list__item m-country-selection-list__item--fr">
<h3 class="m-country-selection-list__heading">France<span>.fr</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.fr/" aria-label="aviva.fr (Français)">Français</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--it">
<h3 class="m-country-selection-list__heading">Italy<span>.it</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.avivaitalia.it/" aria-label="avivaitalia.it (Italiano)">Italiano</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--ie">
<h3 class="m-country-selection-list__heading">Ireland<span>.ie</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.ie/" aria-label="aviva.ie (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--lt">
<h3 class="m-country-selection-list__heading">Lithuania<span>.lt</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.lt/lt/" aria-label="aviva.lt (Lietuvių)">Lietuvių</a></li>
<li><a href="https://www.aviva.lt/en/" aria-label="aviva.lt (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--pl">
<h3 class="m-country-selection-list__heading">Poland<span>.pl</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.pl/" aria-label="aviva.pl (Polski)">Polski</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--tr">
<h3 class="m-country-selection-list__heading">Turkey<span>.tr</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.avivasa.com.tr/" aria-label="avivasa.com.tr (Türkçe)">Türkçe</a></li>
<li><a href="https://www.avivasa.com.tr/en/" aria-label="avivasa.com.tr (English)">English</a></li>
</ul>
</li>
<li class="m-country-selection-list__item m-country-selection-list__item--gb">
<h3 class="m-country-selection-list__heading">United Kingdom<span>.co.uk</span></h3>
<ul class="a-list-plain m-country-selection-list__language-list">
<li><a href="https://www.aviva.co.uk/" aria-label="aviva.co.uk (English)">English</a></li>
</ul>
</li>
</ul>
</div>Development and test
Notes for developers
Ensure that every link includes an aria-label with the value set to the site url and the language, ie. a link to Abeille Assurances Canada in English would have an aria label with value "avivacanada.com (English)".
Website domain language indicator is optional but must be wrapped in a <span>.
Notes for testers
- The exact order of the countries under an area at tablet and desktop size may vary between browsers.
- When JavaScript is available ensure that each area can be opened via both mouse and keyboard and that all links within the open section can then be accessed in the same way.
- With JavaScript on all the areas and countries are displayed when at small, but displayed as tabs at the other screen sizes.
- Ensure that when navigating by keyboard that it is clear which link currently has focus.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-country-selection |
Overall container for country selection used to identify the section when being used within the masthead | Yes | div |
|
.m-country-selection__main-heading |
Styling for the main heading | Yes | .m-country-selection > h1.a-heading.a-heading--2.a-heading--semibold |
|
.m-country-selection__heading |
Styling for country group heading | Yes | .m-country-selection > h2.a-heading.a-heading--3 |
|
.m-country-selection-list |
Base style for country list | Yes | .m-country-selection__heading + ul.a-list-plain |
|
.m-country-selection-list__item |
Base style for individual country list item | Yes | .m-country-selection-list > li |
|
.m-country-selection-list__heading |
Base style for individual country heading | Yes | .m-country-selection-list__item > h3 |
|
.m-country-selection-list__language-list |
Base style for individual country lanuage option list | Yes | .m-country-selection-list__heading + ul |
|
.m-country-selection-list__item--com |
Modifier to add flag icon for Global | .m-country-selection-list__item |
Website domain language indicator: .com
|
|
.m-country-selection-list__item--at |
Modifier to add flag icon for Austria | .m-country-selection-list__item |
Website domain language indicator: .at
|
|
.m-country-selection-list__item--au |
Modifier to add flag icon for Australia | .m-country-selection-list__item |
Website domain language indicator: .au
|
|
.m-country-selection-list__item--be |
Modifier to add flag icon for Belgium | .m-country-selection-list__item |
Website domain language indicator: .be
|
|
.m-country-selection-list__item--ca |
Modifier to add flag icon for Canada | .m-country-selection-list__item |
Website domain language indicator: .ca
|
|
.m-country-selection-list__item--ch |
Modifier to add flag icon for Switzerland | .m-country-selection-list__item |
Website domain language indicator: .ch
|
|
.m-country-selection-list__item--cn |
Modifier to add flag icon for China | .m-country-selection-list__item |
Website domain language indicator: .com.cn
|
|
.m-country-selection-list__item--de |
Modifier to add flag icon for Germany | .m-country-selection-list__item |
Website domain language indicator: .de
|
|
.m-country-selection-list__item--es |
Modifier to add flag icon for Spain | .m-country-selection-list__item |
Website domain language indicator: .es
|
|
.m-country-selection-list__item--fi |
Modifier to add flag icon for Finland | .m-country-selection-list__item |
Website domain language indicator: .fi
|
|
.m-country-selection-list__item--fr |
Modifier to add flag icon for France | .m-country-selection-list__item |
Website domain language indicator: .fr
|
|
.m-country-selection-list__item--gb |
Modifier to add flag icon for United Kingdom | .m-country-selection-list__item |
Website domain language indicator: .co.uk
|
|
.m-country-selection-list__item--hk |
Modifier to add flag icon for Hong Kong | .m-country-selection-list__item |
Website domain language indicator: .com.hk
|
|
.m-country-selection-list__item--id |
Modifier to add flag icon for Indonesia | .m-country-selection-list__item |
Website domain language indicator: .co.id
|
|
.m-country-selection-list__item--ie |
Modifier to add flag icon for Ireland | .m-country-selection-list__item |
Website domain language indicator: .ie
|
|
.m-country-selection-list__item--in |
Modifier to add flag icon for India | .m-country-selection-list__item |
Website domain language indicator: .india.in
|
|
.m-country-selection-list__item--it |
Modifier to add flag icon for Italy | .m-country-selection-list__item |
Website domain language indicator: .it
|
|
.m-country-selection-list__item--li |
Modifier to add flag icon for Liechtenstein | .m-country-selection-list__item |
Website domain language indicator: .li
|
|
.m-country-selection-list__item--lt |
Modifier to add flag icon for Lithuania | .m-country-selection-list__item |
Website domain language indicator: .lt
|
|
.m-country-selection-list__item--lu |
Modifier to add flag icon for Luxembourg | .m-country-selection-list__item |
Website domain language indicator: .lu
|
|
.m-country-selection-list__item--nl |
Modifier to add flag icon for Netherlands | .m-country-selection-list__item |
Website domain language indicator: .nl
|
|
.m-country-selection-list__item--no |
Modifier to add flag icon for Norway | .m-country-selection-list__item |
Website domain language indicator: .no
|
|
.m-country-selection-list__item--pl |
Modifier to add flag icon for Poland | .m-country-selection-list__item |
Website domain language indicator: .pl
|
|
.m-country-selection-list__item--sg |
Modifier to add flag icon for Singapore | .m-country-selection-list__item |
Website domain language indicator: .com.sg
|
|
.m-country-selection-list__item--se |
Modifier to add flag icon for Sweden | .m-country-selection-list__item |
Website domain language indicator: .se
|
|
.m-country-selection-list__item--tr |
Modifier to add flag icon for Turkey | .m-country-selection-list__item |
Website domain language indicator: .tr
|
|
.m-country-selection-list__item--tw |
Modifier to add flag icon for Taiwan | .m-country-selection-list__item |
Website domain language indicator: .tw
|
|
.m-country-selection-list__item--us |
Modifier to add flag icon for United States | .m-country-selection-list__item |
Website domain language indicator: .us
|
|
.m-country-selection-list__item--vn |
Modifier to add flag icon for Vietnam | .m-country-selection-list__item |
Website domain language indicator: .com.vn
|
Keyboard operations
- TAB
-
Tabbing to a link should make the link clearly visually different so that the focus point on the page is obvious to the user.
- Enter
-
When JavaScript is available and at medium and large screen sizes, hitting enter on an area tab link will display the countries for that area and the other countries will become hidden.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.13.0 (13/09/19)
Latest update:
- New global option (
.m-country-selection-list__item--com) added to enable linking to Abeille-Assurances.fr. - New global option added to the country selector on the masthead/main navigation with optional domain language indicators.