Copernicus Component Library

services

Icons

Small

White

Full

Atmosphere
Monitoring Service

Climate
Change Service

Land
Monitoring Service

Marine Environment
Monitoring Service

Emergency
Management Service

Security

In Situ

Links with icons

Small

White

Full

Atmosphere
Monitoring Service

Climate
Change Service

Land
Monitoring Service

Marine Environment
Monitoring Service

Emergency
Management Service

Security

In Situ

<div class="ccl-service-button 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"/>	
					</div>
					
					<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"/>	
					</a>
					
					<div class="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/ccl-assets/images/ccl-icon-security.svg"/>
						<div class="ccl-service-button-label" >Security</div>
					</div>
					
					<a href="#" class="ccl-service-button ccl-service-button-full ccl-service-button-link ccl-service-button-insitu">
						<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-insitu.svg"/>
						<div class="ccl-service-button-label" >In Situ</div>
					</a>
					
				</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.