Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Atomic Design by Brad Frost

Button group

<div class="vl-button-group">
  <button class="vl-button -red">Button
  </button>
  <button class="vl-button -red">Button
  </button>
  <button class="vl-button -red">Button
  </button>
</div>

.vl-button-group
  button.vl-button.-red Button
  button.vl-button.-red Button
  button.vl-button.-red Button

Card

<div class="vl-card">
  <h2 class="vl-title -color-white -font-undefined -weight-undefined">MARCHE AVEC NOUS
  </h2>
  <div class="vl-card--image-container"><img class="vl-card--image" src="marche.jpg" alt="image"/></div>
  <p class="vl-paragraph -color-white">Marche sur les pas des premiers chrétiens, et ensemble avançons vers Fourvière !
  </p>
  <div class="vl-card--buttons">
    <button class="vl-button -light -red">EN SAVOIR PLUS
    </button>
    <button class="vl-button -light -red">S'INSCRIRE
    </button>
  </div>
</div>

.vl-card
  h2.vl-title.-color-white.-font-undefined.-weight-undefined MARCHE AVEC NOUS
  .vl-card--image-container
    img.vl-card--image(src="marche.jpg" alt="image")
  p.vl-paragraph.-color-white Marche sur les pas des premiers chrétiens, et ensemble avançons vers Fourvière !
  .vl-card--buttons
    button.vl-button.-light.-red EN SAVOIR PLUS
    button.vl-button.-light.-red S'INSCRIRE

Label input

<div class="vl-label-input">
  <div class="vl-label">Label</div>
  <input class="vl-input" placeholder="Placeholder"/>
</div>

.vl-label-input
  .vl-label Label
  input.vl-input(placeholder="Placeholder")

Link group

<div class="vl-link-group"><a class="vl-link">Link</a><a class="vl-link">Link</a><a class="vl-link">Link</a>
</div>

.vl-link-group
  a.vl-link Link
  a.vl-link Link
  a.vl-link Link

Person card

<div class="vl-person-card"><img src="person.png" alt="image"/>
  <div class="vl-person-card--description">
    <h2 class="vl-title -color-white -font-undefined -weight-undefined">Titre
    </h2>
    <p class="vl-paragraph -color-white">Description
    </p>
  </div>
</div>

.vl-person-card
  img(src="person.png" alt="image")
  .vl-person-card--description
    h2.vl-title.-color-white.-font-undefined.-weight-undefined Titre
    p.vl-paragraph.-color-white Description