Design → Dev Handover

01The buttons

Four variants. V1 standalone is the neutral card — no bookmaker, label and odd either side of a hairline; V8 is that card with the operator's icon added as a third cell. V6 bare is logo + odd and V7 adds the selection inside the chip with a rule between; those two are brand-fill, and each has a desktop and a stacked mobile form (same markup, plus .bodd--m). Everything below this is reference.

V8 · .modd--bk · mark | selection | odd · derived, no node

12.00 X3.65 23.65

V8 · the width still hugs · floor 88.67 + 55px

O 2.51.85 G/G Όχι2.20 Γκολ 2-32.05

V8 · all 16 operators — the mark carries its own background, so none needs a token

12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00 12.00

197 × 48 · best odds per selection

3.12 1.85 3.65

V6 mobile · 101 × 81 · .bodd--m · derived, no node

3.12 1.85 7.50

States · Figma 11252:107363 · hover the middle one, tab to the third

3.12 Default 3.12 Hover — forced here; the real one is :hover 3.12 Focus — forced; the real one is :focus-visible 3.12 Disable — .is-susp

V7 desktop · Figma 11309:72 · 225 × 48

13.12 O 2.51.85 2-17.50

V7 mobile · Figma 11313:371 · 101 × 81 · .bodd--m

13.12 X3.65 23.65

02Bookmaker logo assets

Every operator tile the component can render. The V2 and V3 variants (§02) place one of these beneath the odd; V1 uses none. Since v4.1 they use the plain-light / plain-dark type, not rectangle. Logos are exported from Figma page «🧩 Logos» → bookmakers-logos into logo-assets/. Click any asset name to open the SVG. Colours are listed so the .bk-* class can be verified against the artwork.

Operator	Tile	Asset	Class	Background
Stoiximan		rectangle/stoiximan.svg	bk-stoiximan	#0055FF
bet365		rectangle/bet365.svg	bk-bet365	#005440
Fonbet		rectangle/fonbet.svg	bk-fonbet	#D42B28
Betsson		rectangle/betsson.svg	bk-betsson	#F26722
Interwetten		rectangle/interwetten.svg	bk-interwetten	#FFD200
Sportingbet		rectangle/sportingbet.svg	bk-sportingbet	#1E87C9
Vistabet		rectangle/vistabet.svg	bk-vistabet	#F05722
Novibet		rectangle/novibet.svg	bk-novibet	#303540 charcoal, not the DS teal — follow the artwork
NetBet		rectangle/netbet.svg	bk-netbet	#333743
N1 Casino		rectangle/n1casino.svg	bk-n1casino	#212121
bwin		rectangle/bwin.svg	bk-bwin	#000000
Elabet		rectangle/elabet.svg	bk-elabet	#11143E → #172B89 gradient — .bk-elabet sets background directly, not --bk
Pamestoixima (long)		rectangle/pamestoixima-long.svg	bk-pamestoixima-long is-tall	#B92128 — mark fills the tile, so it scales rather than crops (§03)
Pamestoixima		rectangle/pamestoixima.svg	modd-bk is-lt	#FFFFFF
Winmasters		rectangle/winmasters.svg	modd-bk is-lt	#FFFFFF
Winmasters 2		rectangle/winmasters-2.svg	modd-bk is-lt	#FFFFFF

The full library — all five types per brand (rectangle, circle-large, circle-small, plain-dark, plain-light) — is in logo-assets/. This component uses rectangle only.

03Variant map

Two variants ship, each in a desktop and a mobile form. Both are brand-fill pills built on the same shell, so the gradient, the ledge, the operator colours and all four states are defined once and inherited.

04Spec — V1 standalone

No bookmaker is named, so there is no tile: one white card holding the selection and the odd, split by a hairline. Neutral editorial contexts. Replaced 2026-07-30 from Figma «Odds CTA» 10001:631.

05Spec — V8, V1 with bookmaker

V1 plus a bookmaker icon, inside the same pill: mark | selection | odd, three cells split by two hairlines. Use it where the price is attributable to one operator but a brand-coloured control would be too loud. Built as a modifier on V1 — .modd--bk adds the icon cell and nothing else, so the card, the type, the states and the loading and suspended treatments are V1's.

06Spec — V6 / V7 new

Figma 21016:61050 (V6), 11309:72 and 11313:371 (V7 desktop / mobile). Both are brand-fill pills on one shell, so the gradient, ledge, operator colours and states are defined once.

07Design tokens

08Responsible gaming & regulatory

• No variant renders an inline line. Do not re-add .modd-rg; the CSS rule is gone and a tombstone comment sits in its place.
• The host page must carry the message. On the analysis page that is the sticky 21+ ΕΕΕΠ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ skin bar and the full ΕΕΕΠ footer row — see handover-footer-eeep.html. Both are verified present on foxbet-responsive.html and foxbet-responsive-live.html.
• This is a page-level contract, not a component one. If the component is ever syndicated into a page that does not carry the ΕΕΕΠ bar and footer, the inline line has to come back for every variant that names an operator — the component alone is then not compliant.
• Naming an operator is what triggers the obligation, so V1 was never affected either way.

