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 AltModifiers
.btn--responsive
A responsive button is larger on large screens. Use with any button style.
Responsive Responsive ResponsiveScroll 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.
.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)
.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)
.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)
.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)
.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)
.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
.alert-transparent
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
.
Ready to build a better dental practice?
Method Procurement gives dental practices and DSOs the inventory management capabilities they need to succeed. With our full, end-to-end inventory management, ordering dental supplies is straightforward and hassle-free.
Learn how Method Procurement's spend management solutions can improve your bottom line. Get in touch with our team today or request a demo to see it for yourself.
Contact Us