Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
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)
TWIG component : Universes/_content/_promotion/_twig/_components/_card.twig
CSS components : Universes/_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
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
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
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
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
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
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