- 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
- Jockey cards
- Onboarding
- Race event
- Sections
- Ranking
- Badge
- Performance tag
- Tag
-
-
-
Payment
-
Components
-
-
Content
-
Widgets
-
Chatbot
-
Button
- Conversation
-
Window
-
-
-
Guidelines
-
Tactics components
-
Actions
-
Communication
-
Decorative
-
Forms
-
Navigation
-
- Visual testing
Mobile 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/_webapp/_css/_components/_header/_header.scss
Default
Background : Red
Default
Not subscribed/not logged
Not logged
Logged
Logged with notifications
Pattern
Not subscribed/not logged
Not logged
Logged
Logged with notifications
Primary
Background : White
Default
White
Not subscribed/not logged
Not logged
Logged
Logged with notifications
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
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
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
Scrolled
White
Not subscribed/not logged
Logged with notifications + Freebet (Sport FR)
Logged with disabled state
Close button + title + help and share 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
Bonus
Freebet (Sport FR)
Freerace (Turf FR)
Bonus Casino (Casino PT)
Freebet (Sport PL)
Freebet (Sport AFR)
Custom smart banner
Sport FR
Turf FR
Casino PT
Only custom smart banner
Tooltips
TLS tooltip (Sport FR)
Félicitations ! Bonus débloqué