home Home
language Universes
- person Account
  - article Guidelines
- casino Casino
  - settings_input_component Components
    - space_dashboard Game cards
      - desktop_windows Desktop
      - smartphone Mobile
    - space_dashboard Banners
      - desktop_windows Gamification
        
        desktop_windows Desktop
        
        smartphone Mobile
    - menu Navigation
      - picture_in_picture Header
        
        Mobile
    - space_dashboard Modal
    - space_dashboard Bottom Sheet
    - space_dashboard ProgressBar
  - article Guidelines
- sports_soccer Sport
  - settings_input_component Components
    - stadium Events
      - Cards
        
        Live
        
        Prelive
    - receipt_long My bets
      - Cards
        
        Prelive
        
        Canceled
        
        Cashout
        
        Lost
        
        Ongoing
        
        Won
        
        Live
        
        Cashout
        
        Lost
        
        Ongoing
        
        Won
    - settings_accessibility Onboarding
    - swipe_vertical Picker
    - space_dashboard Progressive betting slip
      - devices Common
        
        Footers
      - smartphone Mobile
        
        Strips
        
        Headers
        
        Cards
      - desktop_windows Desktop
        
        Headers
        
        Cards
    - paid Sanka
      - Cards
      - Timers
      - Pickers
    - paid Goalbooster
      - Cards
      - Pickers
  - article Guidelines
    - insert_photo Iconography
      - sports_soccer Sports
- bedroom_baby Turf
  - settings_input_component Components
    - space_dashboard Progressive betting slip
      - phone_android X-Sell
        
        Strips
        
        Headers
        
        Cards
        
        Footers
    - category Market types
    - view_carousel Boosted cards
    - view_agenda Race cards
    - dashboard_customize Meeting cards
    - settings_accessibility Onboarding
    - dashboard_customize Race event
    - view_headline Sections
    - stars Ranking
- euro_symbol Payment
  - settings_input_component Components
    - text_fields Text Input
    - text_fields Combo box in input
- content_paste Content
  - local_offer Promotion
    - settings_input_component Components
      - Alert
      - Block
      - Button
      - Card
      - Chip
      - Hero
      - Layout
      - Link
      - List
      - Media
      - Modal
      - Spacing
      - Tab
      - Table
      - Text
      - Title
- widgets Widgets
  - space_dashboard Football composition
  - space_dashboard Football player statistics
article Guidelines
- font_download Typography
- palette Colors
- local_fire_department Logos
- insert_photo Iconography
settings_input_component Tactics components
- call_to_action Actions
  - smart_button Button
    - Betting
    - Cashout
    - Circle
    - Ghost
    - Grouped
    - Primary
    - Secondary
    - Special
    - Structure
    - Tertiary
  - drag_handle Dropdown
  - tune Filter (Chip)
  - link Link
  - list List
  - games Segmented control
  - linear_scale Slider
  - toggle_on Switch
  - tab Tab
- hub Communication
  - badge Badge
    - Corner
    - Inline
  - crop_7_5 Banner
    - Offer
    - Referral
    - Reminder
    - Welcome
  - campaign Alert
  - keyboard_double_arrow_up Bottom sheet
  - chat_bubble_outline Modal
  - notifications Notification
  - signal_cellular_alt Progress bar
  - swap_vertical_circle Snackbar
  - more Tag
  - timer Timer
  - chat_bubble_outline Tooltip
- mode Forms
- menu Navigation
  - picture_in_picture Header
    - Desktop
    - Mobile
  - picture_in_picture_alt Footer
  - view_week Tab bar
bug_report Visual testing

Home
Tactics components
Communication
Modal

Release 24.47.6

Tactics 2.11.0

light_mode

dark_mode

Modal

Modals focus the user's attention towards a single piece of information or request. They are an interface element that appears over other content.

Tactics Documentation desktop_windows All universes

TWIG : Betclic/_common/_twig/_components/_modal.twig
CSS : Betclic/_tactics/_common/_css/_components/_modal/_modal.scss
JS : Betclic/_common/_js/_modal.js

Basic

Title

Do id in duis aute reprehenderit elit duis nostrud et. Et qui ut voluptate proident occaecat.

Title

Subtitle

