.atomyc

Colors Show code

#4A7DFD

( 74, 125, 253 )
#4BD6B6

( 75, 214, 182 )
#FF4343

( 255, 67, 67 )
#EAEAEA

( 234, 234, 234 )
#333333

( 51, 51, 51 )

					
					<ul class="kol-1 list_one_line kolflex flexdir_ltr flex_multi_ltr flex_btw">
					<li class="card_color">
					<div class="card_color_contain">
					<div class="box_color"></div>
					<p>#4A7DFD</p>
					<p>&#40; 74, 125, 253 &#41;</p>
					</div>
					</li>
					<li class="card_color">
					<div class="card_color_contain">
					<div class="box_color"></div>
					<p>#4BD6B6</p>
					<p>&#40; 75, 214, 182 &#41;</p>
					</div>
					</li>
					<li class="card_color">
					<div class="card_color_contain">
					<div class="box_color"></div>
					<p>#FF4343</p>
					<p>&#40; 255, 67, 67 &#41;</p>
					</div>
					</li>
					<li class="card_color">
					<div class="card_color_contain">
					<div class="box_color"></div>
					<p>#EAEAEA</p>
					<p>&#40; 234, 234, 234 &#41;</p>
					</div>
					</li>
					<li class="card_color">
					<div class="card_color_contain">
					<div class="box_color"></div>
					<p>#333333</p>
					<p>&#40; 51, 51, 51 &#41;</p>
					</div>
					</li>
					</ul>

Fonts Show code

Primary font 'Quicksand', "sans-serif"
Primary font italic 'Quicksand', "sans-serif"
Primary font bold 'Quicksand', "sans-serif"
Secondary font 'Lato', "sans-serif"
Secondary font italic 'Lato', "sans-serif"
Secondary font bold 'Lato', "sans-serif"

					
<ul class="list_no_style">
<li class="primaryfont">Primary font 'Quicksand', "sans-serif"</li>
<li class="primaryfont"><em>Primary font italic 'Quicksand', "sans-serif"</em></li>
<li class="primaryfont"><b>Primary font bold 'Quicksand', "sans-serif"</b></li>
<li class="secondaryfont">Secondary font 'Lato', "sans-serif"</li>
<li class="secondaryfont"><em>Secondary font italic 'Lato', "sans-serif"</em></li>
<li class="secondaryfont"><b>Secondary font bold 'Lato', "sans-serif"</b></li>
</ul>

Basic grid Show code

100%

50%

33%

25%

20%

16%

14%

12,5%

11%

10%

					
<div class="kolbig">
<div class="kol-1">100%</div>
<div class="kol-2">50%</div>
<div class="kol-2">50%</div>
<div class="kol-3">33%</div>
<div class="kol-3">33%</div>
<div class="kol-3">33%</div>
<div class="kol-4">25%</div>
<div class="kol-4">25%</div>
<div class="kol-4">25%</div>
<div class="kol-4">25%</div>
<div class="kol-5">20%</div>
<div class="kol-5">20%</div>
<div class="kol-5">20%</div>
<div class="kol-5">20%</div>
<div class="kol-5">20%</div>
<div class="kol-6">16%</div>
<div class="kol-6">16%</div>
<div class="kol-6">16%</div>
<div class="kol-6">16%</div>
<div class="kol-6">16%</div>
<div class="kol-6">16%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-7">14%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-8">12,5%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-9">11%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-10">10%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-11">9%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
<div class="kol-12">8%</div>
</div>

Flex grid Show code

