Header Font Styles

h1 Heading1

h2 Heading2

h3 Heading3

h4 Heading4

h5 Heading5

h6 Heading6


<h1>h1 Heading1</h1>
<h2>h2 Heading2</h2>
<h3>h3 Heading3</h3>
<h4>h4 Heading4</h4>
<h5>h5 Heading5</h5>
<h6>h6 Heading6</h6>

Promo Font Styles

Promo1 Text

Promo2 Text

Promo3 Text


<p class="promo1">Promo1 Text</p>
<p class="promo2">Promo2 Text</p>
<p class="promo3">Promo3 Text</p>

Button and Link Styles

Button Style 1

Button Style 2

Button Style 3

<a href="#" class="sg-button1">Button Style 1</a>
<a href="#" class="sg-button2">Button Style 2</a>
<a href="#" class="sg-button3">Button Style 3</a>

<a href="#" class="sg-link1">Link Style 1</a>
<a href="#" class="sg-link2">Link Style 2</a>
<a href="#" class="sg-link3">Link Style 3</a>
<a href="#" class="sg-link4">Link Style 4</a>

Icons - Font Awesome (v.4+)

Add fa fa-ICON_NAME to any element.

Check out all the icons here: Font Awesome - Icons

You can find more examples of usage here: Font Awesome - Examples

Coffee
Comments Open
Thumbs Up

<i class="fa fa-coffee"></i> Coffee
<i class="fa fa-comments-o"></i> Comments Open
<i class="fa fa-thumbs-up"></i> Thumbs Up

Hide or Show Elements Based Viewport

Responsive Grid

These style classes can be used to either show or hide any HTML element based on viewport (screensize). This is very useful when creating content for both large desktop screens and small mobile devices.

These work with every HTML element including
<p class="">, <span class="">, <br class="">, <div class="">
and title tags too!

Set Responsive Column Widths

sg-width-20
sg-width-30
sg-width-33
sg-width-40
sg-width-50
sg-width-60
sg-width-66
sg-width-70
sg-width-80

You can set columns up using div containers and also set different style classes for each if you want. Check them out when changing browser window sizes and see what happens when the viewing screen is really narrow.

The number in the style class correlates to the percentage of the columns, so mix and match, but make sure they add up to 100 per row. Then be sure to clear each row of 100%.
<div class="clear"></div>

Column One

Column Two

Column Three

Column Four

<div class="sg-width-block sg-width-25">
  <div class="sg-width-spacer">
    <div class="sg-image sg-center">
      <p>Column One</p>
    </div>
  </div>
</div>
<div class="sg-width-block sg-width-25">
  <div class="sg-width-spacer">
    <div class="sg-image sg-center">
      <p>Column Two</p>
    </div>
  </div>
</div>
<div class="sg-width-block sg-width-25">
  <div class="sg-width-spacer">
    <div class="sg-image sg-center">
      <p>Column Three</p>
    </div>
  </div>
</div>
<div class="sg-width-block sg-width-25">
  <div class="sg-width-spacer">
    <div class="sg-image sg-center">
      <p>Column Four</p>
    </div>
  </div>
</div>
<div class="clear"></div>

Image Row

Item Title

Item Description

Item Title

Item Description

Item Title

Item Description

Item Title

Item Description


<div class="largemargintop largemarginbottom">
  <div class="sg-width-block sg-width-25">
    <div class="sg-width-spacer sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/430x280.jpg" alt="image" class="sg-noborder" />
      <br>
      <h2>Item Title</h2>
      <p>Item Description</p>
    </div>
  </div>
  <div class="sg-width-block sg-width-25">
    <div class="sg-width-spacer sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/430x280.jpg" alt="image" class="sg-noborder" />
      <br>
      <h2>Item Title</h2>
      <p>Item Description</p>
    </div>
  </div>
  <div class="sg-width-block sg-width-25">
    <div class="sg-width-spacer sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/430x280.jpg" alt="image" class="sg-noborder" />
      <br>
      <h2>Item Title</h2>
      <p>Item Description</p>
    </div>
  </div>
  <div class="sg-width-block sg-width-25">
    <div class="sg-width-spacer sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/430x280.jpg" alt="image" class="sg-noborder" />
      <br>
      <h2>Item Title</h2>
      <p>Item Description</p>
      </div>
  </div>
  <div class="clear"></div>
</div>
<div class="clear"></div>

Full Width Showcase Style with Background Image

Promo3 Header

Big text here like a company tag line or other important info like ads!

Button Style

Watch the image on the right disappear when the screensize gets too small!


<div class="sg-full-width sg-showcase sg-bg-1 sg-text-light">
  <div class="sg-width-block sg-width-40">
    <div class="sg-width-spacer largepaddingtop">
      <p class="promo3">Promo3 Header</p>
      <p class="promo2"><strong>Big text here like a company tag line or other important info like ads!</strong></p>
      <p><a href="#" class="sg-button1">Button Style <i class="fa fa-cogs"></i></a></p>
    </div>
  </div>
  <div class="sg-width-block sg-width-60 hidden-phone">
    <div class="sg-width-spacer sg-image sg-center largepaddingtop">
      <img src="https://cdn.compucram.com/media/content/placeholders/960x380.jpg" alt="image" class="sg-noborder" />
    </div>
  </div>
  <div class="clear"></div>
  <br>
  <p class="sg-center sg-text-light"><i class="fa fa-info-circle fa-lg"></i> <em>Watch the image on the right disappear when the screensize gets too small!</em></p>
</div>
<div class="clear"></div>

Full Width Row with Dark Blue Background


<div class="sg-full-width sg-dark-blue largemargintop largemarginbottom">
  <div class="sg-width-block sg-width-50">
    <div class="sg-width-spacer largepaddingtop largepaddingbottom sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/580x300.jpg" alt="image" class="sg-noborder" />
    </div>
  </div>
  <div class="sg-width-block sg-width-50">
    <div class="sg-width-spacer largepaddingtop largepaddingbottom sg-image sg-center">
      <img src="https://cdn.compucram.com/media/content/placeholders/580x300.jpg" alt="image" class="sg-noborder" />
    </div>
  </div>
  <div class="clear"></div>
</div>
<div class="clear"></div>