Last active
August 29, 2015 14:19
-
-
Save tristanperalta/8d50c288339bd55ddee1 to your computer and use it in GitHub Desktop.
Amber
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- collapsable wrapped in data-collpasable attribute | |
has 2 sub-element in it, (1) Header and (2) Collapsable-block. | |
If Header is wrapped in collapsable block it will automatically add a dropdown | |
on the left side of the text. Collapsable block are the ones that show and | |
hide when header is clicked. --> | |
<div data-collapsable=""> | |
<h2>First div</h2> | |
<div class="collapsable-block"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum | |
porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare. | |
Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae | |
sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor | |
eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta | |
eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque | |
ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum | |
molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet | |
lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet. | |
Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius. | |
Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et | |
eleifend non, tincidunt id ipsum. | |
</p> | |
<p>Morbi id ante risus. Nulla facilisi. | |
Mauris mauris ligula, dapibus eget est ac, lacinia tristique leo. Vivamus | |
iaculis laoreet semper. Proin quis eros nec ante malesuada commodo in sit amet | |
tellus. Sed tempus, sapien sed convallis sollicitudin, est sem laoreet ex, eget | |
faucibus massa sapien eget quam. Phasellus non libero erat. Sed molestie, lorem | |
ac dignissim tristique, velit leo rutrum dui, nec fermentum augue est vel | |
mauris. Fusce turpis lacus, elementum eu sollicitudin ac, rutrum at felis. | |
Pellentesque tincidunt justo ac odio malesuada placerat. Vestibulum rhoncus at | |
magna at fermentum. Phasellus rutrum, dui sed sollicitudin fringilla, magna | |
metus ultrices lectus, nec imperdiet elit lorem condimentum orci. Aliquam in | |
fermentum tellus. Suspendisse consequat imperdiet diam, eget pellentesque diam | |
pulvinar at | |
</p> | |
</div> | |
</div> | |
<!-- this is an example when adding tags to a collapsable section. It will | |
create a 'Manual' button on the upper portion of the page --> | |
<div data-collapsable="" data-collapsable-tags="manual"> | |
<h2>Manual div</h2> | |
<div class="collapsable-block"> | |
<p>Sed ullamcorper placerat nisi. Aliquam tristique risus sit amet bibendum | |
tempus. Aliquam imperdiet egestas pellentesque. Mauris interdum velit sed | |
posuere pellentesque. Praesent quis elit ac lorem molestie aliquet eget eget | |
magna. Suspendisse porttitor euismod eros sit amet malesuada. Etiam non purus | |
scelerisque, gravida lectus et, tristique lacus. Nulla quis tempor nunc. | |
Suspendisse quam turpis, sagittis a faucibus vel, ultrices sit amet ante. | |
Maecenas interdum a nisi eu maximus. Morbi non interdum augue, sit amet pretium | |
lectus. Etiam rhoncus a arcu non lobortis. Ut eget tincidunt tortor. Morbi | |
hendrerit dui accumsan ante vestibulum fermentum. Proin nisi urna, condimentum | |
interdum molestie vitae, placerat ut purus | |
</p> | |
</div> | |
</div> | |
<div data-collapsable="" data-collapsable-tags="training"> | |
<h2>Training div</h2> | |
<div class="collapsable-block"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum | |
porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare. | |
Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae | |
sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor | |
eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta | |
eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque | |
ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum | |
molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet | |
lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet. | |
Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius. | |
Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et | |
eleifend non, tincidunt id ipsum. | |
</p> | |
</div> | |
</div> | |
<!-- You may also add multiple tags separated by comma --> | |
<div data-collapsable="" data-collapsable-tags="training, manual"> | |
<h2>Training & Manual div</h2> | |
<div class="collapsable-block"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum | |
porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare. | |
Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae | |
sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor | |
eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta | |
eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque | |
ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum | |
molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet | |
lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet. | |
Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius. | |
Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et | |
eleifend non, tincidunt id ipsum. | |
</p> | |
</div> | |
</div> | |
<!-- data-collpasable attribute also accept option 'close' which will be initially | |
close when page loads --> | |
<div data-collapsable="close"> | |
<h2>div initially close</h2> | |
<div class="collapsable-block"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum | |
porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare. | |
Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae | |
sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate | |
dolor eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et | |
porta eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. | |
Pellentesque ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor | |
sed interdum molestie, magna ipsum placerat dui, sit amet varius diam | |
lectus sit amet lectus. Pellentesque auctor nibh nibh, a vestibulum lectus | |
egestas sit amet. Duis faucibus ut orci et congue. Aliquam porta ipsum non | |
risus iaculis varius. Etiam eget ex at lectus euismod sodales id a nibh. | |
Integer purus ante, porta et eleifend non, tincidunt id ipsum. | |
</p> | |
</div> | |
</div> | |
<div data-collapsable=""> | |
<h3>Heading 3</h3> | |
<div class="collapsable-block"> | |
<p>Morbi id ante risus. Nulla facilisi. Mauris mauris ligula, dapibus eget | |
est ac, lacinia tristique leo. Vivamus iaculis laoreet semper. Proin quis | |
eros nec ante malesuada commodo in sit amet tellus. Sed tempus, sapien sed | |
convallis sollicitudin, est sem laoreet ex, eget faucibus massa sapien eget | |
quam. Phasellus non libero erat. Sed molestie, lorem ac dignissim | |
tristique, velit leo rutrum dui, nec fermentum augue est vel mauris. Fusce | |
turpis lacus, elementum eu sollicitudin ac, rutrum at felis. Pellentesque | |
tincidunt justo ac odio malesuada placerat. Vestibulum rhoncus at magna at | |
fermentum. Phasellus rutrum, dui sed sollicitudin fringilla, magna metus | |
ultrices lectus, nec imperdiet elit lorem condimentum orci. Aliquam in | |
fermentum tellus. Suspendisse consequat imperdiet diam, eget pellentesque | |
diam pulvinar at</p> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment