Studio Web

Visual testing

Visual testing is disabled for the moment
Manifest files

Github
Confluence
Jira
Jenkins
Firebase
Browserstack

light_mode

dark_mode

description v26.26.1 palette 4.0.5 palette 2.43.7

Getting started
- visibility Templates overview
- Guidelines
  - insert_photo Iconography
  - font_download Typography
- Components

Guidelines
- Iconography
  - flag Flags
  - sports_soccer Sports
- Typography
  - text_rotation_none Betclic variable
  - text_fields Roboto
Components
- Shared
  - policy DGS
    - Fullscreen Modal
      - Desktop
      - Mobile
    - Banner
      - Desktop
      - Mobile
- Universes
  - person Account
    - Guidelines
    - Modals
  - casino Casino
    - Banners
      - Gamification
        
        Desktop
        
        Mobile
    - Button
      - Play
    - Bottom Sheet
    - Game cards
      - Desktop
      - Mobile
    - Modal
    - Navigation
      - Header
        
        Mobile
    - ProgressBar
    - Prize drop
      - Game card
        
        Mobile
        
        Desktop
      - Overlay
  - smart_toy Chat
    - Banner
    - Button
    - Cards
      - Deposit
      - 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
  - group Social
    - Sport
      - Profile
        
        Avatar
        
        Favorites
        
        Performances
        
        Relations
        
        Statistics
        
        User informations
        
        Visibility
  - sports_soccer Sport
    - Alert
    - Badge
      - Inline
    - Banner
    - Bottom sheet
    - Cards
      - Player card
      - Top multiple
    - Events
      - Cards
        
        Live
        
        Prelive
      - Headers
        
        Live
        
        Prelive
      - Statistics
        
        Bracket
        
        Lineup
        
        Match center
        
        Live
        
        Performances
        
        Players
        
        Ranking
        
        Rounds
        
        Momentum
        
        Momentum v1
        
        Momentum v2
    - Modal
    - Freequest
    - Goalbooster
      - Cards
      - Pickers
      - Timers
    - Hack friday
      - Chat
        
        Conversation
        
        Window
      - Progressbar
      - Program card
    - Pinata
      - Lucky draw
        
        Challenge card
    - Markets
      - Live
      - Prelive
    - Missions
      - Jackpot
        
        Challenge 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
    - Tag
  - 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
    - Pinata
      - Lucky draw
        
        Challenge card
    - Progressive betting slip
      - Common
        
        Footers
        
        Cards
      - Mobile
        
        Strips
        
        Headers
        
        Content
        
        Fastbet
      - Desktop
        
        Headers
    - Race cards
    - Race event
    - Ranking
    - Sections
    - Tag
    - Timer
  - widgets Widget
    - Composition football
    - Virtual sport
- 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
    - Overlay
  - looks Decorative
    - Animations
    - Loader
    - Rive
    - Separator
    - Skeleton
  - mode Forms
  - menu Navigation
    - Bottom navigation
    - Context menu
    - Footer
      - Desktop
      - Mobile
    - Header
      - Desktop
      - Mobile
    - Tab bar

Progressive betting slip strips

phone_iphone Sport

TWIG component : Universes/_sport/_webapp/_twig/_components/_progressive_betting_slip/_progressive_betting_slip_strip.twig
CSS components : Universes/_common/_webapp/_css/_components/_progressive_betting_slip/_progressive_betting_slip_strip.scss
JS components : Universes/_common/_webapp/_js/_progressive_betting_slip_strip.js

Types link

Progressive betting slip strips are available in 5 different sizes to fit all your needs.

Default

The Default case is used for displaying the maximum amount of information in the betting slip and when the fastbet block is embedded.

Validated bet !

Possible winnings

97,20 €

Marseille

Résultat du match

X small

When the betting slip is stuck between big left navigation tab bar or single context menu and it is to small to display the market bets information, only the odds are displayed.

Small

When the betting slip is placed on the right of a single big left navigation tab bar

Marseille

Résultat du match

Medium

When the betting slip is stuck between 2 navigations tab bar.

Marseille

Résultat du match

Large

When the betting slip is placed on the right of a single small left navigation tab bar.

Marseille

Résultat du match

X Large

When the betting slip takes up all the available width.

Marseille

Résultat du match

Singles link

Different states for single bets in the progressive betting slip.

Single (default)

Marseille

Résultat du match

Single (Rising odd)

Marseille

Résultat du match

Single (Falling odd)

Marseille

Résultat du match

Single (with error)

Nul, Marseille

Simple (2)

Single (with suspended odd)

Marseille

Résultat du match

Single (with no tax / only for PL)

Combined link

Different states for combined bets in the progressive betting slip.

Combined (default)

Paris SG, Marseille

Combiné (2)

Combined (default)

Manchester City, E. Haaland, Non

MyCombi (3)

Combined (with long text)

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Edit bet link

Special case for editing bets in the progressive betting slip.

Edit bet (default)

Gains : 16,60 €

Combiné (2)

Edit bet (with error)

Gains : -

Combiné (3)

Fastbet link

The fastbet display allow to bet quickly with preset amounts from the progressive betting slip.

Pari validé !

Gains possibles

97,20 €

Marseille

Résultat du match

Odds formatting link

The odds are formatting with different font size and weight to be more visible for the users and to highlight the changes of odds.

Animated link

Types link

Animations for different odds and features in the progressive betting slip.

Pari validé !

Gains possibles

97,20 €

Marseille

Résultat du match

Odds link

Animations for different odds and features in the progressive betting slip.

Default

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Multiboost

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Odd animation

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Odd animation with multiboost

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Early Win link

Default

Kylian Mbappé

Buteur (temps réglementaire)

With fastbet

Pari validé !

Gains possibles

97,20 €

Marseille

Résultat du match

XtraWin link

Default

Kylian Mbappé

Buteur du match (temps réglementaire)

With fastbet

Pari validé !

Gains possibles

97,20 €

Kylian Mbappé

Buteur du match (temps réglementaire)

Multiboost link

Default

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

Alternative (with rive)

K. Mbappé, Lyon, + de 3,5, Paris SG, Marseille Veniam nisi ut laboris minim anim

Combiné (30)

With fastbet

Pari validé !

Gains possibles

97,20 €

Marseille

Résultat du match

Supersub link

Default

Kylian Mbappé

Buteur (temps réglementaire)

With fastbet

Pari validé !

Gains possibles

97,20 €

Marseille

Résultat du match

On this page

Types

Singles

Combined

Edit bet

Fastbet

Odds formatting

Animated

Types

Odds

Early Win

XtraWin

Multiboost

Supersub