#a34320

Villa Toscana Style Guide

Headings

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder.

H3
Sample text is being used as a placeholder.

H4
Sample text is being used as a placeholder.

H5
Sample text is being used as a placeholder.
H6
Sample text is being used as a placeholder.
Heading Classes
heading-x-large
heading-large
heading-med
heading-small
heading-x-small
Text Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
All Links

text-size-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-med
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-style-italiac
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-style-muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-style-caps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-style-lower
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
text-colour-white
Text WEIGHTS
text-weight-x-bold
text-weight-bold
text-weight-normal
text-weight-light
text-weight-x-thin
Icons
Text Alignments
text-align-left
text-align-centre
text-align-right
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Placeholder caption
Borders
border-blue
border-green
border-black
border-grey
border-whitesmoke
border-white
Backgrounds
bg-colour-sienna
bg-colour-orange
bg-colour-black
bg-colour-grey
bg-colour-whitesmoke
bg-colour-white
Text Colours
text-colour-sienna
text-colour-orange
‍
text-colour-black
text-colour-white
Buttons
Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Padding CLASSES
padding-10
padding-20
padding-30
padding-top-10
padding-top-20
padding-top-30
padding-top-60
padding-bottom-10
padding-bottom-20
padding-bottom-30
padding-bottom-60
MARGIN CLASSES
margin-10
margin-20
margin-30
margin-top-0
margin-bottom-0
margin-top-10
margin-top-20
margin-top-30
margin-top-60
margin-bottom-10
margin-bottom-20
margin-bottom-30
margin-bottom-60
margin-left-10
margin-left-10
margin-right-10
margin-right-20
margin-left-5
margin-right-5
Flex Classes
item 1
item 2
item 1
item 2
item 1
item 2
item 1
item 2
item 1
item 2
item 1
item 2
item 1
item 2
Alignment Classes
align-left
align-centre + text-align-centre
align-right + text-align-right
Containers
container
content-block
content-block-med
content-block-sml