Copernicus Component Library

Header

Implemented by Agency as part of the Copernicus Programme

Copernicus Services

Atmosphere

Climate change

Land

Marine

Emergency

Security

Quick Links

Acces to data

Access to finance

Contact and Support

Copernicus Relay

Copernicus Academy

Highlights

21.05.2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

22.05.2019

Lorem amet, consectetur elit.

23.05.2019

Dolor sit amet, consectetur adipiscing .

24.05.2019

Ipsum dolor sit amet, adipiscing elit.

25.05.2019

Consectetur adipiscing elit.

26.05.2019

Lorem ipsum dolor sit amet.

Use cases

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ed nec urna quis orci tincidunt elementum sed nec ante. Quisque condimentum, lorem ut hendrerit vestibulum, libero lorem cursus odio, vitae commodo felis risus id ligula. Pellentesque et lorem posuere, egestas ligula ac, cursus risus. Vivamus eget lobortis mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Copernicus, previously known as GMES (Global Monitoring for Environment and Security), is the European Programme for the establishment of a European capacity for Earth Observation. The views expressed on this website are those of the authors and do not necessarily represent those of the European Commission.

In collaboration with:

<body class="ccl-style ccl-color_generic">	
					<header class="ccl-header">
				<div class="ccl-header-tools">
					<div class="ccl-container">
						<div class="ccl-main-menu-collapse-button"><span class="ccl-icon-menu"></span></div>
						<div class="ccl-search-collapse-button"><span class="ccl-icon-zoom"></span></div>
						<div class="ccl-header-slogan">Implemented by Agency as part of the Copernicus Programme</div>

<div class="ccl-header-tools-container">
							<ul class="ccl-header-menu-tools">
								<li><a href="#">Media</a></li>
								<li><a href="#">Use Cases</a></li>
								<li><a href="#">Contact</a></li>
								<li><a href="#">Login</a></li>
							</ul>
							<form class="ccl-header-search"><input type="text" placeholder="search"><button type="submit"><span class="ccl-icon-zoom"></span></button></form>
							<div class="ccl-header-lang-switcher" id="block-languageswitcher">
								
								<div class="ccl-language-list-container">
									<ul class="ccl-language-list">
										<li hreflang="en" class="en is-active"><a href="#" class="ccl-language-link is-active" hreflang="en">English (EN)</a></li>
										<li hreflang="fr" class="fr"><a href="#" class="ccl-language-link" hreflang="fr">Français (FR)</a></li>
										<li hreflang="de" class="de"><a href="#" class="ccl-language-link" hreflang="de">Deutsch (DE)</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="ccl-header-nav ">
					<div class="ccl-container">
						<div class="ccl-header-logos-container">
							<div class="ccl-header-logo-container">
								<img class="ccl-header-logo" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/copernicus_eu_logo.svg"  />
							</div>
							
							<div class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-atmosphere">
								<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-atmosphere.svg"/>
								<div class="ccl-service-button-label" >Atmosphere<br/>Monitoring Service</div>
							</div>
							
						</div>

<nav class="ccl-main-menu">
							<ul class="ccl-header-main-menu">
								<li><a href="#">Home</a></li>
								<li><a href="#">Services</a></li>
								<li class="active"><a href="#">Opportunities</a></li>
								<li><a href="#">Access to data</a></li>
								<li><a href="#">News & events</a>
									<ul>
										<li><a href="#">Item 1</a></li>
										<li><a href="#">Item 2</a></li>
										<li><a href="#">Long item 3</a></li>
										<li><a href="#">Very very very long item 4</a></li>
										<li><a href="#">Item 5</a></li>									
									</ul>
								</li>
								<li><a href="#">About</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</header>
			<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 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-block-row">
				<h3 class="ccl-block-title ccl-container">Copernicus Services</h3>
				<div class="ccl-block ccl-block-services ccl-container">
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-atmosphere">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-atmosphere.svg"/>
							<div class="ccl-service-button-label" >Atmosphere</div>
						</div>
					</div>
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-climate">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-climate.svg"/>
							<div class="ccl-service-button-label" >Climate change</div>
						</div>
					</div>
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-land">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-land.svg"/>
							<div class="ccl-service-button-label" >Land</div>
						</div> 
					</div>
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-marine">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-marine.svg"/>
							<div class="ccl-service-button-label" >Marine</div>
						</div>
					</div>
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-emergency">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-emergency.svg"/>
							<div class="ccl-service-button-label" >Emergency</div>
						</div>
					</div>
					<div class="ccl-service-button-container">
						<div class="ccl-service-button ccl-service-button-f ccl-service-button-security">
							<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-security.svg"/>
							<div class="ccl-service-button-label" >Security</div>
						</div>
					</div>

