Copernicus Component Library

Header

#EUSpace

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.

Copernicus services catalogue

The catalogue contains a comprehensive list of information products relevant to the various Copernicus services.

Learn more

Est cillum officia.

Ullamco officia et nisi excepteur nisi est laboris laboris do dolor officia aliqua nulla minim.

Date: 07/09/2020

Copernicus Services

Atmosphere

Climate change

Land

Marine

Emergency

Security

Copernicus Thematic Hubs

Health Hub

The Copernicus Health Hub brings together all the Copernicus environmental data and products pertinent to Health, including that related to physical health, mental health and well-being.

Coastal Hub

The Copernicus Coastal Hub provides open and free access to a selection of coastal Earth observation data from the Copernicus Sentinel satellites and all Copernicus Services.

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 ccl-text-w700 ccl-desktop-only">#EUSpace</div>

<div class="ccl-header-mobile-logo-container ccl-mobile-only">
							<img class="ccl-header-mobile-logo"
								src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/copernicus_eu_logo_full_white.svg" />
						</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-v2/ccl-assets/images/copernicus_eu_logo_full.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-v2/ccl-assets/images/ccl-icon-atmosphere.svg" />
								<div class="ccl-service-button-label">Atmosphere<br />Monitoring Service</div>
							</div>
							<div
								class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-climate">
								<img class="ccl-svg ccl-service-button-icon"
									src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/ccl-icon-climate.svg" />
								<div class="ccl-service-button-label">Climate<br />Change Service</div>
							</div>
							<div
								class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-land">
								<img class="ccl-svg ccl-service-button-icon"
									src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/ccl-icon-land.svg" />
								<div class="ccl-service-button-label">Land<br />Monitoring Service</div>
							</div>
							<div
								class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-marine">
								<img class="ccl-svg ccl-service-button-icon"
									src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/ccl-icon-marine.svg" />
								<div class="ccl-service-button-label">Marine Environment<br />Monitoring Service</div>
							</div>
							<div
								class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-emergency">
								<img class="ccl-svg ccl-service-button-icon"
									src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/ccl-icon-emergency.svg" />
								<div class="ccl-service-button-label">Emergency<br />Management Service</div>
							</div>

<div
								class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-security">
								<img class="ccl-svg ccl-service-button-icon"
									src="https://eu-copernicus.github.io/copernicus-component-library-v2/ccl-assets/images/ccl-icon-security.svg" />
								<div class="ccl-service-button-label">Security</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><span>News & events</span>
									<ul>
										<li><a href="#">Item 1</a></li>
										<li><a href="#">Item 2</a>
											<ul>
												<li><a href="#">Item 1</a></li>
												<li class="active"><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="#">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-v2/assets/images/banner_placeholder.jpg)">
					<div class=" ccl-banner-graphic-line graphic-line-title">
						<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>
				<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">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-v2/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"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
						</h2>

</div>
					<div class="ccl-list-item ">
						<div class="ccl-list-item-image">
							<img src="https://eu-copernicus.github.io/copernicus-component-library-v2/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>
			<div class="ccl-block-columns">
				<div
					class="ccl-block-trapez ccl-bg-copernicus-catalogue ccl-block-trapez-flip ccl-block-trapez-green-color ccl-trapez-no-on-mobile">
					<div class="ccl-block-trapez-content">
						<h3>Copernicus services catalogue</h3>
						<p>The catalogue contains a comprehensive list of information products relevant to the various Copernicus
							services.</p>
						<p><a class="ccl-button ccl-button--default ccl-button--default-transparent" href=" #" role="button">Learn
								more</a></p>
					</div>
				</div>
				<div class="ccl-block-trapez ccl-block-trapez-purple-color ccl-trapez-no-on-mobile"
					style="background-image: url('https://ccl.codex42.online:443/v2/_site/assets/images/banner_placeholder2.jpg')">
					<div class="ccl-block-trapez-content">
						<div class=" day-image-block-hp-container">
							<h2 class="ccl-text-18 ccl-text-ucase ccl-text-w700">Est cillum officia.</h2>
							<h3 class="ccl-text-w700"><a href="#" hreflang="en">Ullamco officia et nisi excepteur nisi est laboris
									laboris do dolor officia aliqua nulla minim.</a></h3>
							<div class="ccl-text-16 ccl-text-ucase">Date: <time datetime="2020-09-07T12:00:00Z">07/09/2020</time>
							</div>
							<div class="ccl-list-tags  ccl-list-tags-neg">
								<ul>
									<li>Natural Events</li>
									<li>Water</li>
								</ul>
								<ul>
									<li>Antarctic</li>
									<li>Climate Change</li>
									<li>Sea and Lake Ice</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

<div class="ccl-block-columns">
				<div>
					<h3 class="ccl-block-title">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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/ccl-assets/images/ccl-icon-security.svg" />
								<div class="ccl-service-button-label">Security</div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<h3 class="ccl-block-title ">Copernicus Thematic Hubs</h3>
					<div class="ccl-block-columns ccl-block-columns-fluid" style="height: calc(((50vw - 60px) / 3) - 16px);">
						<div style="flex-direction: column;justify-content: center;display: flex;"><a
								class="ccl-button ccl-button-primary" href="#" style="max-width: 200px;">Health Hub</a>
						</div>
						<div style="padding:1rem;align-self:center;">The Copernicus Health Hub brings together all the Copernicus
							environmental data
							and products pertinent to Health, including that related to physical health, mental health and well-being.
						</div>
					</div>
					<div class="ccl-block-columns ccl-block-columns-fluid">
						<div style="flex-direction: column;justify-content: center;display: flex;"><a
								class="ccl-button ccl-button-primary" href="#" style="max-width: 200px;">Coastal Hub</a>
						</div>
						<div style="padding:1rem;align-self:center;">The Copernicus Coastal Hub provides open and free access to a
							selection of coastal
							Earth observation data from the Copernicus Sentinel satellites and all Copernicus Services.</div>
					</div>

</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-v2/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-graphic-lines"></div>
						<div class="ccl-use-case-col-list-container">
							<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 ccl-button--default-neg">View all</button>
							</div>

</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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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.