Style Guide

Text Alignment

Align text blocks with the following classes.

Left aligned text .text-left

Left aligned text
{: .text-left}

Center aligned text. .text-center

Center aligned text.
{: .text-center}

Right aligned text. .text-right

Right aligned text.
{: .text-right}

Justified text. .text-justify Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel eleifend odio, eu elementum purus. In hac habitasse platea dictumst. Fusce sed sapien eleifend, sollicitudin neque non, faucibus est. Proin tempus nisi eu arcu facilisis, eget venenatis eros consequat.

Justified text.
{: .text-justify}

No wrap text. .text-nowrap

No wrap text.
{: .text-nowrap}

Image Alignment

Position images with the following classes.

image-center

The image above happens to be centered.

![image-center](/assets/images/filename.jpg){: .align-center}

image-left The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned. There should be plenty of room above, below, and to the right of the image. Just look at him there — Hey guy! Way to rock that left side. I don’t care what the right aligned image says, you look great. Don’t let anyone else tell you differently.

![image-left](/assets/images/filename.jpg){: .align-left}

image-right

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there — Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

![image-right](/assets/images/filename.jpg){: .align-right}

full

The image above should extend outside of the parent container on right.

![full](/assets/images/filename.jpg)
{: .full}

Buttons

Make any link standout more when applying the .btn class.

<a href="#" class="btn">Link Text</a>
Button Type Example Class Kramdown
Default Text .btn [Text](#link){: .btn}
Success Text .btn .btn--success [Text](#link){: .btn .btn--success}
Warning Text .btn .btn--warning [Text](#link){: .btn .btn--warning}
Danger Text .btn .btn--danger [Text](#link){: .btn .btn--danger}
Info Text .btn .btn--info [Text](#link){: .btn .btn--info}
Inverse Text .btn .btn--inverse [Text](#link){: .btn .btn--inverse}
Light Outline Text .btn .btn--light-outline [Text](#link){: .btn .btn--light-outline}
Button Size Example Class Kramdown
X-Large X-Large Button .btn .btn--x-large [Text](#link){: .btn .btn--x-large}
Large Large Button .btn .btn--large [Text](#link){: .btn .btn--large}
Default Default Button .btn [Text](#link){: .btn}
Small Small Button .btn .btn--small [Text](#link){: .btn .btn--small}

Notices

Call attention to a block of text.

Notice Type Class
Default .notice
Primary .notice--primary
Info .notice--info
Warning .notice--warning
Success .notice--success
Danger .notice--danger

Watch out! This paragraph of text has been emphasized with the {: .notice} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--primary} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--info} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--warning} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--success} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--danger} class.

Notice Headline:

You can also add the .notice class to a <div> element.

  • Bullet point 1
  • Bullet point 2

Code blocks

1
2
3
4

<#  highlitable code with line numbers useing liquid (not ability to wrap) #>
get-help
get-command
this is the line that never ends. it goes on on on my freind, you would not belive it but it started verry small,b ut soon is was not so small at all. thisis the line that never ends...
{% highlight powershell linenos=table %}
get-help
get-command
{% endhighlight %}

# Basic code block (vs Code and comment friendly)
get-help
get-command

~~~ powershell
get-help
get-command
~~~

test 3