Headings

Headings and subheadings should be organised in a hierarchy,
with heading first, followed by subheadings in order
(An H2 will nestle under H1, and H2 under H3, and so on down).

Heading 1

Element using class

Heading 2

Element using class

Heading 3

Element using class

Heading 4

Element using class

Heading 5

Element using class

Block title

Upper case

weight 700

text-10

text-11

text-12

text-14

text-16

text-18

text-20

text-22

text-24

text-26

text-28

text-30

text-32

<body class="ccl-style ccl-color_generic">
					<h1>Heading 1</h1>
			<p class="ccl-heading--h1">Element using class</p>

<h2>Heading 2</h2>
			<p class="ccl-heading--h2">Element using class</p>

<h3>Heading 3</h3>
			<p class="ccl-heading--h3">Element using class</p>

<h4>Heading 4</h4>
			<p class="ccl-heading--h4">Element using class</p>

<h5>Heading 5</h5>
			<p class="ccl-heading--h5">Element using class</p>
			<div class="ccl-block-title">Block title</div>
			<h2 class="ccl-text-ucase">Upper case</h2>
			<h2 class="ccl-text-w700">weight 700</h2>
			<h2 class="ccl-text-10">text-10</h2>
			<h2 class="ccl-text-11">text-11</h2>
			<h2 class="ccl-text-12">text-12</h2>
			<h2 class="ccl-text-14">text-14</h2>
			<h2 class="ccl-text-16">text-16</h2>
			<h2 class="ccl-text-18">text-18</h2>
			<h2 class="ccl-text-20">text-20</h2>
			<h2 class="ccl-text-22">text-22</h2>
			<h2 class="ccl-text-24">text-24</h2>
			<h2 class="ccl-text-26">text-26</h2>	
			<h2 class="ccl-text-28">text-28</h2>	
			<h2 class="ccl-text-30">text-30</h2>	
			<h2 class="ccl-text-32">text-32</h2>		
				</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.