Flag

You can show a country flag as inline element with this asset.

The following code examples shows how to use badges:

<span class="flag flag--fr"></span>

The following list describe all existing block/element/modifier classes of the component.

• .flag - required the class shows a flag based on the current language of the site
• .flag--{COUNTRY} - a text within this element is bolder and is often used for key value representations

The variables are:

• COUNTRY ad, ae, af, ag, ai, al, am, an, ao, ar, as, at, au, aw, az, ba, bb, bd, be, bf, bg, bh, bi, bj, bm, bn, bo, br, bs, bt, bv, bw, by, bz, ca, cd, cf, cg, ch, ci, ck, cl, cm, cn, co, cr, cu, cv, cy, cz, de, dj, dk, dm, do, dz, ec, ee, eg, eh, er, es, et, eu, fi, fj, fk, fm, fo, fr, ga, gb, gd, ge, gf, gg, gh, gi, gl, gm, gn, gp, gq, gr, gs, gt, gu, gw, gy, hk, hm, hn, hr, ht, hu, id, ie, il, in, io, iq, ir, is, it, je, jm, jo, jp, ke, kg, kh, ki, km, kn, kp, kr, kw, ky, kz, la, lb, lc, li, lk, lr, ls, lt, lu, lv, ly, ma, mc, md, me, mg, mh, mk, ml, mm, mn, mo, mp, mq, mr, ms, mt, mu, mv, mw, mx, my, mz, na, nc, ne, nf, ng, ni, nl, no, np, nr, nu, nz, om, pa, pe, pf, pg, ph, pk, pl, pm, pn, pr, ps, pt, pw, py, qa, re, ro, rs, ru, rw, sa, sb, sc, sd, se, sg, sh, si, sk, sl, sm, sn, so, sr, st, sv, sy, sz, tc, td, tf, tg, th, tj, tk, tl, tm, tn, to, tr, tt, tv, tw, tz, ua, ug, um, us, uy, uz, va, vc, ve, vg, vi, vn, vu, wf, ws, ye, yt, za, zm, zw

Basic Example:

Default Flag

Each website is assigned to a country. If the ‘.flag’ class is used without further information, the flag of the assigned country is displayed. You can try it by change the theme.

Scaling

The Flags sizing can be adjusted by changing the font-size.