09Accessibility

V4 / V5 — the brand-fill family. Full per-operator ratios are in §3A·1; the summary and the two blockers are here.

10Markup — copy/paste

Two variants, four forms. The mobile forms use the same markup as their desktop counterpart plus .bodd--m — nothing is re-rendered at a breakpoint, so a consumer can add that class by media query and be done.

<!-- V1 STANDALONE — no bookmaker.  height 41px, width hugs from 88.67px -->
<div class="moddgrid">
  <a class="modd" href="{deeplink}" target="_blank" rel="noopener" title="Ολλανδία">
    <span class="modd-card">
      <span class="modd-sel"><span class="modd-lbl">1</span></span>
      <span class="od">2.00</span>
    </span>
  </a>
  <!-- desktop only: a hairline between markets -->
  <span class="modd-div" aria-hidden="true"></span>
</div>

<!-- NOTE: V1 has NO .bo wrapper and no bo-<operator> class. It names no bookmaker. -->

<!-- V8 — V1 WITH BOOKMAKER.  mark | selection | odd.  height 41px, width hugs -->
<a class="modd modd--bk" href="{deeplink}" target="_blank" rel="noopener" title="Ολλανδία — Stoiximan">
  <span class="modd-card">
    <span class="modd-ic"><img src="logo-assets/rectangle/stoiximan.svg" alt="Stoiximan"></span>
    <span class="modd-sel"><span class="modd-lbl">1</span></span>
    <span class="od">2.00</span>
  </span>
</a>

<!-- rectangle (2:1), NOT plain-light and NOT circle-large: the mark needs its
     own background, and a 24px circle is too small to read -->

<!-- V6 BARE — logo + odd.  197 × 48 desktop, +.bodd--m = 101 × 81 stacked -->
<span class="bo">
  <a class="bodd bodd--pill bo-stoiximan" href="{deeplink}"
     target="_blank" rel="noopener" title="1 — Stoiximan">
    <span class="bodd-bk"><img src="logo-assets/plain-light/stoiximan.svg" alt="Stoiximan"></span>
    <span class="bodd-in"><span class="bodd-od">3.12</span></span>
  </a>
</span>

<!-- V7 WITH SELECTION — logo + selection | odd.  225 × 48 desktop, +.bodd--m = 101 × 81 -->
<span class="bo">
  <a class="bodd bodd--pill bodd--sel bo-bet365" href="{deeplink}"
     target="_blank" rel="noopener" title="O 2.5 — bet365">
    <span class="bodd-bk"><img src="logo-assets/plain-light/bet365.svg" alt="bet365"></span>
    <span class="bodd-in">
      <span class="bodd-lbl">O 2.5</span>
      <span class="bodd-sep" aria-hidden="true"></span>
      <span class="bodd-od">1.85</span>
    </span>
  </a>
</span>

<!-- light fill: add is-lt AND use the plain-dark export -->
<a class="bodd bodd--pill bodd--sel bo-interwetten is-lt" …>

<!-- disabled: .is-susp + aria-disabled -->
<a class="bodd bodd--pill bo-bet365 is-susp" aria-disabled="true" …>

11Build checklist

1. V1 is the neutral family: .moddgrid → .modd → .modd-card, with .modd-sel + .modd-lbl and .od inside. No .bo wrapper, no operator class — it names no bookmaker.
2. V1's width hugs: min-width:88.67px is a floor and the 24 / 46px text slots are floors too. Never make them fixed — O 2.5, G/G Όχι and Γκολ 2-3 all need the room.
3. V1's label is regular 400 and its odd bold 700, both 14px --ink: weight is the only thing separating them, plus the hairline. Not Roboto Mono, not --acc orange.
4. V8 is .modd plus .modd--bk, with .modd-ic as the first child of .modd-card. Inherit everything else from V1 — do not re-declare the card, the type or the states.
5. V8's mark is logo-assets/rectangle/<operator>.svg at 48 × 24. Never plain-light (no background of its own, so it disappears on the white card) and never circle-large (unreadable at 24px).
6. Wrap in .bo; put bo-<operator> on the .bodd itself.
7. V6 = .bodd.bodd--pill (197 × 48). V7 adds .bodd--sel (225 × 48) plus the .bodd-lbl and .bodd-sep children.
8. Mobile = the same markup plus .bodd--m (101 × 81, stacked, chip on top). Apply it by media query; do not re-render.
9. Logo asset is plain-light, or plain-dark with is-lt on a light fill. Never rectangle — it bakes in its own background.
10. Give every operator a --bk. elabet is the one that ships a background instead, so it also declares --bk for the ramp (§06).
11. States come free from .bodd--pill: hover 80%, disabled 50% via .is-susp + aria-disabled, focus ring from the family. Do not re-declare them.
12. Odds are data: V6 shows one price, V7 shows selection + price. Best-odds vs sponsored is a feed decision, not a variant.
13. Check contrast per operator before shipping a new one — the white odd on a light fill needs is-lt (§09).