Handover · TV channel logos

00Read this first

The component is the logo and its height. It has no card, it does not write the channel name, it adds no TV icon. The consumer decides where it sits.

⚠LIGHT surfaces ONLY — that is the one hard limit. The assets are drawn for a white/light background. Measured in #1A1A1A (§02): the black NOVA and the ANT1 disappear, and the dark blue ERT become unreadable. A dark surface needs light variants from design — they do not exist yet.

ℹ️Where it is used today. In the meta row of every match in the «Αναλύσεις ημέρας» widget (.aw-tv > img, 14px). The component generalises that use so it can also sit in an analysis page, a coupon, fixture lists and tip cards.

✔No dependencies. 28 SVGs + 4 CSS rules. No JS required: the JS in the prototype only picks a channel — in production the channel comes from the feed.

01Assets used

All 28, from the folder assets/tv/ — click any one to download it. The file name IS the slug in the data contract (§03).

02Surfaces — try it

Change the background and the height. The dark option is here to show you what breaks, not as a supported use.

Background Height

Surface	Result
White `#FFFFFF`	✔ The supported use. All 28 read clearly.
Fill `#F2F2F2`	✔ Works. The white «gaps» inside some logos (e.g. the frame of `ΕΡΤ 1`) are marginal, but the mark holds.
Dark `#1A1A1A`	✗ Breaks. Measured: `ant1` (black mark) and the black wordmark NOVA on and all 14 Novasports are lost; only the red badge survives. The `ert-*` in dark blue fall below any legibility. Only `alpha`, `skai`, `youtube`, `ert-3` work — and that is not a component, it is a coincidence.

⚠Channels deliberately missing: Mega, Star, SKAI Hybrid, Action24, Cosmote Sport 1–9 and the combined Nova+ERT lockups. In Figma they are drawn white, for a dark background, so they become invisible on the white card. They need a light-background variant from design before joining the list — do not add them as they are.

03Anatomy & sizes

Property	Value	Why
Height	`14px` (production) · `.is-md` 20px · `.is-lg` 34px	Height drives — never width. The logos have different aspect ratios, so a fixed width distorts or crops them.
Width	`width:auto` + `max-width:64px` (92 / 120 on the large ones)	The `max-width` is the guard: a long lockup (`novasports-premier-league`) would otherwise push the row.
Fit	`object-fit:contain`	When it hits the `max-width`, the logo scales down instead of being cropped.
Asset ratio	2:1 — `150×75` viewBox, on 27 of the 28	That is how they came out of Figma, with the frame's dark backdrop removed.
Alignment	`.is-end` → `margin-left:auto`	The only position worth naming: at the end of the meta row.

⚠The youtube.svg is the exception. viewBox -0.5 20.8 47.9 33.4 — ratio ~1.43:1, not 2:1, and with a shifted origin. It renders correctly because height drives and contain protects it; if you assume 2:1 anywhere to «reserve space», this one comes out narrower. Do not normalise the viewBox without a re-export.

⚠At 14px the complex marks are at their limit. On NOVA SPORTS 1–6 and ΕΡΤ Sports N the channel number drops out ~4px. That is acceptable in the meta row, where the logo is secondary information. If the channel IS the primary information (e.g. «watch the match on …»), use .is-md or .is-lg.

04Data contract

The backend supplies slug. The slug is the file name, without .svg. The display name is not rendered anywhere — it goes into the alt/title.

/* one record per channel — same shape as the widget's TV_CHANNELS */
{ f: 'novasports-premier-league', n: 'Novasports Premier League' }

<!-- and the markup that renders it -->
<span class="tvlogo is-end">
  <img src="../assets/tv/novasports-premier-league.svg"
       alt="Novasports Premier League" title="Novasports Premier League">
</span>

Slug (= file)	Name	Slug (= file)	Name

ℹ️In the prototype the channel is random. The widget picks one from the list once at init and keeps it in m.tvc, so it does not change on every render. In production the real broadcaster comes from the feed — and if there is none, nothing is rendered (the row works fine without a logo).

05In context

The original use: a match meta row in the «Αναλύσεις ημέρας» widget. The logo sits at the end of the row, after the time or the live score.

21:45

Olympiacos – Panathinaikos

19:15

Greece – Italy

✔The name is not written and no TV icon is added. The logo is recognisable; the name beside it is noise and the icon is double encoding. That was a decision in the widget and it holds here too.

06Accessibility

Check	Rule
`alt`	Mandatory, carrying the channel name. The name does not exist as text anywhere else, so `alt=""` would hide information — this is NOT a decorative image.
`title`	Same text, for hover on desktop.
Contrast	Logos are exempt from text-contrast thresholds (brand marks). The surface rule in §02 still applies though: a vanished mark is not a contrast problem, it is a loss of content.
Size	Not a tap target — the logo is not clickable. If it ever becomes one, it needs its own ≥24px tap target, not a bigger logo.

07Build checklist

Copy the folder assets/tv/ and the 4 rules .tvlogo. No other dependency.
Height drives — height + width:auto + object-fit:contain. Never a fixed width.
Light surfaces only. If design asks for dark, ask for light variants first (§02).
Always alt + title with the channel name.
The slug comes from the feed and is the file name. No channel → nothing is rendered.
If a new channel is needed: export 2:1 from the Figma frame «Broadcasters Logos» (node 2703-12566), remove the dark backdrop, and make sure it reads on white.
Do not normalise the viewBox of youtube.svg without a re-export (§03).

Foxbet · Component: TV channel logos · 28 assets · source Figma «Broadcasters Logos» (1_Foxbet Design System, node 2703-12566).