Country mark

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

What it is

Each mark is the flag file for the country's ISO code, cropped to a circle. A thin ring around it keeps a flag that is white at its edge from dissolving into a white page.

Nepal
India
Philippines
Serbia
Bosnia and Herzegovina

Light theme

Nepal
India
Philippines
Serbia
Bosnia and Herzegovina

Dark theme

When to use it

Use it wherever a row names a country: a board cell, a picker, a group header, a filter, a report table, the header of a page about one country, such as the work permits for Nepal.

Keep it off maps, chart legends, bullets and status. On a map a flag hides the shape of the country it stands for, and in a legend it looks like a color key.

Anatomy

Fill, while the file loads
The flag file, cropped
The ring, 1 px outside
The mark

Disc: the flag file, cropped to a circle
Ring: 1 px outside the disc, ink at 14 percent in light, white at 15 percent in dark
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

Sizes

Dense list16 px beside 12 px textNepal
Board grid, pickers and filters20 px beside 13 px textNepal
Chart row label1.15 em beside 13 px textNepal
Report listing card24 px beside 15 px textNepal
Header of a page about one country28 px beside 22 px textNepal
Report page header32 px beside 34 px textNepal

Each place has one size: 16 px in a dense list, 20 px in the board grid, and so on. Below 15 px on screen or 8 pt in print, the circle crops away what tells some flags apart.

Report table, print: 10 pt beside 9.5 pt text
Running head, print: 8 pt beside 7.5 pt text
Report cover, print: 28 pt beside 26 pt text
Smallest on screen: 15 px
Smallest in print: 8 pt

When there is no flag

If the file for a code is missing, show the two letter code in a gray disc of the same size. If the country is unknown, show no mark and let the name column say so.

The General row, which stands for all countries, takes the globe icon in place of a flag.

Nepal
European Union
General

Two letter disc: the control surface; --surface-control
Letters: 9 px, weight 700; --text-muted
Letters on the disc: 4.50 to 1 in light, 6.92 to 1 in dark
Globe for General: the globe icon, 16 px in a 20 px box, stroke 1.75; --text-muted

Long names

A long name wraps under itself, and the mark stays level with the first line. In a board cell of one line the name ends in an ellipsis. The full name shows in a tooltip, and screen readers read it whole.

Bosnia and Herzegovina

A list row wraps the name. A board cell cuts it and shows it whole in a tooltip.

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.

Permitted and not permitted

Permitted

The mark before the name
Nepal with its flag in the country column of a candidates board.
The two letter disc for a missing file
The column keeps its rhythm and the code stays readable.

Not permitted

A flag emoji
Emoji flags look different on each system.
A mark without its name
Many flags look alike at 20 px.
A square flag
The set is round, and a square breaks the column.
A flag on a map or in a legend
It hides the country's shape and reads as a color key.

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

JSON

{
  "title": "Country mark",
  "path": "/components/country-mark",
  "url": "https://design.werklist.com/components/country-mark",
  "text": "https://design.werklist.com/agent/components/country-mark",
  "summary": "The round flag before a country's name: its sizes, what it shows when a flag is missing, and long names.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Country mark",
  "purpose": "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.",
  "use": [
    "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."
  ],
  "avoid": [
    "Maps, chart legends, bullets and status.",
    "A mark without its name.",
    "A flag emoji or a square flag."
  ],
  "anatomy": [
    {
      "part": "Disc",
      "measure": "the flag file for the country's two letter ISO code, cropped to a circle"
    },
    {
      "part": "Ring",
      "measure": "1 px outside the disc, ink at 14 percent in the light theme, white at 15 percent in the dark theme"
    },
    {
      "part": "Fill behind the flag",
      "measure": "shows while the file loads",
      "token": "--surface-2"
    },
    {
      "part": "Space before the name",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "Alignment",
      "measure": "centered on the first line of the name"
    }
  ],
  "variants": [
    {
      "name": "Flag",
      "use": "a country with a flag file"
    },
    {
      "name": "Two letter disc",
      "use": "a code without a flag file"
    },
    {
      "name": "Globe",
      "use": "the General row, which stands for all countries"
    },
    {
      "name": "No mark",
      "use": "an unknown country, which the name column says"
    }
  ],
  "sizes": [
    {
      "name": "Dense list",
      "height": "16 px",
      "type": "12 px"
    },
    {
      "name": "Board grid, pickers and filters, the default",
      "height": "20 px",
      "type": "13 px"
    },
    {
      "name": "Chart row label",
      "height": "1.15 em",
      "type": "13 px"
    },
    {
      "name": "Report listing card",
      "height": "24 px",
      "type": "15 px"
    },
    {
      "name": "Header of a page about one country",
      "height": "28 px",
      "type": "22 px"
    },
    {
      "name": "Report page header",
      "height": "32 px",
      "type": "34 px"
    },
    {
      "name": "Report table, print",
      "height": "10 pt",
      "type": "9.5 pt"
    },
    {
      "name": "Running head, print",
      "height": "8 pt",
      "type": "7.5 pt"
    },
    {
      "name": "Report cover, print",
      "height": "28 pt",
      "type": "26 pt"
    }
  ],
  "states": [
    {
      "name": "Loading",
      "change": "the fill shows until the file arrives, and nothing moves",
      "tokens": [
        "--surface-2"
      ]
    },
    {
      "name": "Missing file",
      "change": "the two letter code, 9 px at weight 700, on the control surface",
      "tokens": [
        "--surface-control",
        "--text-muted"
      ]
    },
    {
      "name": "General",
      "change": "the globe icon, 16 px in a 20 px box, stroke 1.75",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Unknown country",
      "change": "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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/components/country-mark