styleguide.html

---
layout: default
title: Styleguide | Cloud 66
noindex: true
sitemap: false
---

    <h1 class="article-title">
        The Main page heading or h1
    </h1>

    <p class="lead">
       Optional article lead. An overview of the document this could be the tutorial or guide objectives. It's probably not necessary for reference documents.
    </p>

    <p>This is a normal paragraph style. It could contain some <em>emphasized text</em> or it can contain some <strong>strong</strong> text. Sometimes it may even contain some <span class="highlighted">highlighted</span> text.</p>

    <p class="weighted">
        This is a weighted paragraph style Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>

    <p>Text can be highlighted</span> 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.</p>

    <div class="notice">
        <h3>A Default Notice</h3>
        <p>Call-out some text on the page as important but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <div class="notice notice-warning">
        <h3>A Warning Notice</h3>
        <p>Callout some text on the page as warning but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <div class="notice notice-danger">
        <h3>A Danger Notice</h3>
        <p>Callout some text on the page as dangerous but use VERY sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <p>
        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.
    </p>

    <h2>A Second level heading or h2</h2>

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

    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>

    <p>List items can contain nested paras:</p>

    <ul>
        <li>
            <p>
            <strong>Lorem ipsum</strong> &mdash; dolor sit amet, consectetur adipisicing elit. Soluta, eum, dicta reiciendis est aut modi quam provident doloribus magnam molestiae non numquam iure facilis odio harum vero tempore voluptatum accusantium.
            </p>
        </li>
        <li>
            <p>
            <strong>Soluta eum</strong> &mdash; dicta reiciendis est aut modi quam provident doloribus magnam molestiae non numquam iure facilis odio harum
            </p>
        </li>
    </ul>

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

    <p>This is a basic ordered list style:</p>

    <ol>
        <li>This is the first item.</li>
        <li>This is the second item.</li>
        <li>This is the third item.</li>
    </ol>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<pre class="terminal"><kbd>ssh user@server_address -i /path/to/downloaded/ssh/key/key.pem</kbd></pre>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, omnis, necessitatibus.</p>

<h2>Tabular Data</h2>

<table class='table table-bordered table-striped'>
    <thead>
        <tr>
            <th>Attribute</th>
            <th>Default Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>user</td>
            <td>nginx</td>
        </tr>
        <tr>
            <td>worker_processes</td>
            <td>Dynamicly set <a href="/">based on instance size</a></td>
        </tr>
    </tbody>
</table>

<!-- TABS EXAMPLE -->
<h2>Tabs Basic Navigation</h2>
<p>A basic example of tabs for navigation. The tab switching is configured by updating the <code>href</code> and <code>id</code> on the related <code>Tabs-content</code> element.</p>

<div class="Tabs">
    <nav>
      <ul class="TabMini js_tabs">
        <li class="TabMini-item active">
          <a href="#alpha_content" class="TabMini-link">
            Alpha
          </a>
        </li>
        <li class="TabMini-item">
          <a href="#beta_content" class="TabMini-link">
            Beta
          </a>
        </li>
        <li class="TabMini-item">
          <a href="#gamma_content" class="TabMini-link">
            Gamma
          </a>
        </li>
      </ul>
    </nav>

    <section id="alpha_content" class="Tabs-content js_tab_content">
        <h4>Alpha</h4>
        <p>This is some alpha content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section id="beta_content" class="Tabs-content js_tab_content is-hidden">
        <h4>Beta</h4>
        <p>This is some beta content. Consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et doloreatat non proident, sunt in culpa qui.</p>
    </section>

    <section id="gamma_content" class="Tabs-content js_tab_content is-hidden">
        <h4>Gamma</h4>
        <p>This is some gamma content. 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.</p>
    </section>
</div><!--/.Tabs -->
<!-- /TABS EXAMPLE -->

<h2>Tabs Enclosed Navigation</h2>
<p>An example of Enclosed tabs navigation.</p>

