Assets

This page contains all the assets available to the maker.
Below is a list of asset categories.

Backlink Flowtribe

This component is added to the site footer, generally in the bottom right-hand corner of the footer, opposite the legal notices.

⚠️ The NCF logo version is to be added only to projects that include both a website + a webapp.

Black version

Website by

White version

Website by

Black version

Website by

White version

Website by

Infinite marquee

The infinite marquee element is fully managed via CSS custom properties. Simply add the "infinite-marquee" class to the child elements (to be looped) to launch the animation.

Infinite marquee

Add "data-hover-pause" attribute to launch on hover animation

Pause on hover

Add "data-hover-play" attribute to launch on hover animation

Play on hover

Swiper.js

In the page code, retrieve the script enabling swiper.js. Make sure the structure is as shown in the example below, with the correct class nomenclature.
For more information : Swiper.js

No items found.

Copy/paste code

<!-- SWIPER.JS START -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper1 = new Swiper(".swiper", {
  // Optional parameters
  direction: "horizontal",
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 20,
  loop: false,
  centeredSlides: false,
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 3
    }
  },

  // Navigation arrows
  navigation: {
    nextEl: ".button-next",
    prevEl: ".button-prev"
  },

});
</script>
<!-- SWIPER.JS STOP -->

Date EN to FR

A script is inserted in the project code to translate the Webflow native EN date to the browser language! There's one thing to do:

- Add the "data-date" attribute and map the date field of the collection to value

Sections to copy+paste

Here, you can retrieve sections or elements that have already been manufactured to save time on integration.

Section

⚠️ from container-{}, you need to make a combo class to add the padding-section{}, and remember to decompose the component once it has been integrated into the page!

Hero

A Hero structured as a text-image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text