Ascension 1.0 - Template Documentation

Typography

The typography is one of the essential parts of any website since the majority of content is text. Ascension supports all typography styles and offers custom ones.

Headings

Here is the complete list of headings, from 1 to 6:

Code Preview 
						                            
						                                <h1>Heading 1</h1>
						                                <h2>Heading 2</h2>
						                                <h3>Heading 3</h3>
						                                <h4>Heading 4</h4>
						                                <h5>Heading 5</h5>
						                                <h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Helper classes

On top of these, there are a few helper classes used to modify the default styling of the headings.

Class Description Code & preview
heavy Sets the font weight to 900 where possible. Applicable for h3 and h4. 
						                            
						                                <h3>Default heading 3</h3>
						                                <h3 class="heavy">Heavy heading 3</h3>
						                                <h4>Default heading 4</h4>
						                                <h4 class="heavy">Heavy heading 4</h4>

Default heading 3

Heavy heading 3

Default heading 4

Heavy heading 4
thin Sets the font weight to 300 where possible. Applicable for h4 only. 
						                            
						                                <h4>Default heading 4</h4>
						                                <h4 class="thin">Thin heading 4</h4>

Default heading 4

Thin heading 4
accent Sets the font color to accent instead of the heading default. Applicable for h5 only. 
						                            
						                                <h5>Default heading 5</h5>
						                                <h5 class="accent">Accent heading 5</h5>
Default heading 5
Accent heading 5

Paragraphs

Paragraphs are defined normally, using the p tag. Small and emphasis tags are also supported.

Code Preview 
						                            
						                                <p>This is a paragraph with some <em>emphasized text</em>. It can also contain some <small>small</small> text.</p>

This is a paragraph with some emphasized text. It can also contain some small text.

Blockquotes

Blockquotes are easily added by using the blockquote element. If you want to add a citation, use the cite element.

Code Preview 
						                            
						                                <blockquote>
						                                    <p>&quot;Your client testimonial goes here.&quot;</p>
						
						                                    <cite>Author name, Company name</cite>
						                                </blockquote>

"Your client testimonial goes here."

Author name, Company name