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>
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>Name here
T: 02476 000 0000
Room S2.01
Alignment Classes
text-left
class.
text-center
class.
text-right
class.
text-nowrap
class.
Transformation Classes
text-lowercase
class.
text-uppercase
class.
text-capitalize
class.