</div>
			</div>
			<div class="ccl-block-row ccl-bg-grey">
				<h3 class="ccl-block-title ccl-container">Quick Links</h3>
				<div class="ccl-block ccl-block-quick-links ccl-container">
					<div class="ccl-quick-links-container">
						<div class="ccl-quick-links  ">
							<img class="ccl-svg ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-quick-data.svg"/>
							<div class="ccl-quick-links-label" >Acces to data</div>
						</div>
					</div>
					<div class="ccl-quick-links-container">
						<div class="ccl-quick-links  ">
							<img class="ccl-svg ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-quick-finance.svg"/>
							<div class="ccl-quick-links-label" >Access to finance</div>
						</div>
					</div>
					<div class="ccl-quick-links-container">
						<div class="ccl-quick-links ">
							<img class="ccl-svg ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-quick-contact.svg"/>
							<div class="ccl-quick-links-label" >Contact and Support</div>
						</div> 
					</div>
					<div class="ccl-quick-links-container">
						<div class="ccl-quick-links ">
							<img class="ccl-svg ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-quick-relay.svg"/>
							<div class="ccl-quick-links-label" >Copernicus Relay</div>
						</div>
					</div>
					<div class="ccl-quick-links-container">
						<div class="ccl-quick-links ccl-quick-links-f">
							<img class="ccl-svg ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-quick-academy.svg"/>
							<div class="ccl-quick-links-label" >Copernicus Academy</div>
						</div>
					</div>
				</div>

</div>
			<div class="ccl-block-row ccl-no-margin-bottom">
				<h3 class="ccl-block-title ccl-container">Highlights</h3>
				<div class="ccl-list-items ccl-container ccl-list-carousel">
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">21.05.2019
						</div>
						<h2 class="ccl-list-item-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">22.05.2019
						</div>
						<h2 class="ccl-list-item-title">Lorem amet, consectetur  elit.
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">23.05.2019
						</div>
						<h2 class="ccl-list-item-title">Dolor sit amet, consectetur adipiscing .
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">24.05.2019
						</div>
						<h2 class="ccl-list-item-title">Ipsum dolor sit amet,  adipiscing elit.
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">25.05.2019
						</div>
						<h2 class="ccl-list-item-title">Consectetur adipiscing elit.
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<div class="ccl-list-item-date">26.05.2019
						</div>
						<h2 class="ccl-list-item-title">Lorem ipsum dolor sit amet.
						</h2>

