The Main page heading or h1

Optional article lead. An overview of the document this could be the tutorial or guide objectives. It's probably not necessary for reference documents.

This is a normal paragraph style. It could contain some emphasized text or it can contain some strong text. Sometimes it may even contain some highlighted text.

This is a weighted paragraph style Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text can be highlighted as a block level notice. Notices can be used to draw attention to important blocks of text, be careful not to use this too often on a single page.

A Default Notice

Call-out some text on the page as important but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.

A Warning Notice

Callout some text on the page as warning but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.

A Danger Notice

Callout some text on the page as dangerous but use VERY sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, quasi, numquam, quidem reprehenderit cupiditate animi dolor ut exercitationem rerum molestias ad inventore accusantium voluptate ex recusandae aliquam sunt officiis iste.

A Second level heading or h2

This is a basic unordered list style. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

List items can contain nested paras:

Need to show keyboard input: ssh user@server_address -i /path/to/downloaded/ssh/key/key.pem. or instead show a terminal block:

This is a basic ordered list style:

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

ssh user@server_address -i /path/to/downloaded/ssh/key/key.pem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, omnis, necessitatibus.

Tabular Data

Attribute Default Value
user nginx
worker_processes Dynamicly set based on instance size

Tabs Basic Navigation

A basic example of tabs for navigation. The tab switching is configured by updating the href and id on the related Tabs-content element.

Alpha

This is some alpha content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tabs Enclosed Navigation

An example of Enclosed tabs navigation.

One

This is some One content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is some One content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Go to Dashboard

Accordion Navigation

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion 2

  • This is a list item accordion. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .

Accordion 3

  • This is a list item accordion. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Prism Syntax Highlighter

As of July 2020 we have removed the Jekyll syntax highlighter and the js based Google Code Prettify. These have been replaced with the Prism js code highlighter.

Basic Examples of use are documented below:

Prism will be automatically invoked on a page when you add a language to a class. For example <code class="language-javascript">var foo = "bar";</code>

var foo = "bar";
p { color: red }

Default code highlighter

def foo
  puts 'foo'
end
For `bash` highlighting, always use a `$` before the commands entered by the user:
$ pwd
$ echo

Adding line numbers with prism

Add the line-numbers class, for example: <pre class="language-javascript line-numbers"><code>var foo = "bar"; var hello = "world";</code></pre>

var foo = "bar";
var hello = "world";

Soft wrap support

Use the style="white-space:pre-wrap;" in the code below.

Add the line-numbers class to your desired <pre> or any of its ancestors, and the line-numbers plugin will take care of the rest. To give all code blocks line numbers, add the line-numbers class to the

Terminal class

For values returned by the system use the normal `terminal` class:
/Users/me/my_awesome_project