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.

Jekyll Pygments Syntax highlighter

Jekyll also offers powerful support for code snippets:

Highlight with numbers

1
2
3
def foo
  puts 'foo'
end

Default code highlighter

def foo
  puts 'foo'
end
For `bash` highlighting, always use a `$` before the commands entered by the user:
1
2
$ pwd
$ echo
For values returned by the system use the normal `terminal` class:
/Users/me/my_awesome_project

Google Code Prettify Syntax Highlighter

This is a JavaScript alternative to the Jekyll Pygments tool. It may be a better option.

var hello = function() {
    for (var i = 42; --i >= 0;) {
        console.log('hello');
    }
  // This is a comment with a link tags.
}