Home > Style guide builder

Style guide builder

<h1>H1 Helvetica Bold 30pt #00467f, line-height:34px</h1>
<h2>H2 Helvetica Bold 30pt #497a7c, line-height:34px</h2>
<h3>H3 Helvetica Bold 26 pt #00aaad, line-height:30px; padding-top:20px</h3>
<h4>H4 Helvetica Bold 22 pt #00467f, line-height:26px; padding-top:20px</h4>
<h5>H5 Helvetica Bold 20 pt #497a7c, line-height:26px; padding-top:20px</h5>
<h6>H6 Helvetica Bold 20 pt #00467f, line-height:26px; padding-top:20px</h6>

H1 Helvetica Bold 30pt #00467f, line-height:34px

H2 Helvetica Bold 30pt #497a7c, line-height:34px

H3 Helvetica Bold 26 pt #00aaad, line-height:30px; padding-top:20px

H4 Helvetica Bold 22 pt #00467f, line-height:26px; padding-top:20px

H5 Helvetica Bold 20 pt #497a7c, line-height:26px; padding-top:20px
H6 Helvetica Bold 20 pt #00467f, line-height:26px; padding-top:20px
Paragraph copy. Helvetica Regular 18pt #5f6062. <a href="#">This is a link</a>. Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. Nulla non nisl porta, commodo magna vel, euismod tellus. Integer ac quam dui. Proin eget ligula non orci pharetra accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula ut felis suscipit facilisis at ut dui. <a href="#">Read More&#8230;</a>

Paragraph copy. Helvetica Regular 18pt #5f6062. This is a link. Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. Nulla non nisl porta, commodo magna vel, euismod tellus. Integer ac quam dui. Proin eget ligula non orci pharetra accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Read More…

<ul>
<li>Consectetur adipiscing elit</li>
<li>Vestibulum nec ligula ut felis suscipit</li>
<li>Donec at nisl quis tortor tristique pretium</li>
<li>Nulla non nisl porta, commodo magna vel, euismod tellus</li>
</ul>

Unordered List

  • Consectetur adipiscing elit
  • Vestibulum nec ligula ut felis suscipit
  • Donec at nisl quis tortor tristique pretium
  • Nulla non nisl porta, commodo magna vel, euismod tellus
<ol>
<li>Consectetur adipiscing elit</li>
<li>Vestibulum nec ligula ut felis suscipit</li>
<li>Donec at nisl quis tortor tristique pretium</li>
<li>Nulla non nisl porta, commodo magna vel, euismod tellus</li>
</ol>

Ordered List

  1. Consectetur adipiscing elit
  2. Vestibulum nec ligula ut felis suscipit
  3. Donec at nisl quis tortor tristique pretium
  4. Nulla non nisl porta, commodo magna vel, euismod tellus
[custom_ol offset="5"]
<ol>
<li>Consectetur adipiscing elit</li>
<li>Vestibulum nec ligula ut felis suscipit</li>
<li>Donec at nisl quis tortor tristique pretium</li>
<li>Nulla non nisl porta, commodo magna vel, euismod tellus</li>
</ol>
[/custom_ol]

Custom Ordered List

  1. Consectetur adipiscing elit
  2. Vestibulum nec ligula ut felis suscipit
  3. Donec at nisl quis tortor tristique pretium
  4. Nulla non nisl porta, commodo magna vel, euismod tellus

