Studio Web

Visual testing

Visual testing is disabled for the moment
Manifest files

Github
Confluence
Jira
Jenkins
Firebase
Browserstack

light_mode

dark_mode

description v25.51.0 palette 3.7.4 palette 2.43.7

Getting started
- visibility Templates overview
- Guidelines
  - insert_photo Iconography
  - font_download Typography
- Components
  - public Universes
  - palette Tactics

Guidelines
- Iconography
  - flag Flags
  - sports_soccer Sports
- Typography
  - text_rotation_none Betclic variable
  - text_fields Roboto
Components
- Universes
  - person Account
    - Guidelines
  - casino Casino
    - Banners
      - Gamification
        
        Desktop
        
        Mobile
    - Button
      - Play
    - Bottom Sheet
    - Game cards
      - Desktop
      - Mobile
    - Modal
    - Navigation
      - Header
        
        Mobile
    - ProgressBar
  - smart_toy Chat
    - Banner
    - Button
    - Cards
      - File
      - Withdrawal
    - Conversation
    - Progress bar
      - Circular
    - Window
      - Desktop
      - Mobile
  - content_paste Content
    - Promotion
      - Alert
      - Block
      - Button
      - Card
      - Chip
      - Hero
      - Layout
      - Link
      - List
      - Media
      - Modal
      - Spacing
      - Tab
      - Table
      - Text
      - Title
  - euro_symbol Payment
    - Deposit
      - Buttons
    - Payment cards
    - Text Input
    - Withdraw
      - Payment card
  - sports_soccer Sport
    - Alert
    - Bottom sheet
    - Cards
      - Player card
      - Top multiple
    - Custom keyboard
    - Events
      - Cards
        
        Live
        
        Prelive
      - Headers
        
        Live
        
        Prelive
      - Statistics
        
        Lineup
        
        Momentum
        
        Momentum v1
        
        Momentum v2
    - Modal
    - Freequest
    - Goalbooster
      - Cards
      - Pickers
      - Timers
    - Hack friday
      - Chat
        
        Conversation
        
        Window
      - Progressbar
      - Program card
    - Modal
    - My bets
      - Cards
        
        Prelive
        
        Canceled
        
        Cashout
        
        Lost
        
        Ongoing
        
        Won
        
        Live
        
        Cashout
        
        Lost
        
        Ongoing
        
        Won
        
        Safebet
    - Onboarding
    - Picker
    - Progressive betting slip
      - Common
        
        Footers
      - Desktop
        
        Cards
        
        Headers
      - Mobile
        
        Cards
        
        Fastbet
        
        Headers
        
        Strips
  - bedroom_baby Turf
    - Badge
    - Boosted cards
    - Button
      - Checkout
    - Freequest
    - Meeting cards
    - Jockey cards
    - Market types
    - My bets
      - Cards
        
        Canceled
        
        Lost
        
        Ongoing
        
        Won
    - Meeting cards
    - Onboarding
    - Performance tag
    - Progressive betting slip
      - Common
        
        Footers
        
        Cards
      - Mobile
        
        Strips
        
        Headers
        
        Content
        
        Fastbet
      - Desktop
        
        Headers
    - Race cards
    - Race event
    - Ranking
    - Sections
    - Tag
  - widgets Widget
- Tactics
  - call_to_action Actions
    - Button
      - Betting
      - Cashout
      - Circle
      - Ghost
        
        Ghost
        
        Ghost Interactive
        
        Ghost Primary
        
        Ghost Secondary
        
        Ghost Tertiary
      - Primary
      - Secondary
      - Structure
      - Tertiary
    - Custom keyboard
    - Dropdown
    - Filter (Chip)
    - Link
    - List
    - Segmented control
    - Slider
    - Switch
    - Tab
  - hub Communication
    - Alert
    - Badge
      - Corner
      - Inline
    - Banner
      - Offer
      - Referral
      - Reminder
      - Welcome
    - Bottom sheet
    - Modal
    - Notification
    - Progress bar
    - Snackbar
    - Tag
    - Timer
    - Tooltip
  - looks Decorative
    - Animations
    - Rive
    - Separator
    - Skeleton
  - mode Forms
  - menu Navigation
    - Footer
      - Desktop
      - Mobile
    - Header
      - Desktop
      - Mobile
    - Tab bar

Tactics components

Desktop header

The header is a sticky, modular element that appears across the top of the application screen.

Tactics Documentation desktop_windows All universes

TWIG : Universes/_common/_twig/_components/_header.twig
CSS : DesignSystem/_tactics/_components/_css/_desktop/_header/_header.scss

Default

Background : Red

Pattern

Red, with dark red SVG pattern

Not subscribed/not logged

Not logged

Logged

Logged with notifications without label

Logged

Logged with notifications without label

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

Logged without label

Logged with notifications and without label

Logged with active state and without label

Logged with disabled state and without label

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

2 560,70 €

Close button + balance amount + help button

100,00 €

2 560,70 €

Bonus

Freebet (Sport FR)

Freerace (Turf FR)

Bonus Casino (Casino PT)

casino bonus (Casino PT)

Freebet (Sport PL)

Freebet (Sport AFR)

Cash FCFA (Casino AFR)

Tooltips

TLS tooltip (Sport FR)

100,00 €

2 560,70 €

TLS tooltip (Sport FR) without label

100,00 €

2 560,70 €