Design system components

Grid

Grid base

Grid extra Small (xs)

Grid small (sm)

Grid medium (md)

Grid large (lg)

Grid extra large (xl)

Nested grid

Offset grid

Centered grid

Right aligned grid

---

Animations

Fly away

Send

Shake

Call back

Wobble

Continue

---

Icons

Icon 8

Icon 12

Icon 16

Icon 24

Icon 32

Icon 48

Icon primary

Icon secondary

Icon info

Icon success

Icon danger

Icon warning

---

Buttons

Button help

Button help sm

Button help md

Button help lg

Button help primary

Button help secondary

Button help info

Button help success

Button help warning

Button help danger

Button primary

Button medium one Link medium one  09 87 67 54 76

Disabled button medium one  Disabled link medium one 

Small one 09 87 67 54 76

large one

Block medium

Button primary big text

Normal text 09 87 67 54 76

Normal text 09 87 67 54 76

Normal text  09 87 67 54 76

Primary outline

Medium one

Small one

large one

Block medium

Secondary

Medium one

Small one

large one

Block medium

Secondary outline

Medium one

Small one

large one

Success

Medium one

Small one

large one

Block medium

Success outline

Medium one

Small one

large one

Block medium

Danger

Medium one

Small one

large one

Block medium

Danger outline

Medium one

Small one

large one

Block medium

Warning

Medium one

Small one

large one

Block medium

Warning outline

Medium one

Small one

large one

Block medium

White

White outline

With icon

Medium one

Medium one

Medium one

Small one

Small one

Circle

Circle outline

Icon only

---

Badges

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Badges pill

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

Test badge  Test badge ! :p

---

Typography: headings

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore facilis repudiandae odio, enim culpa dolores magni recusandae magnam eveniet illum!

---

Typography : links

Ceci est un lien

---

Typography: paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus placeat deleniti quia nam asperiores accusamus nisi officiis dolorum alias, laboriosam temporibus officia. Dolorem a veniam eum obcaecati, sunt odit quo minus vitae pariatur atque, eligendi quod accusantium neque soluta nam cum porro beatae molestias non sed provident. Nobis, neque ab.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum dolore tempore nisi, corporis vitae voluptates repellat nostrum laborum doloremque quibusdam minus sapiente nulla quos, laboriosam cum deleniti alias nobis consectetur omnis natus animi. Fugit, laboriosam. Laudantium qui, perferendis, minus vitae voluptates, perspiciatis iste similique quasi corporis suscipit est ducimus pariatur voluptas id dolorem. Amet hic cumque explicabo aspernatur, rem sunt vitae deleniti ratione consequuntur natus pariatur ipsum harum, at alias animi ipsa praesentium sequi sint.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, nam non enim quos odio, commodi possimus molestias in rem officia placeat ea cupiditate qui consequuntur omnis cum. Aut, ducimus quasi.

---

Typography: Small, strong

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptatibus, voluptatem debitis, sunt id vel facilis ducimus asperiores cum explicabo vitae, magnam magni eaque quam optio totam temporibus. Enim quis voluptatem nesciunt porro facere veniam voluptates animi, fugit consequuntur repellendus non reiciendis id, similique suscipit aliquam nostrum ipsam rerum mollitia.

---

Forms: form item

Normal input

Normal input with help button

Required input

Disabled input

Input with addon on right

Input with btn addon on right

Required input with addon on right

Input with addon on left

Required input with addon on left

Input with addon on both side

Required input with addon on both side

Input has success

Required input has success

Input has warning

Required input has warning

Input has danger

Required input has danger

Normal textarea

Required textarea

Textarea has success

Textarea has warning

Textarea has danger

Checkbox

label 1 label 2label 3

Radio

label 1 label 2label 3

Switch

Stepper

Stepper

Stepper block

Stepper with addon

Stepper block with addon

---

Card

Simple card

Article card – step by step

Article lead card

Link card

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6

Offer

---

Star rating

XS

SM

MD

LG

XL

---

Rating Input

Gold sm

Gold md

Gold lg

---

Call block

Open

Open white

Closed

Closed white

---

Button group

Button

Radio

List

• List 1
• List 2
• List 3

---

Breadcrumb

---

Pagination

---

Counter

Counter extra small

Counter small

Counter medium

Counter large

Counter extra large

---

Modal

Modal small

Modal small

Modal medium

Modal medium

Modal large

Modal large

---

Dropdown

Dropdown list

Dropdown block

Dropdown select no scroll

choose one option1ol 12ol 23ol 33ol 43ol 53ol 63ol 73ol 83ol 9

Select with scroll & icon on the left

1ol 12ol 23ol 33ol 43ol 53ol 63ol 73ol 83ol 93ol 10

Select with scroll & icon on the right

1ol 12ol 23ol 33ol 43ol 53ol 63ol 73ol 83ol 9

Disabled select

1ol 12ol 23ol 33ol 43ol 53ol 63ol 73ol 83ol 9

---

Marquee

Marquee to right

Marquee to left + lazyLoad

---

Tabs

Small

Medium

Large

Lazy loading

Carousel

Basic

• 
• 
• 

Basic Auto

• 
• 
• 

Basic Auto Backward

• 
• 
• 

Controls Position Absolute

• 
• 
• 

Navigation Position Absolute

• 
• 
• 

Multiple slides

• 
• 
• 
• 
• 
• 

Multiple transitions

• 
• 
• 
• 
• 
• 

Slide by Pages

• 
• 
• 
• 
• 
• 

Alignment Top (default)

• 
• 
• 
• 
• 
• 

Alignment Center

• 
• 
• 
• 
• 
• 

Alignment bottom

• 
• 
• 
• 
• 
• 

Lazy load (test)

Disabled Slider

• 
• 
• 
• 
• 
• 

Responsive Slider

• 
• 
• 
• 
• 
• 

---

Smooth Scroll

Scroll to top

Scroll by 100px

Scroll back 100px

---

Accordion

Simple accordion opened

Card style accordion

AutoComplete

Country:

---

Calendar

Initialize the calendar

To get a calendar, you need to add the following pug markup (or HTML equivalent):

  .form-group.calendar__holder
      label.form-group__label(for='testdate') Select a date:
       .form-group__item-addon.calendar
         input#testdate.form-group__item(type="date", data-input)
         button.flatpickr__clear-btn(type='button',data-clear)
           +icon('close-circle', '24')
         button.btn.btn--secondary.form-group__addon-btn(type='button', data-toggle)
           +icon('calendar', '24')

And import and call the following Javascript function:

  import calendar from 'node_modules/integration-common-files/src/js/03-organisms/calendar';
  [...]
  calendar(selector, options, locale)

The parameter for the function call are:

• Selector: The selector of the input. Normally we will use .calendar applied to the input element.
• Options: If we want to use the default ones, we can leave this blank '' or specify 'default'. Take into account that certain options are mandatory, and if overwritten, the calendar may not work as expected:
  • prevArrow
  • nextArrow
  • appendTo
  • static
  • wrap
  • altInput
  Useful options that we can give are:
  • minDate: to let only choose future dates
  • altFormat: to format the user visible input as we desire
  • disable: we give an object with dates and/or functions to disable certain dates
• Locale: We can select either 'fr' for French locale or 'es' for Spanish locale. If nothing is declared, English is automatically chosen.