description v26.45.3 palette 5.0.10-alpha.2 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 v26.45.3 palette 5.0.10-alpha.2 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
  - content_paste Content
    - Promotion
      - Alert
      - Block
      - Button
      - Card
      - Chip
      - Hero
      - Layout
      - Link
      - List
      - Media
      - Modal
      - Spacing
      - Tab
      - Table
      - Text
      - Title
  - group Social
    - Sport
      - My bets card
      - 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
        
        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
        
        Token boost
    - Onboarding
    - 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
    - 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

Tactics components

Overlay

Overlay component is used to display something on top of the page.
It can be used to display a lottie animation, or any other animation that needs to be displayed on top of the page. The overlay component can be move to a specific location in the DOM, and can be hidden by default or after a certain time.

phone_iphone All universes

TWIG : Universes/_common/_twig/_components/_overlay/_overlay.twig
CSS : DesignSystem/_tactics/_components/_css/_common/_overlay/_overlay.scss

Lottie link

Default link

The lottie component is positionned by default, but it can be positionned dynamically in JS.

Centered link

Contextual class on the lottie component : is-centered

Full link

Contextual class on the lottie component : is-full

Full horizontal link

Contextual class on the lottie component : is-fullHorizontal

Full vertical link

Contextual class on the lottie component : is-fullVertical

Full horizontal centered link

Contextual classes on the lottie component : is-fullHorizontal is-centered

Full vertical centered link

Contextual classes on the lottie component : is-fullVertical is-centered

Full centered link

Contextual classes on the lottie component : is-full is-centered

Custom position link

Contextual class on the lottie component : is-centered
Custom style on the lottie component : top:100px;width:100px;

Rive link

Default link

The rive component is positionned by default, but it can be positionned dynamically in JS.

Centered link

Contextual class on the rive component : is-centered

Full link

Contextual class on the rive component : is-full

Full horizontal link

Contextual class on the rive component : is-fullHorizontal

Full vertical link

Contextual class on the rive component : is-fullVertical

Full horizontal centered link

Contextual classes on the rive component : is-fullHorizontal is-centered

Full vertical centered link

Contextual classes on the rive component : is-fullVertical is-centered

Full centered link

Contextual classes on the rive component : is-full is-centered

Custom position link

Contextual class on the rive component : is-centered
Custom style on the lottie component : top:100px;width:100px;

On this page

Full horizontal

Full horizontal centered

Full vertical centered

Custom position

Full horizontal

Full horizontal centered

Full vertical centered

Custom position