Hello !comit

Colors

primary
  • --primary-lighter
  • --primary-light
  • --primary
  • --primary-dark
  • --primary-darker
secondary
  • --secondary-lighter
  • --secondary-light
  • --secondary
  • --secondary-dark
  • --secondary-darker
monochromes
  • --white
    --black
  • --gray-100
  • --gray-200
  • --gray-300
  • --gray-400
  • --gray-500
  • --gray-600
  • --gray-700
  • --gray-800
  • --gray-900

Buttons

Listing

  1. ol
  2. Bacon
  3. Bacon
  4. Bacon
  5. Bacon
  • ul
  • Bacon
  • Bacon
  • Bacon
  • Bacon
  • ul with class unstyled
  • Bacon
  • Bacon
  • Bacon
  • Bacon

Typography

Heading

add h1--large to style h1 at 105px in header w/ image full width

H1 huge lorem ipsum

H1 Lorem ipsum veritatis

H2 Doloremque veritatis, accusamus reprehenderit.

H3 Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.

H4 Afraid smithy Fellowship debt carven hooks.

H5 Should Shirelings extraordinary spends poison's willing enchantment.
H6 Improve drops absolutely tight deceit potent Treebeard startled!
Editable

add Editable--white to change the color

Lorem ipsum dolor sit amet consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Doloremque veritatis, accusamus reprehenderit.

Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Afraid smithy Fellowship debt carven hooks.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Should Shirelings extraordinary spends poison's willing enchantment.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Improve drops absolutely tight deceit potent Treebeard startled!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Lorem ipsum dolor sit amet consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Doloremque veritatis, accusamus reprehenderit.

Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Afraid smithy Fellowship debt carven hooks.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Should Shirelings extraordinary spends poison's willing enchantment.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Improve drops absolutely tight deceit potent Treebeard startled!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Utilities

add u-introduction to style at 18px in header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong title here. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nullam dictum felis eu pede link nice goes here mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

add u-pre-title

Lorem ipsum

add u-container-inner to set max-width of 1364px

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam qui commodi illo, molestias aperiam non in quas incidunt officia? Consequuntur quam commodi maxime ducimus a quidem accusamus ab labore odit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam qui commodi illo, molestias aperiam non in quas incidunt officia? Consequuntur quam commodi maxime ducimus a quidem accusamus ab labore odit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam qui commodi illo, molestias aperiam non in quas incidunt officia? Consequuntur quam commodi maxime ducimus a quidem accusamus ab labore odit.

Form

c-FormElement--line | c-FormElement--select--line | c-FormElement--upload--line



Choisir un fichier
Textarea
c-FormElement--radio
c-FormElement--checkboxSvg
errors


submit
normal
Sending...
disabled
Sending...

Alert

Un beau message d’alert has-error

Un beau message d’alert has-warning

Un beau message d’alert has-success

Locomotive scroll

Here's how it works

There are one key attribute to always call upon Locomotive:

data-scroll -> detects whether or not an element is in the viewport

The navigation need to be outside barba & you need to update the active links manually

Your images muste have a width & height on the tag img and if you use a lazyload, you'll need placeholders.

if you create a js module who affect the page height, example collapse.js. In you eventListener you have to update scrollbar when the transition is over. see the exemple in initItemListener() in collapse.js, It is necessary to add Store.scrollbar.updateAfterTransitionEnd(element);

Scroll to target

scroll to target: add #unique-id on an anchor and the target

scroll to hash location: add #unique-id at the end of anchor href and add #unique-id on the target

Scroll reveal

add element attributes depends on what you desire :

data-scroll-repeat -> boolean | default false

data-scroll-offset -> string | Element in-view trigger offset : bottom,top
First value is bottom offset, second (optional) is top offset.
Percent is relative to viewport height, otherwise it's absolute pixels.
E.g. "10", "100, 50%", "25%, 15%"

  • 0
  • 1
  • 2

with m-ws class in animation.scss

  • 0
  • 1
  • 2
Example of parallax with others attributes

you can add data-scroll-class to change the default class .is-inview -> string | Element in-view class.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero totam, placeat odio nam corrupti cum repellendus voluptas quae. Dignissimos sequi deserunt nemo rem ab aliquid suscipit consequuntur perferendis tempore neque?

Example of parallax with others attributes

you can add data-scroll-direction to change the scroll direction -> string | Element's parallax direction. vertical or horizontal

endless acceleration toward infinity

the greatest barrier to your enlightenment

Example of parallax in section with unique id

you can add data-scroll-target to set where the parallax begin and end -> string | Target element's in-view position

Lazy Load

suivre l'exemple ci-dessous pour lazy load les images (le placeholder est utilisé pour ne pas erroné les valeurs du scroll)

.lazy -> _global.scss

js -> lifecycle.js | lifeCycleGlobalUpdate()

Scroll to target

scroll to target: ajouter un #id dans le href et sur la cible

scroll to hash location: ajouter un #id à la fin de l'url et sur la cible

Accordions

Enlever le data-group si on ne veut pas que les autres se referment lorsqu'on ouvre un.

Ajouter un id sur l'accordion | Exemple si on veut scroll dessus et l'ouvrir, scrollbar.js va determiner la position et faire la comparaison de l'url(#id) et le id de l'accordion

River

Question fréquentes

Lorem Epsom dolor sit met connecteur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed orci vehicula, dignissim elit sed, tempus felis. Nunc rhoncus est in eleifend fringilla. Nam sed cursus nulla, sit amet iaculis massa. Nulla pretium libero tortor, sit amet ultrices eros eleifend nec. Pellentesque malesuada nisl eget augue ornare maximus. Ut blandit enim sed aliquam tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin odio metus, pretium pretium efficitur id, bibendum ut diam.

Lorem Epsom dolor sit met connecteur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed orci vehicula, dignissim elit sed, tempus felis. Nunc rhoncus est in eleifend fringilla. Nam sed cursus nulla, sit amet iaculis massa. Nulla pretium libero tortor, sit amet ultrices eros eleifend nec. Pellentesque malesuada nisl eget augue ornare maximus. Ut blandit enim sed aliquam tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin odio metus, pretium pretium efficitur id, bibendum ut diam.

Lorem Epsom dolor sit met connecteur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed orci vehicula, dignissim elit sed, tempus felis. Nunc rhoncus est in eleifend fringilla. Nam sed cursus nulla, sit amet iaculis massa. Nulla pretium libero tortor, sit amet ultrices eros eleifend nec. Pellentesque malesuada nisl eget augue ornare maximus. Ut blandit enim sed aliquam tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin odio metus, pretium pretium efficitur id, bibendum ut diam.

Profitez de votre escapade l’esprit léger

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Plaisir durable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
À partir de 475$
405 $
par personne

Plaisir durable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
À partir de 475$
405 $
par personne

Plaisir durable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
  • 3 nuits en chambre luxueuse
À partir de 475$
405 $
par personne
Cabin

Le domaine

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vous n’avez pas trouvé réponse à votre question ?

River

Explorez au rythme de la nature.

Raquette et ski de fond

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Raquette et ski de fond

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Raquette et ski de fond

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Filter

add c-blockFilter--above on the div c-blockFilter if we have header-img.php and wrap both with u-header-wrapper