description v25.51.0 palette 3.7.4 palette 2.43.7

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

Sport

Window

The scroll to bottom is made in JS to automatically scroll to the last message.

Sport

TWIG component : Betclic/_sport/_webapp/_twig/_components/_hack_friday/_chat/_chat.twig
CSS components : Betclic/_sport/_webapp/_css/_components/_hack_friday/_chat/_window/_content.scss
Betclic/_sport/_webapp/_css/_components/_hack_friday/_chat/_window/_footer.scss
Betclic/_sport/_webapp/_css/_components/_hack_friday/_chat/_window/_header.scss
Betclic/_sport/_webapp/_css/_components/_hack_friday/_chat/_window/_window.scss
JS components : Betclic/_sport/_webapp/_js/_components/_hack_friday/_chat.js
Betclic/_sport/_webapp/_js/_components/_hack_friday/_cookie_chat.js

Default link

Landing

The landing appears with animation. The header is transparent and the logo is hidden.

With scroll

When there are many messages, the content is scrollable and the header blurs.

0€

23:59:54

1

👾 Hey ! J’ai piraté l’app Betclic… et j’y ai caché plein de codes secrets.

Chaque code te fera gagner des Feebets + une clé 🔑 pour tenter d’ouvrir le coffre et gagner un mega jackpot.

Pour commencer, voici ton premier code : F33BET
Teste-le dans le champ en bas 👇

F3BETE

👏 Bravo ! Tu as débloqué ton 1er code, obtenu 1€ de Feebets et donc compris la mécanique.

Parlons maintenant de ce qui vient d’apparaître en haut de l’écran 👀💰 Ce coffre c’est notre fameux jackpot, rempli de gains à partager. Clique dessus pour en savoir + et voir ton compteur de codes validés !

When the bot or human agent is writing

0€

👾 Hey ! J’ai piraté l’app Betclic… et j’y ai caché plein de codes secrets.

Chaque code te fera gagner des Feebets + une clé 🔑 pour tenter d’ouvrir le coffre et gagner un mega jackpot.

Pour commencer, voici ton premier code : F33BET
Teste-le dans le champ en bas 👇