Copernicus Component Library

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.

<body class="ccl-style ccl-color_generic">
					<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>
				</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.