Elements

#Logos

#Black

Rawson Property Group logo
Rawson Property Group logo

#White

Rawson Property Group logo
Rawson Property Group logo

#Color Palette

  1. Brand

    #ffd503
    $color-primary
  2. Grayscale

    #000
    $color-black
    #3e3e3e
    $color-gray-dark
    #525252
    $color-gray
    #bfbfbf
    $color-gray-light
    #d8d8d8
    $color-silver
    #f3f3f3
    $color-silver-light
    #f9f9f9
    $color-white-dark
    #fff
    $color-white
  3. Utility

    #ff4136
    $color-red
    #ff851b
    $color-orange
    #ffdc00
    $color-yellow
    #2ecc40
    $color-green
    #0074d9
    $color-blue
  4. Social

    #0074d9
    $color-facebook
    #3b5998
    $color-twitter

#Font Stacks

Primary font: Lato, Arial, sans-serif

Primary font light italic: Lato, Arial, sans-serif

Primary font bold: Lato, Arial, sans-serif

#Headings

h1. The quick brown fox jumps over the lazy dog

h1. The quick brown fox jumps over the lazy dog

h2. The quick brown fox jumps over the lazy dog

h2. The quick brown fox jumps over the lazy dog

h3. The quick brown fox jumps over the lazy dog

h3. The quick brown fox jumps over the lazy dog

h4. The quick brown fox jumps over the lazy dog

h4. The quick brown fox jumps over the lazy dog

h5. The quick brown fox jumps over the lazy dog
h5. The quick brown fox jumps over the lazy dog
h6. The quick brown fox jumps over the lazy dog
h6. The quick brown fox jumps over the lazy dog

#Paragraph

“The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.

“The quick brown fox jumps over the lazy dog” is an English–language pangram…

#Block Quote

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

MDN

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed…

MDN

#Horizontal Rule

#Default



#Silver



#Inline Elements

This is a text link

Strong is used to indicate strong importance

Strong is used to indicate strong importance

This text has added emphasis

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The i element is text that is set off from the normal text

This text is deleted and This text is inserted

This text is deleted and This text is inserted

This text has a strikethrough

This text has a strikethrough

Superscript®

Superscript®

Subscript for things like H2O

Subscript for things like H2O

This small text is small for for fine print, etc.

This small text is small for for fine print, etc.

Abbreviation: HTML

Abbreviation: HTML

Keybord input: Cmd

Keybord input: Cmd

This text is a short inline quotation

This text is a short inline quotation

This is a citation

This is a citation

The dfn element indicates a definition

The dfn element indicates a definition

The mark element indicates a highlight

The mark element indicates a highlight

This is what inline code looks like.

This is what inline code looks like.

This is sample output from a computer program

This is sample output from a computer program

The variarble element, such as x = y

The variarble element, such as x = y

#Address

Rawson Property Group Head Office
222 Main Road
Rondebosch, WC
7700
South Africa
+27 (0)21 658 7100
Rawson Property Group Head Office
222 Main Road
Rondebosch, WC
7700
South Africa
+27 (0)21 658 7100

#Time

#Lists

#Description

The quick brown fox jumps over the lazy dog
“The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
The quick brown fox jumps over the lazy dog
“The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
The quick brown fox jumps over the lazy dog
“The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
The quick brown fox jumps over the lazy dog
“The quick brown fox jumps over the lazy dog” is an English–language pangram…

#Ordered

  1. “The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
  2. “The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
  3. “The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
  1. “The quick brown fox jumps over the lazy dog” is an English–language pangram…

#Unordered

  • “The quick brown fox jumps over the lazy dog” is an English–language pangram…

#Inline

  • Lorem ipsum dolor sit

#Separator

  • Lorem ipsum dolor sit

#Unstyled

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

#Table

#Default

The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB
The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB

#Black

The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB
The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB

#Small

The Greatest Movie Actors of All Time
# First Name Last Name Movie Image
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB
The Greatest Movie Actors of All Time
# First Name Last Name Movie Image
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB

#Transparent

The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB
The Greatest Movie Actors of All Time
# First Name Last Name Movie
1 Marlon BrandoBadge The Godfather
2 Jack Nicholson The Shining
Source: IMDB

#Figure

This is a placeholder image with a supporting caption.
This is a placeholder image with a supporting caption.

#Buttons

#Default

#Small

#Icon

#Button Dropdown

#Default

#Split

#Button Group

#Left–aligned

#Center–aligned

#Right–aligned

#Icons

#Map

#Media

#Audio

#Video

#Grid

#1/1

 

#1/2

 
 

#1/3 – 2/3

 
 

#1/4 – 3/4

 
 

#1/5 – 4/5

 
 

#1/6 – 5/6

 
 

#1/3

 
 
 

#1/4

 
 
 
 

#1/5

 
 
 
 
 

#1/6

 
 
 
 
 
 

#Utilities

#Display

Hide visually and from screen readers

Hide visually and from screen readers

Hide only visually, but have it available for screen readers

Hide only visually, but have it available for screen readers

Hide visually and from screen readers, but maintain layout

Hide visually and from screen readers, but maintain layout

#Visibility

Hide on smaller screens

Hide on smaller screens

Show on smaller screens only

Show on smaller screens only

Hide on medium screens only

Hide on medium screens only

Show on medium screens only

Show on medium screens only

Hide on large screens

Hide on large screens

Show on large screens only

Show on large screens only

#Embed

#Floats

This element is floated left
This element is floated left
This element is floated right
This element is floated right

#Font

This font weight is bold

This font weight is bold

This font weight is normal

This font weight is normal

#Text

This text is aligned left

This text is aligned left

This text is aligned center

This text is aligned center

This text is aligned right

This text is aligned right

This text transform is capitalize

This text transform is capitalize

This text transform is inherit

This text transform is inherit

This text transform is lowercase

This text transform is lowercase

This text transform is uppercase

This text transform is uppercase

This text is truncated “The quick brown fox jumps over the lazy dog” is an English–language pangram — a phrase that contains all of the letters of the alphabet. It is used to show fonts and to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.

This text is truncated