Assets
Cette page contient l’ensemble des assets mis à disposition du maker.
Ci-dessous, la liste des catégories d’assets
Backlink Flowtribe
Ce composant est à ajouter dans le footer du site, plus généralement dans le coin inférieur droit du footer, en face des mentions légales.
⚠️ Si le client ne souhaite pas faire apparaitre le macaron, ajouter la mention suivante dans la page des "Mentions légales" :
⚠️ La version du logo NCF est à ajouter uniquement aux projets comprenant à la fois un site web + une webapp
Version noir
Version blanche
Infinite marquee
L'élément infinite marquee est totalement géré via les custom properties CSS. Il suffit d'ajouter la class "infinite-marquee" aux éléments enfants (à faire looper) pour lancer l'animation.
Infinite marquee
Infinite marquee
Infinite marquee
Infinite marquee
Infinite marquee
Infinite marquee
Infinite marquee
Infinite marquee
Pause on hover
Pause on hover
Pause on hover
Pause on hover
Pause on hover
Pause on hover
Pause on hover
Pause on hover
Play on hover
Play on hover
Play on hover
Play on hover
Play on hover
Play on hover
Play on hover
Play on hover
Swiper.js
Dans le code de page, récupérer le script permettant d'activer le swiper.js. Bien reprendre la structure comme l'exemple ci-dessous, avec la bonne nomenclature de class.
Pour plus d'infos : Swiper.js
Code à copy/paste
<!-- 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
Dans le code du projet est inséré un script permettant de translate la date de l'EN natif Webflow à la langue du navigateur ! Il y a une manipulation à faire :
- Ajouter l'attribut "data-date" et mapper le champ date de la collection en value

Sections to copy+paste
Ici, tu peux récupérer des sections ou des éléments déjà fabriqués pour gagner du temps dans ton intégration.
Section
⚠️ à partir de container-{}, il faut faire une combo class pour ajouter le padding-section{}, et bien penser à décomposer le composant une fois intégré à la page!
Hero
Un Hero structuré en 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