Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Mobile header
The header is a sticky, modular element that appears across the top of the application screen.
TWIG : Universes/_common/_twig/_components/_header.twig
CSS : DesignSystem/_tactics/_components/_css/_webapp/_header/_header.scss
Default
Background : Red
Default
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Pattern
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Primary
Background : White
Default
White
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
with logo custom
Pattern
White, with light grey SVG pattern
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Close button + brand title
Secondary
Background : Black
Pattern
Black, with dark grey SVG pattern
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Close button + brand title
Tertiary
Background : Transparent, and become white on scroll
Pattern
Transparent
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Alternative
Transparent
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Scrolled
White
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share button
Without Pattern
Transparent
Close button + title + edit button
Without pattern scrolled
White
Close button + title + edit button
Full screen not scrollable
Only transparent header because full screens have a background color
Stepper header
Modal header
All possible cases
Not subscribed/not logged
Not logged
Logged
Logged with notifications
Logged with active state
Logged with disabled state
Special cases
Only logo
Close button + Logo
Only close button
Close button + not subscribed/not logged
Close button + not logged
Close button + logged
Back button + logo + help button
Close button + logo + share button
Close button + title + help and share button
Close button + big title + help and share button
Close button + Deposit button
Close button + Betclic logo + disabled balance amount
Close button + Title + balance amount
Close button + balance amount + help button
Bonus
Freebet (Sport FR)
Freerace (Turf FR)
Freespin Casino (Casino PT)
Bonus Casino (Casino PT)
Freebet (Sport PL)
Freebet (Sport AFR)
Cash FCFA (Casino AFR)
Custom smart banner
Sport FR
Turf FR
Casino PT
Only custom smart banner
Tooltips
TLS tooltip (Sport FR)
Félicitations ! Bonus débloqué