M+FEATURES

HEADINGS

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


BLOCKQUOTE

Once you make a decision, the universe conspires to make it happen.
~ Ralph Waldo Emerson


LISTS

  • I am a standard bulleted list
  • I am also a standard bulleted list item
  • I am a bulleted list with the class name "checklist" applied
  • I am also an item in this checklist
  • I am a bulleted list with the class name "checklist-circle" applied
  • I am also an item in this checklist

How to use:

Apply class name in advanced tab of text element. 
eg. checklist-circle


FONT WEIGHTS

Font Weight Demo 100

Font Weight Demo 300

Font Weight Demo 400 (Default)

Font Weight Demo 700

Font Weight Demo 900 (Bold)

How to use:

Apply class name in advanced tab of text element. 
eg. font-weight-100


COUNT UP EFFECT

826

How to use:

Apply class name "count-up" in advanced tab of text element or to nearest span to text in html.


BUTTONS

How to use:

When using the text element insert link and from the class dropdown menu select button1, button2, etc.

RESPONSIVE FIT TEXT

Fit Text Mobile

Fit Text

How to use:

Apply class name in advanced tab of text element.
eg. fit-text, fit-text-mobile

* Fit text will scale your text up and down to fit in a given container at different screen sizes. When using fit-text-mobile, fit text will only attempt to scale your text on smaller screens.

TEXT SHADOWS

I am using text-shadow
I am using text-shadow-dark
I am using text-shadow-darker
I am using text-shadow-darkest


How to use:

Apply class name in advanced tab of text element. 
eg. text-shadow-dark


UNDERLINES

I am using underline-left

I am using underline-center

I am using underline-right


How to use:

Apply class name in advanced tab of text element. 
eg. underline-left, underline-center, underline-right

ANIMATIONS

Class Name: anim-bounceIn
Class Name: anim-bounceInDown
Class Name: anim-fadeIn
Class Name: anim-fadeInDown
Class Name: anim-fadeInDownBig
Class Name: anim-fadeInLeft
Class Name: anim-fadeInLeftBig
Class Name: anim-fadeInRight
Class Name: anim-fadeInRightBig
Class Name: anim-fadeInUp
Class Name: anim-fadeInUpBig
Class Name: anim-flip
Class Name: anim-flipInX
Class Name: anim-flipInY
Class Name: anim-lightSpeedIn
Class Name: anim-rotateIn
Class Name: anim-zoomIn
Class Name: anim-zoomInDown
Class Name: anim-zoomInLeft
Class Name: anim-zoomInRight
Class Name: anim-zoomInUp



How to use:

Apply class name in advanced tab of any element. The element will then be hidden on initial page load and will animate when scrolled into view. 




Rotate On Scroll



How to use:

Apply class name "rotate-me" in advanced tab of any element. The element will rotate according to your scroll. 


EXPANDABLES

On Click

Expandable Content
Some kind of subtitle or something

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu non lorem porta cursus. Mauris egestas iaculis nisl, vitae euismod velit ultrices et.


How to use:

Two class names are required here. 

Add Class "expandable-trigger" to clickable item
Add Class "expandable-content" to content

Works With Images


Expandable Content
Some kind of subtitle or something

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu non lorem porta cursus. Mauris egestas iaculis nisl, vitae euismod velit ultrices et.

On Hover

Expandable Content
Some kind of subtitle or something

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu non lorem porta cursus. Mauris egestas iaculis nisl, vitae euismod velit ultrices et.


How to use:

Two class names are required here. 

Add Class "expandable-trigger-hover" to hoverable item
Add Class "expandable-content" to content

HOVER EFFECTS

GRAYSCALE CONTAINER

Class Name: grayscale-1up

adventure-logo-white

How to use:

Apply class name in advanced tab of any element inside of a container. This will turn all contents of the container, including it's background to grayscale on hover.

GRAYSCALE ITEM

Class Name: grayscale

blue-jacket-co

How to use:

Apply class name in advanced tab of any element. This will turn the contents of the element to grayscale on hover.

REVERSE GRAYSCALE ITEM

Class Name: reverse-grayscale

blue-jacket-co

How to use:

Apply class name in advanced tab of any element. This will turn the contents of the element to grayscale initially. Items will return to their natural color on hover.

REVERSE GRAYSCALE CONTAINER

Class Name: reverse-grayscale-1up

camping-logo

How to use:

Apply class name in advanced tab of any element inside of a container. This will turn all contents of the container, including it's background to grayscale initially. Items will return to their natural color on hover.

Smart Mobile Map Trigger

Map Us
Resize your screen below 992px, or view the contact page to see the effect


How to use:

Two class names are required here. 

Add Class "mobile-map-content" to your map element
Add Class "mobile-map-trigger" to whatever you want to show the map

Note: items will be hidden until you are on a smaller screen. Hidden items will still be visible in edit mode.

Equal Row Height Grid Layout

LEARN MORE
Block using "absolute-center" class
LEARN MORE
Block using "absolute-center" class
LEARN MORE
Block using "absolute-center" class

How to use:

*You must use the "Product Grid" page template.

  1. To change page templates go to the "Design" tab in the black edit bar at the top of your screen when logged into Aurora.
  2. Next, select "Page Templates" to open the menu of page template choices. Select "Product Grid" and click apply.
  3. You will now see sections of content when in edit mode titled "Grid Group 1 or Grid Group 2".
  4. Place content in the group-x-product-x content areas the same way you would place content into any other area. That's it!

Other Useful Class Names

mt-10 = margin-top: 10px
mt-20 = margin-top: 20px
mb-10 = margin-bottom: 10px
mb-20 = margin-bottom: 20px
padding-0 = padding: 0 (all sides)
padding-5 = padding: 5px (all sides)
padding-10 = padding: 10px (all sides)
padding-15 = padding: 15px (all sides)
padding-20 = padding: 20px (all sides)
pt-5 = padding-top: 5px
pb-5 = padding-bottom: 5px
pt-10 = padding-top: 10px
pb-10 = padding-bottom: 10px
pt-15 = padding-top: 15px
pb-15 = padding-bottom: 15px
pt-20 = padding-top: 20px
pb-20 = padding-bottom: 20px

mobile-left = align-left on smaller screens
mobile-right = align-right on smaller screens
mobile-center = align-center on smaller screens
mobile-hidden = hide on smaller screens

desktop-right = align-right on larger screens
desktop-left = align-left on larger screens
desktop-center = align-center on larger screens

list-inline = list will display inline instead of stacked

force-width = forces image to fill container width
stretch-w-20 = compensates for 20px of horizontal padding
stretch-w-30 = compensates for 30px of horizontal padding

absolute-center = forces content to vertical and horizontal center of content area

rotate-me = rotates object as you scroll up and down


triangle-direction-down = adds down pointing triangle to top of element
triangle-direction-up = adds up pointing triangle to bottom of element
triangle-direction-left = adds left pointing triangle to right of element
triangle-direction-right = adds right pointing triangle to left of element
* The color of the triangle is inherited from the six digit hexadecimal value that follows the "_" class name triangle-color_xxxxxx
Note: you will need to refresh your browser to see the triangle applied.


wacky-footer-trigger = sets the clickable item to trigger the expandable footer
wacky-footer-content = sets the footer content that is shown/hidden by the wacky footer trigger

form-underline = creates a minimalistic form with dark underlined inputs. Best for light backgrounds.
form-underline-light = creates a minimalistic form with light underlined inputs. Best for dark backgrounds.

WACKY FOOTER

(click the compass icon below)