Do id in duis aute reprehenderit elit duis nostrud et. Et qui ut voluptate proident occaecat.

Récompenses

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Subtitle

Do id in duis aute reprehenderit elit duis nostrud et. Et qui ut voluptate proident occaecat.

Content scroller

Title

Tab 1
Tab 2

Ex tempor voluptate amet sint nostrud cupidatat officia pariatur incididunt. Elit mollit commodo adipisicing tempor velit id sunt incididunt quis ea sit voluptate reprehenderit. In nisi exercitation magna id veniam sint ut irure adipisicing nulla nulla id non. Ullamco veniam id dolor velit nostrud eiusmod labore et eiusmod enim ex. Ut voluptate id exercitation occaecat voluptate minim excepteur qui laboris deserunt id. Consectetur consectetur Lorem aliquip consequat aliqua. Dolor incididunt labore dolore ea commodo consectetur in incididunt mollit incididunt laborum laborum nisi. Cillum proident ad minim tempor occaecat anim velit veniam consectetur est ipsum minim. Reprehenderit sunt eu do esse. Enim dolor officia fugiat ullamco anim nostrud non enim quis sit aute. Ipsum eiusmod elit anim nostrud aute. Minim fugiat ipsum deserunt ipsum voluptate dolore eiusmod. Anim eiusmod officia magna amet adipisicing enim exercitation do mollit. Dolor aliqua minim laboris elit deserunt ullamco veniam est id. Est pariatur quis proident nisi ea ipsum duis laborum tempor. Commodo nisi quis sint officia reprehenderit commodo. Aliquip cupidatat tempor commodo id incididunt consectetur aliquip eu. Labore magna est velit id amet. Est deserunt commodo irure ut amet irure ipsum commodo nulla enim labore sit cillum. In enim eu exercitation amet occaecat nostrud magna velit consequat voluptate. Ea tempor aliquip ipsum qui do est adipisicing laborum consequat cupidatat aliqua enim nostrud qui.

Tempor ad culpa non do non exercitation aliquip minim proident consequat ex. Esse ipsum deserunt minim quis elit amet adipisicing laboris deserunt in magna. Incididunt est id qui veniam duis ullamco ea et deserunt pariatur. Eu pariatur excepteur nisi enim pariatur amet excepteur aliquip culpa aute aliquip esse. Labore dolore consequat reprehenderit fugiat ad commodo velit quis sint laboris laboris dolor id laboris. Proident labore laborum non irure mollit nulla. Eu officia ad elit cupidatat et. Id voluptate laborum pariatur ad pariatur laborum est excepteur cupidatat. Tempor fugiat incididunt esse ad. Commodo aute deserunt dolore culpa veniam.

Branded

Mycombi

Cash Out

Multi+

Boosted odd

Do id in duis aute reprehenderit elit duis nostrud et. Et qui ut voluptate proident occaecat. Ipsum cupidatat excepteur qui in eiusmod et quis officia in officia ut eiusmod adipisicing. Irure dolore ipsum ut laborum Lorem consectetur veniam anim occaecat culpa mollit pariatur pariatur esse. Non dolor consectetur duis enim anim id mollit. Id aliqua incididunt esse officia ex. Lorem ipsum laborum et nostrud pariatur irure aliquip irure anim sunt et nisi exercitation occaecat.

Special

Positive

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Rewards 100 €

Title

A simple text

100,00 €

Negative

Title

Do id in duis aute reprehenderit elit duis nostrud et. Et qui ut voluptate proident occaecat.

Title

100,00 €

Pending with value

Proident aliqua ipsum est voluptate nostrud Lorem tempor consectetur esse consequat qui laborum laboris ex

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

100,00 €

Positive with value and winnings

Here is the title

A simple subtitle

100,00 € +0,41 €

Stake

5,30 €

Odd

Positive with multiPlus

Here is the title

A simple subtitle

100,00 € avec Multi+ 5%

Stake

5,30 €

Odd

Loading

Sizes

Default (400px)

This size is for all modals

Récompenses

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Medium (600px)

This size is only for modals used for the marketing

Récompenses

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fullscreen (100%)

This size is for specific modals

Récompenses

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fullscreen iframe with button (100%)

Includes an iframe full page

Fullscreen img with button (100%)

Includes a background image full page