Base

Code Snippets

For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

We use hljs for highlighting, so code blocks rendered with hljs will inherit the code theme. For excellent contrast against a white background, use Visual Studio 2015 dark style.

  
    <!-- code snippets -->
  <button class="btn">
    Submit
  </button>

<pre class="code" data-lang="HTML">
  <code>
    <span class="com">&lt;!-- code snippets --&gt;</span>
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
    Submit
  &lt;<span class="tag">/button</span>&gt;
  </code>
</pre>

Colors

Our main colors, supporting players, and their variants.

Brand Colors

Main colors for backgrounds, logos, and buttons.

$green

#59B27D; green
$green-bright

#31BC69; bright green
$blue

#259AC4; blue
$indigo

#244260; indigo

Palette Colors

App color palette.

$white

#f5f8fa; white
$grey

#939DA8; grey
$black

#2B3745; black
$blue

#259AC4; blue
$teal

#51a9ad; teal
$indigo

#244260; indigo
$purple

#8058a5; purple
$green

#59B27D; green
$red

#ec2c4c; red
$orange

#eb6a39; orange
$yellow

#ebcd39; yellow

Color Variants

Examples of color variants for backgrounds and handy illutration colors. Each palette color has all 8 variants available.

$green-bright

#31bc69; green-bright
$green-white

#e4f3ea; green-white
$green-lightest

#9fd2b4; green-lightest
$green-light

#7cc298; green-light
$green

#59b27d; green
$green-dark

#449464; green-dark
$green-darkest

#34714d; green-darkest
$green-black

#244e35; green-black
$teal-bright

#38c0c6; teal-bright
$teal-white

#dceeee; teal-white
$teal-lightest

#a7d4d6; teal-lightest
$teal-light

#73babe; teal-light
$teal

#51a9ad; teal
$teal-dark

#41878a; teal-dark
$teal-darkest

#306568; teal-darkest
$teal-black

#204345; teal-black
$blue-bright

#02aae7; blue-bright
$blue-white

#ecf8fc; blue-white
$blue-lightest

#c2e6f3; blue-lightest
$blue-light

#6cc4e3; blue-light
$blue

#259ac4; blue
$blue-dark

#1d7899; blue-dark
$blue-darkest

#15576e; blue-darkest
$blue-black

#0d3543; blue-black
$indigo-bright

#004f9e; indigo-bright
$indigo-white

#f0f5f9; indigo-white
$indigo-lightest

#4982bb; indigo-lightest
$indigo-light

#325c85; indigo-light
$indigo

#244260; indigo
$indigo-dark

#1d354d; indigo-dark
$indigo-darkest

#16293b; indigo-darkest
$indigo-black

#0f1c28; indigo-black
$purple-bright

#9018ff; purple-bright
$purple-white

#f0f5f9; purple-white
$purple-lightest

#bfabd2; purple-lightest
$purple-light

#9979b7; purple-light
$purple

#8058a5; purple
$purple-dark

#734f94; purple-dark
$purple-darkest

#664684; purple-darkest
$purple-black

#593d73; purple-black
$red-bright

#ff193f; red-bright
$red-white

#fde7eb; red-white
$red-lightest

#f48a9b; red-lightest
$red-light

#f05b74; red-light
$red

#ec2c4c; red
$red-dark

#d21333; red-dark
$red-darkest

#a30f27; red-darkest
$red-black

#750a1c; red-black
$orange-bright

#ff6125; orange-bright
$orange-white

#fef5f2; orange-white
$orange-lightest

#f4b096; orange-lightest
$orange-light

#f08d67; orange-light
$orange

#eb6a39; orange
$orange-dark

#db4c16; orange-dark
$orange-darkest

#ad3c11; orange-darkest
$orange-black

#7e2c0d; orange-black
$yellow-bright

#ffda25; yellow-bright
$yellow-white

#fefcf2; yellow-white
$yellow-lightest

#f4e496; yellow-lightest
$yellow-light

#f0d967; yellow-light
$yellow

#ebcd39; yellow
$yellow-dark

#dbba16; yellow-dark
$yellow-darkest

#ad9211; yellow-darkest
$yellow-black

#7e6b0d; yellow-black
$white

#f5f8fa; white
$grey-lightest

#cbd0d6; grey-lightest
$grey-light

#afb7bf; grey-light
$grey

#939DA8; grey
$grey-dark

#778391; grey-dark
$grey-darkest

#5f6a76; grey-darkest
$grey-black

#48515a; grey-black
$black

#2B3745; black

