"Quoting on new jobs has never been so easy as VendorPM has made it. Property managers will reach out to us for pricing estimates and this platform streamlines my entire bidding process."

Jonathan Lewis
Owner of Platinum Building Services

"VendorPM has changed the way SDM finds new business. We are no longer subject to seasonality with the constant influx of new bids from local condos and office towers."

Luis Castillo
Owner of SDM Landscaping

“An impressive platform that offers access to esteemed service providers, bid analysis and the benefit of saving valuable time.”

Claudia Nemi
Director, Property Management

“VendorPM saves me countless hours and puts my mind at ease.”

Nicholas Chirametli
President, City Sites

“In a fast paced industry time is of the essence – VendorPM is a tool that allows to source excellent contractors in an efficient manner.”

Dean McCabe
President, Meritus Group

Styleguide

Client-first Version 1.0

Title

Global headings - H1 to H6

H1

A wonderful wireframe kit

H2

A wonderful wireframe kit

H3

A wonderful wireframe kit

H4

A wonderful wireframe kit

H5
A wonderful wireframe kit
H6
A wonderful wireframe kit

Overridden heading sizes

.heading-xlarge

A wonderful wireframe kit

.heading-large

A wonderful wireframe kit

.heading-medium

A wonderful wireframe kit

.heading-small

A wonderful wireframe kit

.heading-xsmall

A wonderful wireframe kit

Other html tags

Paragraph

In presentations, you often require 'dummy text' to fill out the places where actual text will go once the money men buy it from some other overpriced consultant. Historically, this dummy text is a block of fake latin boilerplate that begins with 'Lorem Ipsum'. It fills up the space with sentences and paragraphs, but it's been used so long by so many that - like banner ads and tv commercials - people just gloss over it without paying any attention to the contents. Herein lies your opportunity to subvert the timeless standard.

Block quote
Block Quote

Text sizes

.text-xlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-large
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-mediun
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-small
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text weights

.text-weight-bold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-semibold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-light
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-xlight
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text styles

.text-style-link
.text-style-italic
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-strikethrough
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-allcaps
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-muted
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-subheading
Subheading
.text-style-quote
This is a quote
.text-style-nowrap
This text doesn't wrap
.text-style-2lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

.text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

Text colors

.text-color-white
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color-secondary
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color-accent
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text alignment

.text-align-left
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-center
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-right
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Rich text styling

These elements are styled separately when nested under the class  .text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a link inside of a rich text element

  • List item 1
  • List item 2
  • List item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
This is an image caption

Colors

Common colors

These colors can be changed via the swatches panel.

VendorPM Gray
VendorPM Green
Vendor PM Purple
Vendor PM Blue
Buttons/Links hover

Other colors

These colors can be changed via the swatches panel.

Accent
Borders
Borders secondary
Placeholder text

Background color classes

These color classes can be applied to an element to change it's background color

.background-color-black
.background-color-white
.background-color-grey

UI elements

Form elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Width classes

Containers

.container-large
.container-medium
.container-small

Max widths

max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge

Spacing classes

Margin

.margin-0
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge
.margin-custom1
.margin-custom2
.margin-custom3

Padding

.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge
.padding-custom1
.padding-custom2
.padding-custom3