Style Guide

Gradients

  • orange-to-red
  • red-to-orange
  • yellow-to-orange
  • orange-to-yellow
  • cyan-to-green
  • green-to-cyan
  • blue-to-cyan
  • cyan-to-blue
  • blue-to-purple
  • purple-to-blue
  • pink-to-purple
  • purple-to-pink
  • pink-to-orange
  • orange-to-pink



Bracket Callouts

Default Bracket Callout
Uses the standard markdown for block quotes:

> Content goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum molestie turpis at cursus. Donec nec orci id nisi dignissim congue varius et diam. Aenean dignissim, mi vitae ultrices volutpat, mauris augue vulputate massa, nec tincidunt elit nulla varius augue. Vestibulum non ex augue.


Advanced Bracket Callout
Uses standard html to define specific colors. Replace the class with any of the gradients specified above.

<blockquote class="green-to-cyan"><p>  
  Content goes here
</p></blockquote>  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum molestie turpis at cursus. Donec nec orci id nisi dignissim congue varius et diam.



Box Callouts

Default Highlight Box

<div class="panel">  
  Content goes here
</div>
Donec pulvinar nisl vel urna dapibus, eu elementum lectus accumsan. Etiam in tincidunt nisi. Phasellus id ante lacus. Mauris commodo ac nulla consectetur vulputate. Sed imperdiet eleifend turpis, eu accumsan purus imperdiet feugiat. Mauris condimentum felis massa, vestibulum hendrerit mi tristique a. Sed egestas felis ligula, at porta dui dapibus sed.


Gradient Highlight Box
Replace the class with any of the gradients specified above.

<div class="panel pink-to-orange">  
  Content goes here
</div>
Donec pulvinar nisl vel urna dapibus, eu elementum lectus accumsan. Etiam in tincidunt nisi. Phasellus id ante lacus. Mauris commodo ac nulla consectetur vulputate. Sed imperdiet eleifend turpis, eu accumsan purus imperdiet feugiat. Mauris condimentum felis massa, vestibulum hendrerit mi tristique a. Sed egestas felis ligula, at porta dui dapibus sed.



Text Highlights

Default Highlight
Uses the standard markdown for block quotes:

== Content goes here ==

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum molestie turpis at cursus. Donec nec orci id nisi dignissim congue varius et diam.