Copernicus Component Library

Select Color Palette

Expand/Collapse

One

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. Suspendisse ultricies est mi, eu ornare dolor faucibus et. Etiam malesuada consequat semper. Duis ornare eros sapien, et fermentum ligula sagittis a. Proin quis tortor ac mi tempor volutpat.

Two

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. Suspendisse ultricies est mi, eu ornare dolor faucibus et. Etiam malesuada consequat semper. Duis ornare eros sapien, et fermentum ligula sagittis a. Proin quis tortor ac mi tempor volutpat.

Three

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. Suspendisse ultricies est mi, eu ornare dolor faucibus et. Etiam malesuada consequat semper. Duis ornare eros sapien, et fermentum ligula sagittis a. Proin quis tortor ac mi tempor volutpat.

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.

<script src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/js/jquery.min.js"></script> <script src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/js/slick.min.js"></script> <script src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/js/ccl-functions.js"></script> <link rel="stylesheet" type="text/css" href="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/css/ccl.css" media="all">

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.