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

Sport

Conversation

The is-active CSS classes are present on all hackFridayChat_message components to play an animation on the message when it appears. This CSS class must be added to the component after being injected to properly play the animation.
The content can contain both plain text and HTML.

Sport

TWIG component : Betclic/_sport/_webapp/_twig/_components/_hack_friday/_chat/_conversation.twig
CSS components : Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_avatar.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_conversation.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_messages.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_preloader.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_speaker.scss

Bot/Human agent speaker link

Default

Single

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Group

Irure ad Lorem

Non irure irure veniam qui excepteur proident ex dolor non minim esse aliqua.

Ullamco incididunt elit nostrud non commodo ex aliqua officia aute qui.

Ordered list

Velit id non ad aute aliquip ipsum :

Consectetur nostrud fugiat quis velit duis ullamco proident.
Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.
Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Unordered list

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Fugiat ut cupidatat :

Aliqua mollit in reprehenderit nisi consequat ea dolor.
Nulla cillum est nulla elit sit anim ullamco est consequat occaecat aute commodo fugiat eiusmod.
Sunt nulla proident officia et commodo eu do esse aute.
Irure ut nostrud nulla qui officia dolore commodo.

Highlighted text

Bold text

Irure eiusmod do commodo esse et qui excepteur laboris ullamco laborum est nisi eu.

Line break

Ipsum aliqua pariatur.
Irure : FGDHDG
esse et qui excepteur laboris ullamco laborum est nisi eu.

Emojis

🔥 Veniam amet exercitation elit irure excepteur veniam veniam ⏳.

Error

❌ Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Writing

Contextual classes on the chat_speaker component : is-writing

User speaker link

Default

Contextual classes on the chat_speaker component : is-user

Single

Sint dolore qui amet amet exercitation culpa reprehenderit do cillum commodo pariatur Lorem.

Group

Consectetur nostrud

Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.

Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.

On this page

Bot/Human agent speaker

User speaker