- Home
-
Universes
-
Account
-
Casino
-
Components
-
Game cards
-
Banners
-
Navigation
-
Header
-
- Modal
- Bottom Sheet
- ProgressBar
-
- Guidelines
-
-
Sport
-
Components
-
Guidelines
-
Iconography
-
-
-
Turf
-
Components
-
Progressive betting slip
- Market types
- Boosted cards
- Race cards
- Meeting cards
- Onboarding
- Race event
- Sections
- Ranking
-
-
-
Payment
-
Components
-
-
Content
-
Widgets
-
Chatbot
-
-
Guidelines
-
Tactics components
-
Actions
-
Communication
-
Forms
-
Navigation
-
- Visual testing
Desktop header
The header is a sticky, modular element that appears across the top of the application screen.
TWIG : Betclic/_common/_twig/_components/_header.twig
CSS : Betclic/_tactics/_desktop/_css/_components/_header/_header.scss
Default
Background : Red
Pattern
Red, with dark red SVG pattern
Not subscribed/not logged
Not logged
Logged
Logged with notifications
Primary
Background : Liverly red
Default
Liverly red
Only close button
Close button + Logo
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 + logo + share button
Close button + not subscribed/not logged
Close button + not logged
Close button + logged
Close button + Betclic logo + disabled balance amount
Bonus
Freebet (Sport FR)
Freerace (Turf FR)
Bonus Casino (Casino PT)
Freebet (Sport PL)
Freebet (Sport AFR)
Tooltips
TLS tooltip (Sport FR)
Félicitations ! Bonus débloqué