Copernicus Component Library

Services

Buttons

Responsive

Atmosphere

Climate change

Land

Marine

Emergency

Security

Medium

Atmosphere

Climate change

Land

Marine

Emergency

Security

Large

Atmosphere

Climate change

Land

Marine

Emergency

Security

<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 ccl-service-button-m 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 class="ccl-service-button ccl-service-button-l 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>
				</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.