<div class="Tabs Tabs--enclosed">
    <nav>
      <ul class="TabMini js_tabs">
        <li class="TabMini-item active">
          <a href="#one_content" class="TabMini-link">
            One
          </a>
        </li>
        <li class="TabMini-item">
          <a href="#two_content" class="TabMini-link">
            Two
          </a>
        </li>
        <li class="TabMini-item">
          <a href="#three_content" class="TabMini-link">
            Three
          </a>
        </li>
      </ul>
    </nav>

    <section id="one_content" class="Tabs-content js_tab_content">
        <h4>One</h4>
        <p>This is some One content.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>This is some One content.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>

        <p>
            <a class="Button Button--small Button--app" href="#" target="_blank">Go to Dashboard</a>
        </p>
    </section>

    <section id="two_content" class="Tabs-content js_tab_content is-hidden">
        <h4>Two</h4>
        <p>This is some Two content. sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore.</p>
    </section>

    <section id="three_content" class="Tabs-content js_tab_content is-hidden">
        <h4>Three</h4>
        <p>This is some Three content. sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore.</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </section>
</div><!--/.Tabs -->

<h2>Accordion Navigation</h2>

<div class="accordion">
    <h4 class="accordion-toggle active">Accordion 1</h4>
    <div class="accordion-content open">
        <p>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.</p>
        <p>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.</p>
    </div>
    <h4 class="accordion-toggle">Accordion 2</h4>
    <div class="accordion-content">
        <ul>
            <li><p>This is a list item accordion. consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p></li>
            <li><p>Labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco .</p></li>
        </ul>
    </div>
    <h4 class="accordion-toggle">Accordion 3</h4>
    <div class="accordion-content">
        <ul>
            <li><p>This is a list item accordion. consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p></li>
            <li><p>Labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco .</p></li>
        </ul>
        <p>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.</p>
    </div>
</div>

<h2>Prism Syntax Highlighter</h2>

<p>As of July 2020 we have removed the Jekyll syntax highlighter and the js based Google Code Prettify. These have been replaced with the <a href="https://prismjs.com">Prism</a> js code highlighter.</p>

<p>Basic Examples of use are documented below:</p>

<p>Prism will be automatically invoked on a page when you add a <em>language-xxx</em> class to either the <code>code</code> or <code>pre</code> elements in a code block. For example <code>&lt;code class=&quot;language-javascript&quot;&gt;var foo = &quot;bar&quot;;&lt;/code&gt;</code></p>

<pre><code class="language-javascript">var foo = "bar";</code></pre>

<pre><code class="language-css">p { color: red }</code></pre>


<p>Default code highlighter</p>

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

For `bash` highlighting, always use a `$` before the commands entered by the user:

{% highlight bash linenos %}
$ pwd
$ echo
{% endhighlight %}

<h3>Adding line numbers with prism</h3>
<p>Add the line-numbers class, for example: <code>&lt;pre class=&quot;language-javascript line-numbers&quot;&gt;&lt;code&gt;var foo = &quot;bar&quot;;
var hello = &quot;world&quot;;&lt;/code&gt;&lt;/pre&gt;</code></p>

<pre class="language-javascript line-numbers"><code>var foo = "bar";
var hello = "world";</code></pre>

<h3>Soft line wrap</h3>
<p>Use the <code>&lt;pre class=&quot;line-numbers u-whiteSpaceNoWrap&quot;&gt;</code> in the code below.</p>

<pre class="line-numbers language-none line-numbers u-whiteSpaceNoWrap"><code>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.</code></pre>

<h3>Default wrap</h3>
<pre class="line-numbers language-none line-numbers"><code>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.</code></pre>

<h3>Copy code examples to Clipboard</h3>

<div class="CodeBlock">
    <button class="js-copy-btn" data-clipboard-target="#copy-1">Copy</button>
    <pre><code id="copy-1" class="line-numbers language-yml">production:
      docker:
        configuration:
          iam_instance_profile_name: docker-perms
          version: 1.7.0
          weave_version: 1.0.3
          vpc_id: vpc-64872001
          root_disk_size: 100
          root_disk_type: ssd
          image_keep_count: 5
          nameservers: ['8.8.8.8', '8.8.4.4']
    </code></pre>
</div>

<p>The above example is marked up with the following html:</p>
<pre><code class="line-numbers language-markup">&lt;div class=&quot;CodeBlock&quot;&gt;
    &lt;button class=&quot;js-copy-btn&quot; data-clipboard-target=&quot;#copy-1&quot;&gt;Copy&lt;/button&gt;
    &lt;pre&gt;&lt;code id=&quot;copy-1&quot; class=&quot;line-numbers language-yml&quot;&gt;production:
      ...
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
</code></pre>

<h2>Terminal class</h2>

For values returned by the system use the normal `terminal` class:

<pre class="terminal">
/Users/me/my_awesome_project
</pre>