Style Guide

Heading 1 Used for Main Headings

Paragraph style used for standard page copy. New paragraphs can be added to a content editor simply by a hard return. Below are some additional paragraphs so you can see how they flow together.

Migas direct trade Schlitz plaid. Blog Portland cornhole squid, keffiyeh kitsch butcher flannel. Flexitarian Portland ethical, meggings salvia fanny pack leggings Odd Future pop-up Truffaut. Forage salvia selvage disrupt, Godard lomo Blue Bottle skateboard try-hard flexitarian direct trade. Disrupt kogi Truffaut Odd Future Williamsburg. Stumptown tofu Neutra distillery +1, Brooklyn craft beer ennui. Readymade shabby chic.

Heading 2 Used for Subheads

Next level distillery kale chips Kickstarter viral narwhal. Drinking vinegar biodiesel taxidermy Helvetica you probably haven’t heard of them, polaroid leggings migas wolf 3 wolf moon. Readymade skateboard street art retro. Odd Future retro four dollar toast, American Apparel umami flannel letterpress 90’s small batch.

Heading 3 Used for organizing content within a heading 2 section

Authentic chillwave put a bird on it post-ironic cronut listicle, messenger bag street art ennui iPhone. VHS bitters paleo tattooed, crucifix put a bird on it fanny pack Bushwick viral try-hard migas sriracha mlkshk.

Heading 4 and beyond used for very detailed content

Austin paleo ugh, forage keytar daf plaid squid irony Etsy. paf literally PBR&B art party. 3 wolf moon fashion axe sustainable, next level hoodie four loko fanny pack Brooklyn fingerstache roof party keytar photo booth post-ironic before they sold out.

Heading 5 is getting really detailed in content organization

Vice try-hard squid viral kitsch, cold-pressed church-key. Blue Bottle letterpress narwhal seitan lomo PBR, wolf Thundercats. Kitsch beard migas Blue Bottle cray. Banksy Blue Bottle Vice Odd Future street art banjo blog.

Heading 6, Really? Wow so detailed

Vegan letterpress cliche salvia. Single-origin coffee post-ironic Austin selvage wolf, mixtape migas stumptown. Shoreditch lumberman meggings 90’s.

List Styles

List styles consist of ordered and unordered lists. They can be nested in several layers, as seen below.

Ordered List

    1. Direct trade Schlitz
    2. Vice try-hard
    3. Stumptown tofu
    4. Authentic chillwave
      1. Hoodie four loko
        1. Vegan letterpress
        2. Single-origin coffee
        3. Selvage wolf
      2. Viral kitsch
        1. Authentic chillwave
        2. Distillery kale chips
        3. Fanny pack leggings
      3. Shoreditch lumberman
      4. Post-ironic cronut
      5. Polaroid leggings
      6. Drinking vinegar

Unordered List

      • Taxidermy Helvetica
      • Put a bird on it
      • Readymade skateboard
        • messenger bag street
          • Ennui iPhone
          • Forage Keytar
          • Brooklyn fingerstache
        • PBR&B art party
          • Post-ironic before they sold out
          • Level hoodie
          • Forage keytar
        • Bushwick viral
        • Roof party
        • Irony Etsy
        • Odd Future
        • Cold-pressed church-key

Inline Styles

Inline styles consist of styles which can be applied to a single or multiple words within a block element such as a paragraph. This includes, but is not limited to, links, bold, italic, strikethrough. All of these inline styles can have their complete unique style and are not limited to defaults. For instance, bold can mean red rather than a thicker font weight.

Links (href)

Links have 5 states including: link, hover, active (click), focus (tabbed to) and visited. If you wish to sample the visited link color, simply click this link. Unless deemed unnecessary via a UX decision, all states should be addressed.

Bold, Emphasis and Underline

Bold, emphasized and underlined text can be done in numerous ways which is not limted to font weight, oblique styles and underlines. Here are some examples:

The quick brown fox jumps over the lazy dog. (Bold)
The quick brown fox jumps over the lazy dog. (Emphasis)
The quick brown fox jumps over the lazy dog. (Underline)

Image Styles

Images can be treated in several ways on a page. In addition to sizing an element, the content creator can align the image to flow inline with the text or clear it. The content creator can also add a caption.

Image Aligned Left

Authentic chillwave put a bird on it post-ironic cronut listicle, messenger bag street art ennui iPhone. VHS bitters paleo tattooed, crucifix put a bird on it fanny pack Bushwick viral.

Grumpy-Cat

Migas direct trade Schlitz plaid. Blog Portland cornhole squid, keffiyeh kitsch butcher flannel. Flexitarian Portland ethical, meggings salvia fanny pack leggings Odd Future pop-up Truffaut. Forage salvia selvage disrupt, Godard lomo Blue Bottle skateboard try-hard flexitarian direct trade. Disrupt kogi Truffaut Odd Future Williamsburg. Stumptown tofu Neutra distillery +1, Brooklyn craft beer ennui. Readymade shabby chic.

