Copernicus Component Library

Carousel banner

Carousel based on Slick
https://kenwheeler.github.io/slick/

the class ".ccl-banner-top-container-slider" loads a Single Item carousel. Autoplay (3s) is active

<body class="ccl-style ccl-color_generic">	
					<div class="ccl-banner-top-container-slider">
						<div class="ccl-banner-top-container">
							<div class="ccl-banner-top-main" style="background-image: url(https://eu-copernicus.github.io/copernicus-component-library/assets/images/banner_placeholder.jpg)">
								<div class="ccl-container">
									<div class="ccl-banner-top-main-block-title">
										<div class="ccl-banner-top-main-title">Copernicus</div>
										<div class="ccl-banner-top-main-text">Lorem ipsum dui a turpis finibus, lorem ipsum dui a turpis finibus.</div>
									</div>
								</div>
							</div>
							<div class="ccl-banner-top-bar">
								<div class="ccl-container">

<div class="ccl-banner-top-bar-left">Lorem ipsum dui a is, lorem ipsum dui a turpis finibus.</div>
									<div class="ccl-banner-top-bar-right"><span class="ccl-icon-map-dot"></span> Lorem iidui</div>
								</div>
							</div>
						</div>
						<div class="ccl-banner-top-container">
							<div class="ccl-banner-top-main" style="background-image: url(https://eu-copernicus.github.io/copernicus-component-library/assets/images/banner_placeholder2.jpg)">
								<div class="ccl-container">
									<div class="ccl-banner-top-main-block-title">
										<div class="ccl-banner-top-main-title">Climate</div>
										<div class="ccl-banner-top-main-text">A turpis finibus, lorem ipsum dui a turpis finibus.</div>
									</div>
								</div>
							</div>
							<div class="ccl-banner-top-bar">
								<div class="ccl-container">

<div class="ccl-banner-top-bar-left">Lorem ipsum dui a turpis finibus, lorem ipsum dui a turpis finibus.</div>
									<div class="ccl-banner-top-bar-right"><span class="ccl-icon-map-dot"></span> Lorem ipsum dui</div>
								</div>
							</div>
						</div>
						<div class="ccl-banner-top-container">
							<div class="ccl-banner-top-main" style="background-image: url(https://eu-copernicus.github.io/copernicus-component-library/assets/images/banner_placeholder3.jpg)">
								<div class="ccl-container">
									<div class="ccl-banner-top-main-block-title">
										<div class="ccl-banner-top-main-title">Land</div>
										<div class="ccl-banner-top-main-text">Lorem ipsum dui a turp ipsum dui a turpis finibus.</div>
									</div>
								</div>
							</div>
							<div class="ccl-banner-top-bar">
								<div class="ccl-container">

<div class="ccl-banner-top-bar-left">Lorem ipsum dui a turpis  dui a turpis finibus.</div>
									<div class="ccl-banner-top-bar-right"><span class="ccl-icon-map-dot"></span> Lorem ipsum dui</div>
								</div>
							</div>
						</div>
					</div>
				</body>

How to use

1. Set up on Your Site

Copy this code into the <head> of each template or page where you want to use a ccl element.

2. Choose your Color palette

Add Classes on your element <body> (or on a html container). Find the right one according the theme to use on your page.

example: <body class="ccl-style ccl-color_generic">

3. Add Elements to Your UI

Start placing element in your HTML's <body>. Find the right HTML string , copy/paste on your page and customize it.