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

Autocomplete

Account

TWIG : Universes/_common/_twig/_components/_forms/_autocomplete.twig
CSS : DesignSystem/_tactics/_components/_css/_common/_form/_autocomplete.scss
JS : Universes/_common/_js/_forms.js

With placeholder

Basic

Default

Option 1

Option 2

Option 3

Option 4

With data value

Option 1

Option 2

Option 3

Option 4

With icon

Option 1

Option 2

With icon (data icon)

Option 1

Option 2

With icon (flag id)

France

Pologne

Portugal

Côte d'Ivoire

With icon (data flag id)

France

Pologne

Portugal

Côte d'Ivoire

With value

Option 1

Option 2

Option 1

Option 2

France

Pologne

Portugal

Côte d'Ivoire

Disabled

Option 1

Option 2

Option 3

Option 4

Option 1

Option 2

Option 1

Option 2

France

Pologne

Portugal

Côte d'Ivoire

Small

Default

Option 1

Option 2

Option 3

Option 4

With data value

Option 1

Option 2

Option 3

Option 4

With icon

Option 1

Option 2

With icon (data icon)

Option 1

Option 2

With icon (flag id)

France

Pologne

Portugal

Côte d'Ivoire

With icon (data flag id)

France

Pologne

Portugal

Côte d'Ivoire

With value

Option 1

Option 2

Option 1

Option 2

France

Pologne

Portugal

Côte d'Ivoire

Disabled

Option 1

Option 2

Option 3

Option 4

Option 1

Option 2

Option 1

Option 2

France

Pologne

Portugal

Côte d'Ivoire

With label

Basic

Default

Label

Option 1

Option 2

Option 3

Option 4

With data value

Label

Option 1

Option 2

Option 3

Option 4

With icon

Label

Option 1

Option 2

With icon (data icon)

Label

Option 1

Option 2

With icon (flag id)

Label

France

Pologne

Portugal

Côte d'Ivoire

With icon (data flag id)

Label

France

Pologne

Portugal

Côte d'Ivoire

With value

Label

Option 1

Option 2

Label

Option 1

Option 2

Label

France

Pologne

Portugal

Côte d'Ivoire

Disabled

Label

Option 1

Option 2

Option 3

Option 4

Label

Option 1

Option 2

Label

Option 1

Option 2

Label

France

Pologne

Portugal

Côte d'Ivoire

Small

Default

Label

Option 1

Option 2

Option 3

Option 4

With data value

Label

Option 1

Option 2

Option 3

Option 4

With icon

Label

Option 1

Option 2

With icon (data icon)

Label

Option 1

Option 2

With icon (flag id)

Label

France

Pologne

Portugal

Côte d'Ivoire

With icon (data flag id)

Label

France

Pologne

Portugal

Côte d'Ivoire

With value

Label

Option 1

Option 2

Label

Option 1

Option 2

Label

France

Pologne

Portugal

Côte d'Ivoire

Disabled

Label

Option 1

Option 2

Option 3

Option 4

Label

Option 1

Option 2

Label

Option 1

Option 2

Label

France

Pologne

Portugal

Côte d'Ivoire