Typography

Paragraphs and Headings

Make a paragraph stand out by using .lead.

Highlight some text by wrapping with <mark></mark>.

To make text small or treat text as fineprint use .small.

Heading 3

Heading 4

Heading 5

Heading 6

Fotawesome

Sitebuilder uses Fontawesome 5 Pro icon library. To include icons on pages simply copy the code for the respective icon into the page body

<i class="fas fa-address-book"></i>
<i class="fas fa-bell"></i>
<i class="fas fa-cog"></i>

Custom title styles

Body large title

Body medium title

Body small title

<h3 class="body-large-title">Body large title</h3>
<h3 class="body-medium-title">Body medium title</h3>
<h3 class="body-small-title">Body small title</h3>

Blockquotes

Fully featured and standards / specification compliant our blockquotes can be used not only as an information block, but also as a design element.

Standard

<figure class="quote">
       <blockquote>Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.</blockquote>
</figure>

With Author

<figure class="quote">
       <blockquote>Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.</blockquote>
       <figcaption>Author Name, <cite>Cite Location</cite> </figcaption>
</figure>

Blue Styling

<figure class="quote blue">
       <blockquote>Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.</blockquote>
       <figcaption>Author Name, <cite>Cite Location</cite> </figcaption>
</figure>

Purple Styling

<figure class="quote purple">
       <blockquote>Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.</blockquote>
       <figcaption>Author Name, <cite>Cite Location</cite> </figcaption>
</figure>

With Image

<figure class="quote">
       <img src="http://placehold.it/300x300" border="0" /> 
       <blockquote>Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.</blockquote>
       <figcaption>Author Name, <cite>Cite Location</cite> </figcaption>
</figure>

Lorem ipsum dolor sit amet, cu eligendi intellegam his. No pro accusam delicata vituperata, iisque repudiare ut duo. Per an feugiat perpetua, nullam fuisset ius ad.

Address Blocks

Addresses can be added inline using the address tag.

<address>
   <strong>Name here</strong><br>
   <abbr title="Telephone">T:</abbr> 02476 000 0000<br>
   Room S2.01
</address>