Charcoal — Web framework and content management system

<!doctype html> <html class="has-no-js" lang="en" data-template="home" > <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://charcoal.locomotive.ca/"> <title>Charcoal — Web framework and content management system | Charcoal</title> <link rel="alternate" hreflang="fr" href="https://charcoal.locomotive.ca/fr"> <meta name="description" content="A web-based tool box that adapts to all your project needs."> <meta property="og:type" content="website"> <meta property="og:url" content="https://charcoal.locomotive.ca/en"> <meta property="og:site_name" content="Charcoal"> <meta property="og:title" content="Charcoal — Web framework and content management system"> <meta property="og:image" content="https://charcoal.locomotive.ca/assets/app/images/placeholders/default-meta-image.png"> <meta property="og:description" content="A web-based tool box that adapts to all your project needs."> <meta property="twitter:title" content="Charcoal — Web framework and content management system"> <meta property="twitter:description" content="A web-based tool box that adapts to all your project needs.">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true">  <link rel="apple-touch-icon" sizes="180x180" href="assets/app/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/app/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/app/images/favicons/favicon-16x16.png"> <link rel="manifest" href="assets/app/images/favicons/site.webmanifest"> <link rel="mask-icon" href="assets/app/images/favicons/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff">   <link rel="icon" href="assets/app/images/favicons/favicon.svg"> <link id="css-app-main" rel="stylesheet" href="assets/app/styles/main.css?v=202206141126" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <style media="all"> html{min-height:100%;color:#222;font-family:"Suisse BP Int'l";line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}@media (max-width: 699px){html{font-size:15px}}@media (min-width: 700px) and (max-width: 999px){html{font-size:15px}}@media (min-width: 1000px) and (max-width: 1199px){html{font-size:15px}}@media (min-width: 1200px) and (max-width: 1599px){html{font-size:16px}}@media (min-width: 1600px) and (max-width: 1999px){html{font-size:17px}}@media (min-width: 2000px) and (max-width: 2399px){html{font-size:17px}}@media (min-width: 2400px){html{font-size:18px}}html.is-loading{cursor:wait}html.has-scroll-smooth,html:not(.has-scroll-module-init){overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{user-select:none}html.has-menu-mobile-open{overflow:hidden}body{overflow-x:hidden}.has-scroll-smooth body{overflow:hidden}.has-menu-mobile-open body{overflow:hidden}.is-first-load body{opacity:1 !important}::selection{background-color:#fff;color:#3297FD;text-shadow:none}a{color:currentColor}a:hover{color:currentColor}svg{display:block}[data-scroll-section]{will-change:transform}[data-load-container]{position:relative;z-index:10}.c-preloader{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;transition:visibility 0s cubic-bezier(0.4, 0, 0, 1) 0s;visibility:visible}.c-preloader::before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-color:#4958E5;transform:scale3d(1, 1, 1);transform-origin:center bottom;transition:transform 0.6s cubic-bezier(0.4, 0, 0, 1) 0.3s}.is-loaded .c-preloader{visibility:hidden;transition-delay:0.8s}.is-loaded .c-preloader::before{transform:scale3d(1, 0, 1);transform-origin:center top;transition-duration:0.8s;transition-delay:0s}.c-loader{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;z-index:1;transition:visibility .3s cubic-bezier(0.4, 0, 0, 1),opacity .3s cubic-bezier(0.4, 0, 0, 1);color:#F1F2FE;visibility:visible;opacity:1;overflow:visible;padding-top:60px;width:60px}.is-loaded .c-loader{visibility:hidden;opacity:0}form.is-loading .c-loader{opacity:1;z-index:10;visibility:visible;color:#4D5DF1}.c-loader_inner{position:absolute;top:0;left:0;width:60px;height:60px;box-sizing:border-box;z-index:1}.c-loader_inner:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-figure 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:1}.c-loader_inner:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-label 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:-1;transform:scale(0);opacity:0}.is-loaded .c-loader_inner:before,.is-loaded .c-loader_inner:after{animation-play-state:paused}form.is-loading .c-loader_inner:before,form.is-loading .c-loader_inner:after{animation-play-state:running}@keyframes loader-figure{0%{transform:scale(1)}50%{transform:scale(0.75)}100%{transform:scale(1)}}@keyframes loader-label{0%{opacity:1;transform:scale(0)}50%{}75%{opacity:0;transform:scale(1.6)}100%{}} /*# sourceMappingURL=critical.css.map */ </style> </head> <body data-module-load style="opacity: 0;"> <div class="c-preloader"> <div class="c-loader"> <span class="c-loader_inner"></span> </div> </div> <div data-load-container> <nav class="c-products-nav"> <div class="c-products-nav_background" data-module-products-button></div> <div class="c-products-nav_container"> <div class="o-container"> <div class="c-products-nav_inner"> <ul class="c-products-nav_list"> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/content-management"> Content Management </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/e-shop-management"> E-Commerce Toolbox </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/data-management"> Data & API Integration </a> </li> </ul> </div> </div> <div class="c-products-nav_image"> <div class="c-products-nav_image_inner" style="background-image:url('assets/app/images/shapes/shape-01.png');"> </div> </div> </div> </nav> <div class="c-nav-mobile"> <div class="c-nav-mobile_inner o-container"> <div class="c-nav-mobile_container"> <ul class="c-nav-mobile_list"> <li class="c-nav-mobile_list_item"> <span class="c-nav-mobile_list_item_label">Features</span> <ul class="c-nav-mobile_sublist"> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/content-management" class="c-nav-mobile_list_item_label">Content Management</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/e-shop-management" class="c-nav-mobile_list_item_label">E-Commerce Toolbox</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/data-management" class="c-nav-mobile_list_item_label">Data & API Integration</a> </li> </ul> </li> <li class="c-nav-mobile_list_item"> <a href="en/technology" class="c-nav-mobile_list_item_label">Technology</a> </li> </ul> <div class="c-nav-mobile_buttons">  <a href="en/contact" class="c-button -black"> <span class="c-button_label">Get in touch</span> </a> </div> </div> </div> </div> <header class="c-header -fixed"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Features <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="en/technology"> Technology </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/fr" data-module-split data-split-type="chars" data-load="false"> fr </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="en/contact" class="c-button"> <span class="c-button_label">Get in touch</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="o-scroll" data-module-scroll="main"> <div class="u-background-blue"> <div data-scroll-section> <div class="c-hero" id="hero" data-module-hero="main" data-scroll data-scroll-position="top" data-scroll-id="hero" data-scroll-call="toggle,Hero" data-scroll-repeat data-scroll-offset="0"> <div class="c-hero_container" data-scroll data-scroll-sticky data-scroll-offset="0" data-scroll-target="#hero"> <header class="c-header -difference"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Features <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="en/technology"> Technology </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/fr" data-module-split data-split-type="chars" data-load="false"> fr </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="en/contact" class="c-button"> <span class="c-button_label">Get in touch</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="c-hero_content"> <h1 class="c-heading -h4"> A web-based <br> tool box that <strong>adapts</strong><br> to all your <br> project needs. </h1> <a href="#learn-more" data-scroll-to class="c-button -big -white -hover-black"> Learn more </a> </div> <div class="c-hero_scroll-indicator"> <a href="#learn-more" data-scroll-to class="c-scroll-indicator"> <span class="c-scroll-indicator_label">Scroll</span> <span class="c-scroll-indicator_icon"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#arrow-down"></use> </svg> </span> </a> </div> <div class="c-hero_mask-wrap"> <div class="c-mask-shape" data-module-lottie="charcoal-intro" data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie" data-lottie-file-name="charcoal-intro" data-hero="mask"> </div> </div> <div class="c-hero_logo-wrap || o-container u-text-center"> <div class="c-hero_logo" data-hero="logo"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </div> </div> <div class="c-hero_device || c-device" data-module-device-manager="hero" data-texture-laptop="https://charcoal.locomotive.ca/assets/app/3d/textures/laptop.jpg" data-texture-smartphone="https://charcoal.locomotive.ca/assets/app/3d/textures/smartphone.jpg" data-autoshow="false"> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section" id="learn-more"> <div class="o-container"> <div class="o-layout"> <div class="o-layout_item u-4/5@from-small"> <div class="c-wysiwyg u-anim"> <p class="c-heading -h3 u-anim-text-line" data-scroll data-module-split>So you’re about to make a crucial decision by choosing the CMS for your next digital project?</p> </div> </div> </div> <div class="o-layout -gutter-huge u-text-right"> <div class="o-layout_item u-1/3@from-small u-text-left"> <div class="c-wysiwyg u-anim" data-scroll data-scroll-offset="5%"> <p>Let us guide you through Charcoal’s benefits, and compare our modern development framework with other best-in-class content management platforms, such as WordPress and Craft CMS. Our comprehensive guide will help you understand what makes Charcoal stand out from other trusted platforms, and when to consider implementing Charcoal.</p> </div> </div> <div class="o-layout_item u-1/3@from-small u-text-left"> <div class="c-wysiwyg u-anim" data-scroll data-scroll-offset="15%"> <p>Built for those who aspire to offer the best user experiences without compromise or limitations, Charcoal will make (almost) all your dreams come true. This user-friendly, multi-device interface can manage your Website, power your eCommerce, control your Notifications and crunch your Data. Charcoal is open-source, performant, W3C compliant and secure.</p> </div> </div> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section"> <div class="o-container"> <div class="c-video || o-ratio || u-16:9 || u-border-radius" data-module-video data-scroll data-scroll-repeat data-scroll-call="toggle,Video" data-module-video-modal-toggler data-video-modal-toggler="toggler" data-video-modal-toggler-host="vimeo" data-video-modal-toggler-id="677921921"> <button class="c-video_button" aria-label="play" type="button"> <span class="c-video_button_icon"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#play"></use> </svg> </span> </button> <video src="https://player.vimeo.com/progressive_redirect/playback/677921921/rendition/720p?loc=external&signature=50fb569d9b7aa61dfbf15672711f62930ad09f318e5eb19988655eb8e0fa7af2" autoplay="false" muted="true" loop="true" data-video="video"> </video> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section -padding-bottom-big"> <div class="u-relative"> <p class="c-splash-words"> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset" data-scroll data-scroll-offset="10%">The last </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-negative" data-scroll data-scroll-offset="10%">content </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-negative" data-scroll data-scroll-offset="10%">management </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-small" data-scroll data-scroll-offset="10%">system you </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset" data-scroll data-scroll-offset="10%">will ever </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-small" data-scroll data-scroll-offset="10%">need.</span> </span> </p> <div class="c-splash-words_features"> <a href="#features" class="c-tile -small u-border-radius" data-scroll data-scroll-to data-scroll-offset="0" data-scroll-speed="2.5"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Discover what Charcoal can achieve for your brand or organisation.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#arrow-right"></use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Features</span> </span> </div> </div> </a> <a href="https://charcoal.locomotive.ca/en/technology" class="c-tile -small u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="4"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">A comprehensive open-source PHP framework by Locomotive.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Technology</span> </span> </div> </div> </a> <a href="https://charcoal.locomotive.ca/en/contact" class="c-tile -small u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="2"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">If you would like to build a project on Charcoal, our team can help.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Support</span> </span> </div> </div> </a> </div> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section u-overflow-hidden -no-padding-bottom -no-padding-top -margin-top u-background-light" data-module-carousel> <div class="o-layout"> <div class="o-layout_item u-5/8@from-medium u-none@to-medium u-overflow-hidden"> <div class="c-carousel swiper-container" data-carousel="main"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bewegen.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bus.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/agora.jpg"> </div> </div> </div> </div> <div class="o-layout_item u-3/8@from-medium u-overflow-hidden u-background-blue"> <div class="c-carousel -content swiper-container" data-carousel="content"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Enhance your digital growth </p> <p class="u-anim" data-scroll> Manage your digital ecosystem with Charcoal CMS. </p> </div> </div> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Drive your sales online </p> <p class="u-anim" data-scroll> Run your online store with our flexible eCommerce toolbox. </p> </div> </div> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Reach out to your audience </p> <p class="u-anim" data-scroll> Send short messages to your organization with our automated messaging system. </p> </div> </div> </div> </div> <div class="c-carousel_controls"> <div class="c-carousel_controls_buttons u-anim" data-scroll> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Prev" data-carousel="prev"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-left"> </use> </svg> </span> </button> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Next" data-carousel="next"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-right"> </use> </svg> </span> </button> </div> </div> <div class="c-carousel swiper-container" data-carousel="visuals"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bewegen-small.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bus-small.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/agora-small.jpg"> </div> </div> </div> </div> </div> </div> </div> <section data-scroll-section> <div class="c-section -no-padding-bottom u-background-light" id="features"> <div class="o-container"> <h2 class="c-heading -h1 u-color-blue u-anim-text-line" data-module-split data-scroll> Main Features </h2> <div class="o-layout -gutter-small u-text-center c-tiles"> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="en/feature/content-management" class="c-tile u-border-radius -offset-top" data-scroll data-scroll-offset="0" data-scroll-speed="2" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Enhance your digital growth with our comprehensive content management system.</span> <span class="c-tile_inner_top_item">01</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="square" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="0"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Content Management</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="en/feature/e-shop-management" class="c-tile u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="3" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Drive your sales online with our flexible & customizable e-commerce toolbox.</span> <span class="c-tile_inner_top_item">02</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="hexagon" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="300"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">E-Commerce Toolbox</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="en/feature/data-management" class="c-tile u-border-radius -offset-top" data-scroll data-scroll-offset="0" data-scroll-speed="2" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Manage incoming and outgoing data with our flexible, open API framework.</span> <span class="c-tile_inner_top_item">03</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="circle" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="600"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Data & API Integration</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-none@to-medium"></div> <div class="o-layout_item u-1/3@from-medium u-none@to-medium"></div> </div> </div> </div> </section> <section data-scroll-section> <div class="c-section u-background-light u-overflow-hidden" data-modules-carousel-cases> <div class="o-container"> <h2 class="c-heading -h1 u-color-blue u-anim-text-line" data-module-split data-scroll> Case <br>Studies </h2> <div class="c-carousel-cases"> <div class="c-carousel-cases-visual_container swiper-container" data-scroll data-scroll-speed="1.5" data-scroll-offset="0" data-carousel-cases="carousel-visual"> <div class="c-carousel-cases-visual_wrapper swiper-wrapper"> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="City of Mirabel" data-load-src="uploads/caseStudies/Mirabel-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="The English Bus" data-load-src="uploads/caseStudies/englishbus-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="Rugby Canada" data-load-src="uploads/caseStudies/rugby-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="Air Inuit" data-load-src="uploads/caseStudies/airinuit-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="K72" data-load-src="uploads/caseStudies/k72-895x679.png"> </div> </div> </div> <div class="c-carousel_controls -absolute"> <div class="c-carousel_controls_buttons"> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Prev" data-carousel-cases="prev"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-left"> </use> </svg> </span> </button> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Next" data-carousel-cases="next"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-right"> </use> </svg> </span> </button> </div> </div> <div class="c-carousel-cases-info_container swiper-container" data-carousel-cases="carousel-info"> <div class="c-carousel-cases-info_wrapper swiper-wrapper"> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://mirabel.ca/"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">City of Mirabel</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Featuring</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Content Management</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item">Notification Manager</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://mirabel.ca/" target="_blank" rel="noopener noreferer">View website <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://theenglishbus.com"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">The English Bus</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Featuring</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Content Management</li> <li class="c-carousel-cases-info_features_list_item">E-Commerce</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item">Notification Manager</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://theenglishbus.com" target="_blank" rel="noopener noreferer">View website <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://rugby.ca/en"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">Rugby Canada</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Featuring</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Content Management</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://rugby.ca/en" target="_blank" rel="noopener noreferer">View website <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://www.airinuit.com/en"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">Air Inuit</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Featuring</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Content Management</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item">Notification Manager</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://www.airinuit.com/en" target="_blank" rel="noopener noreferer">View website <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://k72.ca/en"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">K72</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Featuring</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Content Management</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://k72.ca/en" target="_blank" rel="noopener noreferer">View website <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="c-clients"> <div class="o-container"> <p>Trusted by</p> </div> <div class="c-clients_rail" data-module-rail="clients-rail" data-rail-speed="1" data-scroll data-scroll-offset="0" data-scroll-call="trigger,Rail,clients-rail"> <span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-muraflex"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-kvell"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-pienso"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-vooban"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-volleyball"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-sos"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-airinuit"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-bewegen"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-usports"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-k72"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-rugby"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-2ndstreet"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-pbsc"></use> </svg> </span> </span> </div> </div> </div> </section> <section data-scroll-section> <footer class="c-footer"> <div class="c-footer_background"> <div class="c-footer_background_shape -one" data-scroll data-scroll-speed="1.5" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.15"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-1"></use> </svg> </div> </div> <div class="c-footer_background_shape -two" data-scroll data-scroll-speed="3" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.07"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-2"></use> </svg> </div> </div> <div class="c-footer_background_shape -three" data-scroll data-scroll-speed="4" data-scroll-position="bottom" data-scroll-offset="0"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-3"></use> </svg> </div> </div> </div> <div class="o-container"> <nav class="o-layout -bottom c-footer_nav"> <div class="o-layout_item u-1/3@from-small"> <a class="c-footer_logo u-anim" data-scroll data-scroll-offset="0" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> </div> <div class="o-layout_item u-1/3@from-small"> <ul class="c-footer_nav_list" data-scroll data-scroll-offset="0"> <li class="c-footer_nav_list_item u-anim -parent"> <a href="en#features" class="c-link" data-module-split data-split-type="chars"> Features </a> </li> <li class="c-footer_nav_list_item u-anim -delay-1 -parent"> <a href="en/technology" class="c-link" data-module-split data-split-type="chars"> Technology </a> </li> <li class="c-footer_nav_list_item u-anim -delay-2 -parent"> <a href="en/technology#meet-the-team" class="c-link" data-module-split data-split-type="chars"> Team </a> </li> </ul> </div> <div class="o-layout_item u-1/3@from-small u-text-right@from-small u-anim -delay-4" data-scroll data-scroll-offset="0"> <a href="en/contact" class="c-button -white -hover-gray"> <span class="c-button_label"> Get in touch </span> </a> </div> </nav> <div class="c-footer_copy"> <div class="o-layout"> <div class="o-layout_item u-1/3@from-medium u-1/2@to-medium u-anim" data-scroll data-scroll-offset="0"> © 2024 Charcoal </div> <div class="o-layout_item u-2/3@from-medium u-1/2@to-medium u-anim u-text-right@to-medium" data-scroll data-scroll-offset="0"> Website by <a href="https://locomotive.ca" target="_blank" rel="noopener">Locomotive</a> </div> </div> </div> </div> </footer> </section> </div> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-button -white || c-video-modal_close" data-video-modal="close"> <span class="c-button_bg"></span> <span class="c-button_label">Close</span> </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script nomodule crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script> <script defer src="assets/app/scripts/vendors.js?v=202206141126"></script> <script defer src="assets/app/scripts/app.js?v=202206141126"></script> </body> </html>

CINXE.COM

Charcoal — Web framework and content management system | Charcoal