</div>
				</div>
				<div class="text-right ccl-container ccl-block-button">
					<button type="submit" class="ccl-button ccl-button--default">View all Highlights</button>
				</div>
			</div>
			<div class="ccl-block-row ccl-no-margin-bottom">
				<h3 class="ccl-block-title ccl-container">Use cases</h3>
				<div class="ccl-use-case-container ccl-container">
				<div class="ccl-use-case-col">
					<div class="ccl-use-case">
						<div class="ccl-use-case-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg" title="Placeholder image" alt="Placeholder image">
						</div>
						<a href="#" class="ccl-use-case-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
						<p>
							Ed nec urna quis orci tincidunt elementum sed nec ante. Quisque condimentum, lorem ut hendrerit vestibulum, libero lorem cursus odio, vitae commodo felis risus id ligula. Pellentesque et lorem posuere, egestas ligula ac, cursus risus. Vivamus eget lobortis mi.
						</p>
						
					</div>
					<div class="ccl-use-case-buttons">
						<button type="submit" class="ccl-button ccl-button--default">View more</button>
					</div>
				</div>
				<div class="ccl-use-case-col ccl-use-case-col-list">
					<div class="ccl-use-case">
						<a href="#" class="ccl-use-case-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
						<p>
							Ed nec urna quis orci tincidunt elementum sed nec ante. Quisque condimentum, lorem ut hendrerit vestibulum, libero lorem cursus odio, vitae commodo felis risus id ligula. Pellentesque et lorem posuere, egestas ligula ac, cursus risus. Vivamus eget lobortis mi.
						</p>
					</div>
					<div class="ccl-use-case">
						<a href="#" class="ccl-use-case-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
						<p>
							Ed nec urna quis orci tincidunt elementum sed nec ante. Quisque condimentum, lorem ut hendrerit vestibulum, libero lorem cursus odio, vitae commodo felis risus id ligula. Pellentesque et lorem posuere, egestas ligula ac, cursus risus. Vivamus eget lobortis mi.
						</p>
					</div>
					<div class="ccl-use-case">						
						<a href="#" class="ccl-use-case-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
						<p>
							Ed nec urna quis orci tincidunt elementum sed nec ante. Quisque condimentum, lorem ut hendrerit vestibulum, libero lorem cursus odio, vitae commodo felis risus id ligula. Pellentesque et lorem posuere, egestas ligula ac, cursus risus. Vivamus eget lobortis mi.
						</p>
					</div>
					<div class="ccl-use-case-buttons">
						<button type="submit" class="ccl-button ccl-button--default">View all</button>
					</div>
				</div>
				
			</div>
			</div>
			<div class="ccl-block-row ccl-no-margin-bottom ccl-no-padding-bottom">
				<div class="ccl-block ccl-block-center ccl-container-small">
					<p class="ccl-paragraph--s">Copernicus, previously known as GMES (Global Monitoring for Environment and Security), is the European Programme for the establishment of a European capacity for Earth Observation. The views expressed on this website are those of the authors and do not necessarily represent those of the European Commission.</p>
				</div>
			</div>
			<div class="ccl-block-row">
				<div class="ccl-block ccl-block-center ccl-container">
					<a href="#"><img class=" ccl-quick-links-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/european_commission_logo.svg" style="max-width: 195px;" /></a>
					<br/>
					<p>In collaboration with:</p>
				</div>

</div>	
			</div>

<footer class="ccl-footer">
				<div class="ccl-footer-main">
					<div class="ccl-footer-logo"><img src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/copernicus_eu_logo_white.svg" class="ccl-footer-logo-img"/></div>
					<div class="ccl-container ccl-container-flex">
						<div class="ccl-footer-col ">
							<div class="ccl-footer-col-title">Copernicus Services: </div>
							<div class="ccl-footer-services">
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-atmosphere">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-atmosphere.svg"/>	Atmosphere
								</a>
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-marine">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-marine.svg"/>Marine
								</a>
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-land">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-land.svg"/>Land
								</a>
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-security">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-security.svg"/>Security
								</a>
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-climate">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-climate.svg"/>Climate Change	
								</a>
								<a href="#" class="ccl-service-button ccl-service-button-link ccl-service-button-w ccl-service-button-emergency">
									<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-emergency.svg"/>Emergency	
								</a>
							</div>
						</div>
						<div class="ccl-footer-col">
							<div class="ccl-footer-form-title">Subscribe to the newsletter:</div>
							<form class="ccl-footer-form"><input type="text"><button type="submit">Subscribe</button></form>
							<div class="ccl-footer-body-title">Follow us</div>
							<div class="ccl-footer-social">
								<a href="#"><span class="ccl-icon-youtube"></span></a>
								<a href="#"><span class="ccl-icon-twitter"></span></a>
								<a href="#"><span class="ccl-icon-instagram"></span></a></a>
								<a href="#"><span class="ccl-icon-facebook"></span></a>
								<a href="#"><span class="ccl-icon-share"></span></a>
							</div>
						</div>
						<div class="ccl-footer-col">
							<div class="ccl-footer-col-title">Copernicus</div>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum eget diam sed porta. Suspendisse id risus vitae purus iaculis imperdiet. Morbi in cursus risus. Mauris eu neque placerat, aliquet neque nec, luctus lorem. In aliquet lorem lorem, quis faucibus mauris consectetur a. Nullam iaculis nunc mattis elit mollis placerat. </p>
						</div>
					</div>
				</div>
				<div class="ccl-footer-bottom">
					<ul class="ccl-footer-legal">
						<li>
							<a class="ccl-link" href="#">Legal and copyright  </a>
						</li>
						<li>
							<a class="ccl-link" href="#">Cookies</a>
						</li>
						<li>
							<a class="ccl-link" href="#">Disclaimer</a>
						</li>
						<li>
							<a class="ccl-link" href="#">Data protection notice</a>
						</li>
					</ul>

</div>
			</footer>
				</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.