Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost

Card group

<div class="vl-card-group">
  <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>
  <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>
  <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>
  <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>
</div>

.vl-card-group
  .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
  .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
  .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
  .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

<div class="vl-footer">
  <div class="vl-footer--content"><img class="vl-logo" src="logo.png" alt="image"/>
    <div class="vl-link-group"><a class="vl-link -color-white">Link</a><a class="vl-link -color-white">Link</a><a class="vl-link -color-white">Link</a>
    </div>
    <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>
  </div>
  <p class="vl-footer--rights">© 2025 - Tous droits réservés Via Lucis</p>
</div>

.vl-footer
  .vl-footer--content
    img.vl-logo(src="logo.png" alt="image")
    .vl-link-group
      a.vl-link.-color-white Link
      a.vl-link.-color-white Link
      a.vl-link.-color-white Link
    .vl-button-group
      button.vl-button.-red Button
      button.vl-button.-red Button
      button.vl-button.-red Button
  p.vl-footer--rights © 2025 - Tous droits réservés Via Lucis

<div class="vl-navbar"><img class="vl-logo" src="logo.png" alt="image"/>
  <div class="vl-link-group"><a class="vl-link">Link</a><a class="vl-link">Link</a><a class="vl-link">Link</a>
  </div>
  <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>
</div>

.vl-navbar
  img.vl-logo(src="logo.png" alt="image")
  .vl-link-group
    a.vl-link Link
    a.vl-link Link
    a.vl-link Link
  .vl-button-group
    button.vl-button.-red Button
    button.vl-button.-red Button
    button.vl-button.-red Button

Person card group

<div class="vl-person-card-group">
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>
</div>

.vl-person-card-group
  .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
  .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
  .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
  .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
  .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
  .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
  .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

Organisms

Card group

Footer

Navbar

Person card group