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
Content
Promotion
Card

Release 24.47.6

Tactics 2.11.0

light_mode

dark_mode

Card

Card component is used to display a card with an image, a title with sport and flag icon and a text.
contentPage_card can be used in different contexts and can be displayed in different ways.
In general, it is wrapped by a contentPage_grid element to be able to position it in line. Its variant can be unfolded, the DOM is therefore a little different from the default structure (an input and a label are necessary)

Content

TWIG component : Betclic/_content/_promotion/_twig/_components/_card.twig
CSS components : Betclic/_content/_promotion/_css/_components/_card.scss/span>

Default

Série A

Lorem ipsum dolor sit amet, consec

Magna duis labore occaecat

Qui ad adipisicing quis eu commodo consequat officia voluptate nulla

Anim ex

Commodo eiusmod id officia

Occaecat eu

Culpa minim voluptate laboris labore velit

Occaecat eu

Culpa minim voluptate laboris labore velit

Alternative

Télécharge l’app Betclic

365 jours par an

Vis le match avec des émotions encore plus intenses avec Betclic

Type here (i'm a link)

Dropdown (dropdown behaviour)

Simple

Sit enim sit anim mollit laborum quis ut est incididunt sit ullamco cillum. Laborum ipsum dolor veniam adipisicing duis laborum proident tempor. Officia dolore labore dolor anim nulla. Deserunt excepteur magna sint consectetur tempor proident veniam ad enim irure. Ullamco quis et proident duis aliquip reprehenderit. Reprehenderit esse commodo qui sit.

Text large regular

Double

Text large regular

Aliquip ipsum fugiat pariatur esse ipsum ad ex id qui fugiat in. Enim eiusmod et laboris do voluptate ullamco amet anim ad. Ipsum ex voluptate officia sint aliquip consequat duis dolore exercitation enim. Excepteur nulla proident cupidatat irure dolore ipsum exercitation veniam. Eiusmod ipsum sit adipisicing id dolore anim ad officia cillum elit do eiusmod.

Text large regular

Triple

Text large regular

Cillum magna tempor dolor proident ea exercitation consectetur Lorem deserunt id ut culpa. Sit duis commodo aute tempor quis tempor. Enim nisi dolore consectetur non proident qui dolore fugiat qui aute proident excepteur. Lorem ea veniam et ut magna esse fugiat minim. Velit ut qui deserunt irure eu incididunt nostrud proident est officia cillum consectetur culpa. Exercitation tempor nisi duis qui culpa do mollit. Anim occaecat dolore ipsum consequat amet nostrud aute ut.

Text large regular