Example1: items ordered from left to right with the option to more than one line and separation equal everywhere.

					
<div class="kolflex flexdir_ltr flex_multi_ltr flex_around">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 2: Items ordered from left to right with the option to more than one line and the only separation between the elements.

					
<div class="kolflex flexdir_ltr flex_multi_ltr flex_btw">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 3: Items ordered from left to right without option to more than one line and the only separation between the elements.

					
<div class="kolflex kolflex flexdir_rtl flex_around">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 4: Items ordered from top to bottom without the option of more than one line

					
<div class="kolflex flexdir_btt">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 5: The container has a size of 15em and all elements focus on the center of the container

					
<div class="kolflex flex_multi_ltr flex_around flex_alg_center flex_demo_height">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 6: The container has a size of 25em and all elements focus on the top of the container

					
<div class="kolflex flex_multi_ltr flex_around flex_alg_base flex_demo_height">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Example 7: The container has a size of 25em and all elements focus on the bottom of the container

					
<div class="kolflex flex_multi_ltr flex_around flex_alg_end flex_demo_height">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Colum grid Show code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.

					
<div class='koltable_4'>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
<article class='contable'>
<div class='koltable_cnt'>
<p class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus elit. In sodales, mauris vel pellentesque ultricies, enim magna gravida libero, fringilla accumsan lorem enim congue ex. Sed non nunc purus. Nullam varius consectetur nulla id tincidunt. Duis fermentum pretium pharetra. Suspendisse vitae quam molestie, maximus tortor eu.</p>
</div>
</article>
</div>

Animations

Visibility Show code

This text is hidden on smaller screens
This text is only visible on smaller screens
This text is hidden on large screens
This text is only visible on large screens

					
					<span class="hide_small">This text is hidden on smaller screens</span> 
					<span class="hide_large"><em>This text is only visible on smaller screens</em></span> 
					<span class="hide_large">This text is hidden on large screens</span> 
					<span class="hide_small"><em>This text is only visible on large screens</em></span>

Headings Show code

Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6

					
					<h1>Heading level 1</h1> 
					<h2>Heading level 2</h2> 
					<h3>Heading level 3</h3> 
					<h4>Heading level 4</h4> 
					<h5>Heading level 5</h5> 
					<h6>Heading level 6</h6>

Paragraph Show code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dui in erat dignissim sollicitudin. Cras convallis nulla libero, at efficitur dolor aliquam at. Praesent tincidunt libero eros, vitae accumsan quam sagittis non. Ut efficitur quam in erat fermentum, et euismod magna scelerisque. Ut pretium scelerisque semper. Aliquam gravida urna non dictum tempor. Fusce tempor leo et purus laoreet varius. Etiam lectus enim, pretium eu sapien id, iaculis lobortis ex.

					
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dui in erat dignissim sollicitudin. Cras convallis nulla libero, at efficitur dolor aliquam at. Praesent tincidunt libero eros, vitae accumsan quam sagittis non. Ut efficitur quam in erat fermentum, et euismod magna scelerisque. Ut pretium scelerisque semper. Aliquam gravida urna non dictum tempor. Fusce tempor leo et purus laoreet varius. Etiam lectus enim, pretium eu sapien id, iaculis lobortis ex. 
</p>

Blockquote Show code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dui in erat dignissim sollicitudin. Cras convallis nulla libero, at efficitur dolor aliquam at. Praesent tincidunt libero eros, vitae accumsan quam sagittis non. Ut efficitur quam in erat fermentum, et euismod magna scelerisque. Ut pretium scelerisque semper. Aliquam gravida urna non dictum tempor. Fusce tempor leo et purus laoreet varius. Etiam lectus enim, pretium eu sapien id, iaculis lobortis ex.

					
					<blockquote> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dui in erat dignissim sollicitudin. Cras convallis nulla libero, at efficitur dolor aliquam at. Praesent tincidunt libero eros, vitae accumsan quam sagittis non. Ut efficitur quam in erat fermentum, et euismod magna scelerisque. Ut pretium scelerisque semper. Aliquam gravida urna non dictum tempor. Fusce tempor leo et purus laoreet varius. Etiam lectus enim, pretium eu sapien id, iaculis lobortis ex. 
</blockquote>

Inline text Show code

