Copernicus Component Library

Blocks

Theme color

Proident est reprehenderit

Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.

Purple

Est cillum officia.

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

Date: 07/09/2020

Green

Proident est reprehenderit

Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.

Flip

Proident est reprehenderit

Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.

Catalogue example

Copernicus services catalogue

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

Learn more

<body class="ccl-style ccl-color_generic">	
					
					<h3>Theme color</h3>
					<div class="ccl-block-trapez ccl-block-trapez-theme-color ccl-trapez-no-on-mobile"	style="background-image: url('https://eu-copernicus.github.io/copernicus-component-library-v2/assets/images/banner_placeholder2.jpg')">
						<div class="ccl-block-trapez-content">
							<h3>Proident est reprehenderit</h3>
							<p>Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.</p>
							<p><a class="ccl-button ccl-button--default ccl-button--default-transparent" href="#" role="button">View more</a></p>
						</div>
					</div>
		
					<h3>Purple</h3>
					<div class="ccl-block-trapez ccl-block-trapez-purple-color ccl-trapez-no-on-mobile"
						style="background-image: url('https://eu-copernicus.github.io/copernicus-component-library-v2/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>
					<h3>Green</h3>
					<div class="ccl-block-trapez ccl-block-trapez-green-color ccl-trapez-no-on-mobile"
						style="background-image: url('https://eu-copernicus.github.io/copernicus-component-library-v2/assets/images/banner_placeholder2.jpg')">
						<div class="ccl-block-trapez-content">
							<h3>Proident est reprehenderit</h3>
							<p>Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.</p>
							<p><a class="ccl-button ccl-button--default ccl-button--default-transparent" href=" #" role="button">View more</a></p>
						</div>
					</div>
		
					<h3>Flip</h3>
					<div class="ccl-block-trapez ccl-block-trapez-flip ccl-block-trapez-theme-color ccl-trapez-no-on-mobile"
						style="background-image: url('https://eu-copernicus.github.io/copernicus-component-library-v2/assets/images/banner_placeholder2.jpg')">
						<div class="ccl-block-trapez-content">
							<h3>Proident est reprehenderit</h3>
							<p>Irure eiusmod nisi dolore occaecat nostrud pariatur veniam irure.</p>
							<p><a class="ccl-button ccl-button--default ccl-button--default-transparent" href=" #" role="button">View more</a></p>
						</div>
					</div>
		
					<h3>Catalogue example</h3>
					<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>
				</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.