We use Font Awesone Pro - light for iconography. Add the class fal to an icon tag and add the fa-ICON_NAME class to pair with it. Need to find a specific icon? Head to the Font Awesome searchable index.

<i class="fal {{modifier_class}}"></i>

h1. Heading 1.

h2. Heading 2.

h3. Heading 3.

h4. Heading 4.

h5. Heading 5.

h6. Heading 6.

paragraph

Type Colors

Text color utilities for legibility and alerting.

.text-dark

.text-light

.text-muted

.text-success

.text-warning

.text-error

<span class="{{modifier_class}}">.{{modifier_class}}</span>

Semantic text elements

I18Nabbr

Boldstrongb

Citationcite

Hello World!code

~~Deleted~~del

Emphasisem

Italici

Insertedins

Ctrl + Skbd

Highlightedmark

漢 kan字 ji ruby

~~Strikethrough~~s

Samplesamp

Text _Subscriptedsub

Text ^{Superscripted}sup

20:00time

Underlineu

x = y + 2var

<div class="columns">
  <div class="column col-6 col-xs-12">
    <abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code>
  </div>
  <div class="column col-6 col-xs-12">
    <strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code>
  </div>
  <div class="column col-6 col-xs-12">
    <cite>Citation</cite><code class="ml-2">cite</code>
  </div>
  <div class="column col-6 col-xs-12">
    <code>Hello World!</code><code class="ml-2">code</code>
  </div>
  <div class="column col-6 col-xs-12">
    <del>Deleted</del><code class="ml-2">del</code>
  </div>
  <div class="column col-6 col-xs-12">
    <em>Emphasis</em><code class="ml-2">em</code>
  </div>
  <div class="column col-6 col-xs-12">
    <i>Italic</i><code class="ml-2">i</code>
  </div>
  <div class="column col-6 col-xs-12">
    <ins>Inserted</ins><code class="ml-2">ins</code>
  </div>
  <div class="column col-6 col-xs-12">
    <kbd>Ctrl + S</kbd><code class="ml-2">kbd</code>
  </div>
  <div class="column col-6 col-xs-12">
    <mark>Highlighted</mark><code class="ml-2">mark</code>
  </div>
  <div class="column col-6 col-xs-12">
    <ruby>漢
      <rt>kan</rt>字
      <rt>ji</rt>
    </ruby>
    <code class="ml-2">ruby</code>
  </div>
  <div class="column col-6 col-xs-12">
    <s>Strikethrough</s><code class="ml-2">s</code>
  </div>
  <div class="column col-6 col-xs-12">
    <samp>Sample</samp><code class="ml-2">samp</code>
  </div>
  <div class="column col-6 col-xs-12">
    Text <sub>Subscripted</sub><code class="ml-2">sub</code>
  </div>
  <div class="column col-6 col-xs-12">
    Text <sup>Superscripted</sup><code class="ml-2">sup</code>
  </div>
  <div class="column col-6 col-xs-12">
    <time>20:00</time><code class="ml-2">time</code>
  </div>
  <div class="column col-6 col-xs-12">
    <u>Underline</u><code class="ml-2">u</code>
  </div>
  <div class="column col-6 col-xs-12">
    <var>x</var> =
    <var>y</var> + 2<code class="ml-2">var</code>
  </div>
</div>

Blockquote

It may be that when we no longer know what to do,
we have come to our real work
and when we no longer know which way to go,
we have begun our real journey.

The mind that is not baffled is not employed.
The impeded stream is the one that sings.
- Wendell Berry

<blockquote>
  <p>
    It may be that when we no longer know what to do,<br>
    we have come to our real work<br>
    and when we no longer know which way to go,<br>
    we have begun our real journey.
  </p>

  <p>
    The mind that is not baffled is not employed.<br>
    The impeded stream is the one that sings.
  </p>
  <cite>- Wendell Berry</cite>
</blockquote>

Lists

Unordered List
list item 1
list item 2
- list item 2.1
- list item 2.2
- list item 2.3
list item 3

Ordered List
list item 1
list item 2
1. list item 2.1
2. list item 2.2
3. list item 2.3
list item 3

Unstyled List
list item 1
list item 2
- list item 2.1
- list item 2.2
- list item 2.3
list item 3

description list term: description list description

<ul>
  <li><b>Unordered List</b></li>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>

<ol>
  <li><b>Ordered List</b></li>
  <li>list item 1</li>
  <li>list item 2
    <ol>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ol>
  </li>
  <li>list item 3</li>
</ol>

<ul class="list-unstyled">
  <li><b>Unstyled List</b></li>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>

<dl>
  <dt>description list term</dt>
  <dd>description list description</dd>
</dl>

kengai