This is a link
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
~~This text is deleted~~ and This text is inserted
~~This text has a strikethrough~~
Superscript^®
Subscript for things like O₂
This small text is small for for fine print, etc.
Abbreviation HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variable element, such as x = y

					
					<ul> 
					<li><a href="#">This is a link</a></li> 
					<li><strong>Strong is used to indicate strong importance</strong></li> 
					<li><em>This text has added emphasis</em></li> 
					<li>The <b>b element</b> is stylistically different text from normal text, without any special importance</li> 
					<li>The <i>i element</i> is text that is set off from the normal text</li> 
					<li>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</li>
					<li><del>This text is deleted</del> and <ins>This text is inserted</ins></li> 
					<li><s>This text has a strikethrough</s></li> 
					<li>Superscript<sup>®</sup></li> 
					<li>Subscript for things like O<sub>2</sub></li> 
					<li><small>This small text is small for for fine print, etc.</small></li> 
					<li>Abbreviation <abbr title="HyperText Markup Language">HTML</abbr></li> 
					<li>Keybord input: <kbd>Cmd</kbd></li> 
					<li><q cite="http://html5doctor.com/tag/q/">This text is a short inline quotation</q></li> 
					<li><cite>This is a citation</cite></li> 
					<li>The <dfn>dfn element</dfn> indicates a definition.</li> 
					<li>The <mark>mark element</mark> indicates a highlight</li> 
					<li><code>This is what inline code looks like.</code></li> 
					<li><samp>This is sample output from a computer program</samp></li> 
					<li> The <var>variable element</var>, such as <var>x</var> = <var>y</var></li> 
					</ul>

Time Show code

2 weeks ago
1 h and 34min

					
					<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time> 
					<time datetime="PT1H34M">1 <abbr title="hour">h</abbr> and 34<abbr title="minute">min</abbr></time>

Hr tag Show code

					
					<hr>

Preformatted text Show code

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

					
					<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>

Unordered list Show code

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

					
					<ul> 
					<li>This is a list item in an unordered list</li> 
					<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li> 
					<li> Lists can be nested inside of each other 
					<ul> 
					<li>This is a nested list item</li> 
					<li>This is another nested list item in an unordered list</li> 
					</ul> 
					</li> 
					<li>This is the last list item</li> 
					</ul>

Ordered list Show code

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

					
					<ol> 
					<li>This is a list item in an ordered list</li> 
					<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
					<li> Lists can be nested inside of each other 
					<ol> 
					<li>This is a nested list item</li> 
					<li>This is another nested list item in an ordered list</li> 
					</ol> 
					</li> 
					<li>This is the last list item</li> 
					</ol>

Definition list Show code

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.: And it gets a definition too, which is this line.

					
					<dl> 
					<dt>Definition List</dt> 
					<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd> 
					<dt>This is a term.</dt> 
					<dd>This is the definition of that term.</dd> 
					<dt>Here is another term.</dt> 
					<dd>And it gets a definition too, which is this line.</dd> 
					<dt>Here is term that shares a definition with the term below.</dt> 
					<dd>And it gets a definition too, which is this line.</dd> 
					</dl>

You are watching

Colors Show code

Fonts Show code

Basic grid Show code

Flex grid Show code

Example1: items ordered from left to right with the option to more than one line and separation equal everywhere.

Example 2: Items ordered from left to right with the option to more than one line and the only separation between the elements.

Example 3: Items ordered from left to right without option to more than one line and the only separation between the elements.

Example 4: Items ordered from top to bottom without the option of more than one line

Example 5: The container has a size of 15em and all elements focus on the center of the container

Example 6: The container has a size of 25em and all elements focus on the top of the container

Example 7: The container has a size of 25em and all elements focus on the bottom of the container

Colum grid Show code

Animations

Visibility Show code

Headings Show code

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Paragraph Show code

Blockquote Show code

Inline text Show code

Time Show code

Hr tag Show code

Preformatted text Show code

Unordered list Show code

Ordered list Show code

Definition list Show code

Text fields (inputs) Show code

You are watching all atoms molecules organisms templates

Colors Show code

Fonts Show code

Basic grid Show code

Flex grid Show code

Example1: items ordered from left to right with the option to more than one line and separation equal everywhere.

Example 2: Items ordered from left to right with the option to more than one line and the only separation between the elements.

Example 3: Items ordered from left to right without option to more than one line and the only separation between the elements.

Example 4: Items ordered from top to bottom without the option of more than one line

Example 5: The container has a size of 15em and all elements focus on the center of the container

Example 6: The container has a size of 25em and all elements focus on the top of the container

Example 7: The container has a size of 25em and all elements focus on the bottom of the container

Colum grid Show code

Animations

Visibility Show code

Headings Show code

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Paragraph Show code

Blockquote Show code

Inline text Show code

Time Show code

Hr tag Show code

Preformatted text Show code

Unordered list Show code

Ordered list Show code

Definition list Show code

Text fields (inputs) Show code

You are watching