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

Input field

Input fields allow users to enter editable text or numeric values into the UI.

Tactics Documentation Sport Turf Casino Payment Account

TWIG : Universes/_common/_twig/_components/_forms/_input_fields.twig
CSS : DesignSystem/_tactics/_components/_css/_common/_form/_fields.scss
DesignSystem/_tactics/_components/_css/_common/_form/_informations.scss
DesignSystem/_tactics/_components/_css/_common/_form/_infos.scss
DesignSystem/_tactics/_components/_css/_common/_form/_inputs.scss
DesignSystem/_tactics/_components/_css/_common/_form/_labels.scss
DesignSystem/_tactics/_components/_css/_common/_form/_password.scss
DesignSystem/_tactics/_components/_css/_common/_form/_sizes.scss
DesignSystem/_tactics/_components/_css/_common/_form/_textarea.scss
DesignSystem/_tactics/_components/_css/_common/_form/_validation.scss
JS : Universes/_common/_js/_forms.js
Angular component : <bcdk-input-base>

With placeholder

Basic

Classic

Valid + filled

Invalid

Error message

€

Error message

Disabled

With icons

With action button

Error message

Readonly

Small

Classic

Valid + filled

Invalid

Error message

€

Error message

Disabled

With icons

With action button

Error message

Readonly button

Basic Alt

With Label link

Basic

Classic

Label

Valid + filled

Label

Invalid

Label

Error message

€ Label

Error message

Disabled

Label

With icons

Label

With action button

Label

Readonly button

Label

Small

Classic

Label

Valid + filled

Label

Invalid

Label

Error message

€ Label

Error message

Disabled

Label

With icons

Label

With action button

Label

With action button

Label

Basic Alt

Label

With information link

With placeholder

Error message

Success message

Warning message

Waiting validation message

Informative message

With label

Label

Error message

Success message

Warning message

Waiting validation message

Informative message

With information Alt link

With placeholder

Error message

Success message

Warning message

Waiting validation message

Informative message

With label

Label

Error message

Success message

Warning message

Waiting validation message

Informative message

Columns link

Default link

Error message

Def Alt link

Error message

Code link

Here is a long message to inform the user.

Code Alt link

Here is a long message to inform the user.

Phone link

Error message

Phone Alt link

Error message

Textarea link

Basic

Classic

0 / 240

Valid + filled

79 / 240

Invalid

0 / 240

79 / 240

Disabled

0 / 240

Classic with information

Waiting validation message Commodo officia dolor deserunt esse ex link to internal content Incididunt Lorem ipsum aliquip ut consequat.

0 / 240

Expandable

0 / 240

Expandable with information

Waiting validation message link to internal content

0 / 240

Small

Classic

0 / 240

Valud + filled

79 / 240

Invalid

0 / 240

79 / 240

Disabled

0 / 240

Classic with information

Waiting validation message Commodo officia dolor deserunt esse ex link to internal content Incididunt Lorem ipsum aliquip ut consequat.

0 / 240

Expandable

0 / 240

Expandable with information

Waiting validation message link to internal content

0 / 240

Alt basic

Classic

0 / 240

Valid + filled

79 / 240

Invalid

0 / 240

79 / 240

Disabled

0 / 240

Classic with information

Waiting validation message Commodo officia dolor deserunt esse ex link to internal content Incididunt Lorem ipsum aliquip ut consequat.

0 / 240

Expandable

0 / 240

Expandable with information

Waiting validation message link to internal content

0 / 240

Alt small

Classic

0 / 240

Valud + filled

79 / 240

Invalid

0 / 240

79 / 240

Disabled

0 / 240

Classic with information

Waiting validation message Commodo officia dolor deserunt esse ex link to internal content Incididunt Lorem ipsum aliquip ut consequat.

0 / 240

Expandable

0 / 240

Expandable with information

Waiting validation message link to internal content

0 / 240