Image Aligned Right

grumpy-cat-has-earned-her-owner-nearly-100-million-in-just-2-years

Next level distillery kale chips Kickstarter viral narwhal. Drinking vinegar biodiesel taxidermy Helvetica you probably haven’t heard of them, polaroid leggings migas wolf 3 wolf moon. Readymade skateboard street art retro. Odd Future retro four dollar toast, American Apparel umami flannel letterpress 90’s small batch.

Authentic chillwave put a bird on it post-ironic cronut listicle, messenger bag street art ennui iPhone. VHS bitters paleo tattooed, crucifix put a bird on it fanny pack Bushwick viral try-hard migas sriracha mlkshk.

Image (No Alignment)

Austin paleo ugh, forage keytar paf plaid squid irony Etsy. paf literally PBR&B art party. 3 wolf moon fashion axe sustainable, next level hoodie four loko fanny pack Brooklyn fingerstache roof party keytar photo booth post-ironic before they sold out.

grumpy-cat-has-earned-her-owner-nearly-100-million-in-just-2-years

Vice try-hard squid viral kitsch, cold-pressed church-key. Blue Bottle letterpress narwhal seitan lomo PBR, wolf Thundercats. Kitsch beard migas Blue Bottle cray. Banksy Blue Bottle Vice Odd Future street art banjo blog.

Image Aligned Left w/ Caption

This is a caption

This is a caption

Authentic chillwave put a bird on it post-ironic cronut listicle, messenger bag street art ennui iPhone. VHS bitters paleo tattooed, crucifix put a bird on it fanny pack Bushwick viral.

Migas direct trade Schlitz plaid. Blog Portland cornhole squid, keffiyeh kitsch butcher flannel. Flexitarian Portland ethical, meggings salvia fanny pack leggings Odd Future pop-up Truffaut. Forage salvia selvage disrupt, Godard lomo Blue Bottle skateboard try-hard flexitarian direct trade. Disrupt kogi Truffaut Odd Future Williamsburg. Stumptown tofu Neutra distillery +1, Brooklyn craft beer ennui. Readymade shabby chic.

Image Aligned Right w/ Caption

This is also a caption

This is also a caption

p>Next level distillery kale chips Kickstarter viral narwhal. Drinking vinegar biodiesel taxidermy Helvetica you probably haven’t heard of them, polaroid leggings migas wolf 3 wolf moon. Readymade skateboard street art retro. Odd Future retro four dollar toast, American Apparel umami flannel letterpress 90’s small batch.

Authentic chillwave put a bird on it post-ironic cronut listicle, messenger bag street art ennui iPhone. VHS bitters paleo tattooed, crucifix put a bird on it fanny pack Bushwick viral try-hard migas sriracha mlkshk.

Image (No Alignment) w/ Caption

Vice try-hard squid viral kitsch, cold-pressed church-key. Blue Bottle letterpress narwhal seitan lomo PBR, wolf Thundercats. Kitsch beard migas Blue Bottle cray. Banksy Blue Bottle Vice Odd Future street art banjo blog.

This is also a caption

This is also a caption

Vegan letterpress cliche salvia. Single-origin coffee post-ironic Austin selvage wolf, mixtape migas stumptown. Shoreditch lumberman meggings 90’s.

Form Styles

Forms contain a multitude of elements including labels, fields, inputs and buttons. Organizing the form will be the responsibility of the developer. However we can atleast provide the proper css styles for all of these elements. Note that custom select boxes, check boxes and radio buttons can prove to be impossible without direct cooperation with the developer. Note that buttons can also be used outside forms for call-to-actions and other goodies. Form design can be really fun! Don’t forget to style your focus and hover states.

Form Layout
  • Questions? Submit yours here.

    A Right/Manpower representative will respond within two business days.

Table & Other Styles

In this section we’ll cover table elements and any other seldom used elements the author may be using.

Tables

The tables are made up of a potential heading, rows and columns. Hover effects are allowed.

Firstname Lastname Rank
Benny Neilson 1
Jordane Antwoin 2
Ben Long 3

Horizontal Rule

Horizontal Rules can be used to serpate large portions of content. This can be styled as desired.


Block Quotes

Block quotes are used for referencing quotes. This is used to highlight the element.

“Have you ever had deep fried cheesecake?”

Button Styles

Primary Button

Standard Button

Full-width Primary Button

Full-width Standard Button

Iframes & Objects

These include SVGs, Flash, Videos etc.

YouTube Embed

Vimeo Embed

There are no comments yet, add one below.

Leave a Comment