<div class="row">
[one_half title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.[/one_half][one_half_last title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.[/one_half_last]
[one_third title="1/3 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.[/one_third][one_third title="1/3 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.[/one_third][one_third_last title="1/3 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.[/one_third_last]
[two_third title="2/3 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, a deleniti voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, a deleniti voluptates, perspiciatis sint fugit![/two_third][one_third_last title="1/3 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate alias hic cumque, dolores, libero sint, labore saepe suscipit maxime voluptates distinctio ipsa impedit fugit repellat deleniti officiis illo eos culpa?[/one_third_last]</div>

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.

1/3 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.

1/3 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.

1/3 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cupiditate rerum explicabo voluptas obcaecati, magnam.

2/3 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, a deleniti voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, a deleniti voluptates, perspiciatis sint fugit!

1/3 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate alias hic cumque, dolores, libero sint, labore saepe suscipit maxime voluptates distinctio ipsa impedit fugit repellat deleniti officiis illo eos culpa?

[button blank="true"]Button Small[/button]
[button size="medium"]Button Medium[/button]
[button size="large"]Button Large[/button]

Button Small
Button Medium
Button Large

[button type="warning"]Button Small[/button]
[button size="medium" type="warning"]Button Medium[/button]
[button size="large" type="warning"]Button Large[/button]

Button Small
Button Medium
Button Large

[button type="danger"]Button Small[/button]
[button size="medium" type="danger"]Button Medium[/button]
[button size="large" type="danger"]Button Large[/button]

Button Small
Button Medium
Button Large

[accordion open="1"]
[accordion-item title=&#8221;Accordion Item 1&#8243;]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.[/accordion-item]
[accordion-item title=&#8221;Accordion Item 2&#8243;]Consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.[/accordion-item]
[accordion-item title=&#8221;Accordion Item 3&#8243;]Repellat magni iste error obcaecati ipsum dolor sit amet, consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.[/accordion-item]
[/accordion]

Accordion Item 1

–+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.

Accordion Item 2

–+
Consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.

Accordion Item 3

–+
Repellat magni iste error obcaecati ipsum dolor sit amet, consectetur adipisicing elit. Atque, accusantium et esse excepturi, expedita quas maxime culpa molestiae est deleniti labore voluptatibus animi possimus, consectetur tenetur nihil, ipsa. Repellat magni iste error obcaecati, unde suscipit. Ullam necessitatibus natus quisquam repudiandae nam, tempora aspernatur magni eum veniam, laboriosam, deleniti rem! Quod.

[tabgroup]
[tab title="Tab 1"][one_half title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.[/one_half] [one_half_last title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.[/one_half_last][/tab]
[tab title="Tab 2" icon="file"]Tab 2 content goes here.[/tab]
[tab title="Tab 3"]Tab 3 content goes here.[/tab]
[/tabgroup]

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.

Tab 2 content goes here.

Tab 3 content goes here.

 

[tabgroup style="warning"]
[tab title="Tab 1"][one_half title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.[/one_half] [one_half_last title="1/2 columns"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.[/one_half_last][/tab]
[tab title="Tab 2" icon="file"]Tab 2 content goes here.[/tab]
[tab title="Tab 3"]Tab 3 content goes here.[/tab]
[/tabgroup]

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non rerum accusamus amet quas aut id, vel ducimus, odit excepturi quisquam deserunt sint nostrum asperiores ullam incidunt, deleniti quae magnam accusantium.

1/2 columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis autem veniam, quidem fugiat a. Vitae officiis autem veniam, quidem fugiat a.

Tab 2 content goes here.

Tab 3 content goes here.


 
[performance title="performance"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

performance

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 

[performance title="performance" border="off"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

performance

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 

[performance title="productivity" type="productivity"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

productivity

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 

[performance title="productivity" type="productivity" border="off"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

productivity

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 

[performance title="Value Versatility" type="versatility"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Value Versatility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="Value Versatility" type="versatility" border="off"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Value Versatility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="Responsibility" type="responsibility"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Responsibility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="Responsibility" type="responsibility" border="off"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Responsibility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="performance" type="performance-wide"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

performance

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="productivity" type="productivity-wide"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

productivity

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="Value Versatility" type="versatility-wide"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Value Versatility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.

 
[performance title="Responsibility" type="responsibility-wide"]Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium. [/performance]

Responsibility

Vestibulum nec ligula ut felis suscipit facilisis at ut dui. Donec at nisl quis tortor tristique pretium.