Table of Contents

Typography

.h1

Lorem Ipsum

.h2

Lorem ipsum dolor sit

.h-description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et nunc sit amet quam tristique luctus. Nunc et felis erat. Cras luctus sem in enim varius tempus. Aliquam erat volutpat. Nullam in magna a mauris cursus sodales et faucibus odio. Maecenas non velit vitae neque luctus convallis. Suspendisse vel enim ut nisi egestas consequat. Phasellus a augue at turpis lacinia semper sed non quam. Suspendisse sodales mollis velit ac porttitor. Sed tincidunt imperdiet volutpat. Suspendisse a venenatis enim.

.title1

Lorem Ipsum

.title2

Lorem Ipsum

.p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et nunc sit amet quam tristique luctus. Nunc et felis erat. Cras luctus sem in enim varius tempus. Aliquam erat volutpat. Nullam in magna a mauris cursus sodales et faucibus odio. Maecenas non velit vitae neque luctus convallis. Suspendisse vel enim ut nisi egestas consequat. Phasellus a augue at turpis lacinia semper sed non quam. Suspendisse sodales mollis velit ac porttitor. Sed tincidunt imperdiet volutpat. Suspendisse a venenatis enim.

.p-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et nunc sit amet quam tristique luctus. Nunc et felis erat. Cras luctus sem in enim varius tempus. Aliquam erat volutpat. Nullam in magna a mauris cursus sodales et faucibus odio. Maecenas non velit vitae neque luctus convallis. Suspendisse vel enim ut nisi egestas consequat. Phasellus a augue at turpis lacinia semper sed non quam. Suspendisse sodales mollis velit ac porttitor. Sed tincidunt imperdiet volutpat. Suspendisse a venenatis enim.

.p-notes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et nunc sit amet quam tristique luctus. Nunc et felis erat. Cras luctus sem in enim varius tempus. Aliquam erat volutpat. Nullam in magna a mauris cursus sodales et faucibus odio. Maecenas non velit vitae neque luctus convallis. Suspendisse vel enim ut nisi egestas consequat. Phasellus a augue at turpis lacinia semper sed non quam. Suspendisse sodales mollis velit ac porttitor. Sed tincidunt imperdiet volutpat. Suspendisse a venenatis enim.

.p-callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.p-callout .p-callout--background

Lorem Ipsum

Buttons

Can (and probably should) be used on <a> elements

Variants

.btn-outline Plain Outline
.btn-gradient Gradient
.btn-gradient--alt Gradient Alt

Modifiers

Add a span with the class .caret inside the button

No extra class required.

Caret
Add a span with the class .arrow-green inside the button

No extra class required.

arrow-green
Add a span with the class .plus inside the button

No extra class required.

Plus
.btn--responsive

A responsive button is larger on large screens. Use with any button style.

Responsive Responsive Responsive
.btn--shadow

Adds a shadow hover effect to the button. Use with any button style.

Shadow Shadow Shadow
.btn--large Large Large Large

Scroll Effects

ScrollMagic effects can be added to any element(s) by simply adding classes. Here is an outline of the current animations. Please use these consistently, if we want to modify them later, we can do so in one place. Also, feel free to create new ones if you want, just be sure to document here.

Found in source/theme/js/components/scrollEffects.js
.effect-split-text

Splits text by word and slides each in from right to left.

The Method Procurement platform supports you at each step
.effect-slide-up

Subtle slide up and fade in. Supports delays with: data-delay="0.75". Note that decimal values require a whole digit before the period (So use 0.5 instead of .5)

The Method Procurement platform supports you at each step
.effect-slide-down

Subtle slide down and fade in. Supports delays with: data-delay="0.75". Note that decimal values require a whole digit before the period (So use 0.5 instead of .5)

The Method Procurement platform supports you at each step
.effect-slide-left

Subtle slide left and fade in. Supports delays with: data-delay="0.75". Note that decimal values require a whole digit before the period (So use 0.5 instead of .5)

The Method Procurement platform supports you at each step
.effect-slide-right

Subtle slide right and fade in. Supports delays with: data-delay="0.75". Note that decimal values require a whole digit before the period (So use 0.5 instead of .5)

The Method Procurement platform supports you at each step
.effect-zoom-fade

Fade in and settle from a larger scale at mid page. Supports delays with: data-delay="0.75". Note that decimal values require a whole digit before the period (So use 0.5 instead of .5)

The Method Procurement platform supports you at each step
.effect-stagger-fade-group > .effect-stagger-fade

Stagger fade a group of elements with opacity and a subtle right to left motion. Since this effect works with an array of elements to stagger animation, it is required that we add .effect-stagger-fade-group to the parent. Then, each element to be staggered gets an .effect-stagger-fade class.

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven

Alerts

Add these classes to a Bootstrap .alert

.alert-gradient
Gradient Alert
.alert-transparent
Transparent Alert

Badges

Add these classes on a Bootstrap .badge

.badge--check

Best if added to a container with .d-flex .align-items-center. Notice the built-in check animation and different appearance inside a container with .reverse-bg.

Robust industry catalog
Robust industry catalog

Ready to build a better dental practice?

Learn how Method Procurement's spend management solutions can improve your bottom line.

Contact Us