# Country mark

A round flag set before a country's name, so a reader finds the country in a long list at a glance. It sits beside the name and does not replace it.

* Kind: component
* Page: https://design.werklist.com/components/country-mark
* Version: 2.1.2

## When to use it

* Wherever a row names a country: a board cell, a picker, a group header, a filter, a report table and the header of a page about one country.

## When not to use it

* Maps, chart legends, bullets and status.
* A mark without its name.
* A flag emoji or a square flag.

## Rules

* Each place has one size, such as 16 px in a dense list and 20 px in the board grid.
* The smallest mark is 15 px on screen and 8 pt in print. Below that the circle crops away what tells some flags apart.
* A long name wraps under itself, and the mark stays level with the first line.

## Anatomy

* Disc: the flag file for the country's two letter ISO code, cropped to a circle
* Ring: 1 px outside the disc, ink at 14 percent in the light theme, white at 15 percent in the dark theme
* Fill behind the flag: shows while the file loads (--surface-2)
* Space before the name: 8 px (--space-2)
* Alignment: centered on the first line of the name

## Variants

* Flag: a country with a flag file
* Two letter disc: a code without a flag file
* Globe: the General row, which stands for all countries
* No mark: an unknown country, which the name column says

## Sizes

* Dense list: height 16 px, type 12 px
* Board grid, pickers and filters, the default: height 20 px, type 13 px
* Chart row label: height 1.15 em, type 13 px
* Report listing card: height 24 px, type 15 px
* Header of a page about one country: height 28 px, type 22 px
* Report page header: height 32 px, type 34 px
* Report table, print: height 10 pt, type 9.5 pt
* Running head, print: height 8 pt, type 7.5 pt
* Report cover, print: height 28 pt, type 26 pt

## States

* Loading: the fill shows until the file arrives, and nothing moves (--surface-2)
* Missing file: the two letter code, 9 px at weight 700, on the control surface (--surface-control, --text-muted)
* General: the globe icon, 16 px in a 20 px box, stroke 1.75 (--text-muted)
* Unknown country: no mark

## Accessibility

* The mark is decoration beside the name. It has empty alt text and is hidden from screen readers, so the name is read once.
* The mark takes no focus and has no states of its own. The row or cell around it owns focus and keys.
* A name cut to one line shows whole in a tooltip, and screen readers read it whole.
* Letters on the two letter disc measure 4.50 to 1 in the light theme and 6.92 to 1 in the dark theme.

## Content

* The country name in the reader's language.
* The two letter disc shows the country's ISO code, such as NP for Nepal.

## Tokens

* --surface-2
* --surface-control
* --text-muted
* --space-2