Ascension 1.0 - Template Documentation

Separators

Separators are elements used to separate or divide content. Ascension offers the normal hr separators as well as custom made spacers.

Separators

You can add a separator by using the hr tag. This will create the default horizontal rule HTML element.

Code Preview 
						                            
						                                <p>Piece of content.</p>
						                                <hr>
						                                <p>Another piece of content.</p>

Piece of content.

Another piece of content.

As you can see from the example above, this separator doesn't show up by default -- it just has a margin top and bottom, allowing for content separation. To display it visually, use one of the helper classes below.

Helper classes

Class Description Code & preview
thin Sets 1px height to the separator, allowing its color to be visible. 
						                            
						                                <p>Piece of content.</p>
						                                <hr class="thin">
						                                <p>Another piece of content.</p>

Piece of content.

Another piece of content.
thick Sets 6px height to the separator, allowing its color to be visible and also sets a bigger top and bottom margin. 
						                            
						                                <p>Piece of content.</p>
						                                <hr class="thick">
						                                <p>Another piece of content.</p>

Piece of content.

Another piece of content.
short Sets a fixed width and aligns the separators in the center. 
						                            
						                                <div class="card with-border text-center compact">
						                                    <h5 class="mono">Agency</h5>
						
						                                    <hr class="thick short">
						
						                                    <h2 class="accent">$9.99</h2>
						                                    <p><small><em>billed monthly</em></small></p>
						                                    
						                                    <div class="spacer x2"></div>
						
						                                    <p>Most suitable for agencies with 5-10 people.</p>
						                                </div> <!-- end .card -->
Agency

$9.99

billed monthly

Most suitable for agencies with 5-10 people.

Spacers

Spacers are used to create a blank vertical space between elements. To start, create a block level element with the class of .spacer.

Code Preview 
						                            
						                                <p>This is a paragraph.</p>
						                                <div class="spacer"></div>
						                                <p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

By default, a .spacer has a margin top and bottom of 1rem. You can increase this (therefore increasing the amount of whitespace created) by using any of the 5 additional classes:

  • .x2
  • .x3
  • .x4
  • .x5
  • .x6
Code Preview 
						                            
						                                <p>This is a paragraph.</p>
						                                <div class="spacer x6"></div>
						                                <p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.