• Home
  • Universes
  • Account
  • Guidelines
Release 24.47.6
Tactics 2.11.0
light_mode
dark_mode

Account

Here is the design pattern of the scope account.

CSS components : Betclic/_account/_common/_css/_components/_my_account/**/*.scss

Global structure

Header + Content

Back
Information Sint enim mollit velit eu.
Title Sint magna laboris
Text Consequat nisi tempor quis aliqua. Ex officia et id laborum excepteur officia aliqua do sit. Sit excepteur aliquip mollit ea minim.
Title Incididunt consectetur
Text Lorem commodo deserunt id irure. Esse elit eu aliquip laboris qui eiusmod ipsum. Exercitation commodo in officia velit irure reprehenderit anim adipisicing.

Titles text and link outside a box

Title Id esse nostrud
Text dolor velit mollit sint duis laborum. Aliqua culpa nulla esse Lorem veniam aliqua id ullamco incididunt et officia. Sit exercitation sit in ipsum sit et non aliquip aute nisi aliquip. Magna occaecat est amet exercitation voluptate dolore aliquip laborum cillum nostrud. Cillum mollit enim proident ad deserunt.
Lorem magna

Boxes

Box with title, separator and text

Title Ipsum ad irure
Text dolor velit mollit sint duis laborum. Aliqua culpa nulla esse Lorem veniam aliqua id ullamco incididunt et officia. Sit exercitation sit in ipsum sit et non aliquip aute nisi aliquip. Magna occaecat est amet exercitation voluptate dolore aliquip laborum cillum nostrud. Cillum mollit enim proident ad deserunt.
Non quis laborum culpa eiusmod sint ea.
Title Ipsum ad irure
Text dolor velit mollit sint duis laborum. Aliqua culpa nulla esse Lorem veniam aliqua id ullamco incididunt et officia. Sit exercitation sit in ipsum sit et non aliquip aute nisi aliquip. Magna occaecat est amet exercitation voluptate dolore aliquip laborum cillum nostrud. Cillum mollit enim proident ad deserunt.
Ullamco commodo mollit officia cillum aliquip sit sunt non irure aliqua in sint ullamco aute. Minim incididunt nisi pariatur adipisicing nisi eiusmod duis in aute mollit dolor esse culpa. Deserunt aliquip eiusmod sint ullamco irure amet dolor. Ad ullamco dolore non dolore. Consequat culpa irure magna Lorem non duis sit velit. Est ea incididunt nulla consectetur veniam deserunt qui magna nostrud reprehenderit nulla laboris deserunt.

Box with title, special case text (label and value) and buttons

Dolor velit mollit sint duis laborum. Aliqua culpa nulla esse Lorem veniam aliqua id ullamco incididunt et officia. Sit exercitation sit in ipsum sit et non aliquip aute nisi aliquip. Magna occaecat est amet exercitation voluptate dolore aliquip laborum cillum nostrud. Cillum mollit enim proident ad deserunt.
Label cupidatat occaecat : Value ad aute tempor

Box with Personal information list

  • Title
    Title
  • Title Consectetur exercitation ad est qui consectetur ullamco excepteur aute ipsum id Lorem do irure
    Title Excepteur mollit esse sit fugiat tempor excepteur aliqua et consectetur proident tempor aute voluptate

Box with menu list

  • Title menu 1
  • Title menu 2
  • Title menu 3

Box with complex list 1

  • Label
    Value
  • Label Lorem ipsum dolor sit amet consectetur, adipisicing elit
    Value Et ea enim dolor reprehenderit aliqua

Box with complex list 2

  • Title
    Sub title
    Tag adipisicing
    Title
    Error Deserunt minim cupidatat amet tempor anim enim eu esse.
  • Title Deserunt labore adipisicing culpa aliqua fugiat anim in elit ut velit elit
    Sub title Reprehenderit anim ad tempor officia amet
    Tag reprehenderit
    Title Deserunt labore
    Error Est in excepteur consequat non.
  • Title Deserunt labore adipisicing culpa aliqua fugiat anim in elit ut velit elit
    Sub title Reprehenderit anim ad tempor officia amet
    Tag reprehenderit

Box with mailbox list

  • Veniam cupidatat laboris et labore consequat ipsum ea proident ad ex
    Ad quis ut id do anim minim enim commodo ullamco nisi
  • Ullamco nulla pariatur consequat magna fugiat sint deserunt amet proident esse proident sint deserunt deserunt
    Labore mollit cillum consectetur cillum cupidatat

Box with button aspect items in list

  • Dolor duis sint velit laborum magna duis nostrud
  • Dolor duis sint velit laborum magna duis nostrud

Box with separator and with big button aspect in list

  • Velit labore pariatur
    Reprehenderit irure dolor nostrud nostrud duis consectetur nostrud in enim anim adipisicing sint fugiat excepteur
    Exercitation enim ad ut consectetur id incididunt ea sunt exercitation
  • Or
  • RNostrud duis non laboris excepteur ea sint tempor esse
    Laboris nisi eu in velit eiusmod non

Box with basic list

Veniam cupidatat laboris et labore consequat ipsum ea proident ad ex

Box with switch

Box with input field

Title Anim nisi sint aliqua

Error nulla voluptate et nisi dolore elit quis sint sint ullamco laboris

Error aliqua est proident duis laboris mollit consectetur ut labore

Information Fugiat incididunt nostrud laborum ea qui
Label minim non eu quis pariatur
Title Anim nisi sint aliqua

Error minim et labore labore quis veniam

Label minim non eu quis pariatur

Error Qui enim est culpa laborum sit sint laboris ipsum

My activity box

08/11/2023

09:32
30,00 €
Validé
09:32
30,00 €
Validé

Banners

Banner with button

Irure fugiat ad aute aliquip do sint nostrud. Sint non culpa commodo tempor in enim nisi ea magna sint. Reprehenderit sunt incididunt ut exercitation cillum. Nisi commodo irure est enim.

Banner alert

Officia labore velit
Ad pariatur ad nulla labore minim culpa officia excepteur consequat nisi eiusmod ut eiusmod velit.

Banner proof of address

Mollit qui ipsum anim aliquip qui est incididunt

Velit in culpa aliquip in reprehenderit reprehenderit laborum tempor esse dolore id officia reprehenderit.