Elements Reference

Oh, and this: a handy reference to all the modifiers supported by various elements.

Banner

HTML

<section class="banner style(N) (optional modifiers)">
                                        <div class="content">
                                        (content)
                                        </div>
                                        <div class="image">
                                        <img src="(image URL)" alt="Alternate text" />
                                        </div>
                                        </section>

banner style1

A 50/50 vertical split between content and an image. Supports these modifiers:

fullscreen Fills the height of the screen.
orient-left Shows content on the left, image on the right.
orient-right Shows content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

banner style2

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

fullscreen Fills the height of the screen.
orient-left Attaches the content box to the left edge of the screen.
orient-center Places the content box in the center of the screen.
orient-right Attaches the content box to the right edge of the screen.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

banner style3

An image within a circular frame placed to the side of content. Supports these modifiers:

fullscreen Fills the height of the screen.
orient-left Places the content on the left, image on the right.
orient-right Places the content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-up Fades image up on page load.
onload-image-fade-down Fades image down on page load.
onload-image-fade-left Fades image left on page load.
onload-image-fade-right Fades image right on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-up Fades image up on page scroll.
onscroll-image-fade-down Fades image down on page scroll.
onscroll-image-fade-left Fades image left on page scroll.
onscroll-image-fade-right Fades image right on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

banner style4

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

fullscreen Fills the height of the screen.
iphone Uses iPhone styling for image frame.
android Uses Android styling for image frame.
orient-left Places the content on the left, image on the right.
orient-right Places the content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-up Fades image up on page load.
onload-image-fade-down Fades image down on page load.
onload-image-fade-left Fades image left on page load.
onload-image-fade-right Fades image right on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-up Fades image up on page scroll.
onscroll-image-fade-down Fades image down on page scroll.
onscroll-image-fade-left Fades image left on page scroll.
onscroll-image-fade-right Fades image right on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

banner style5

Content set directly against an image background. Supports these modifiers:

fullscreen Fills the height of the screen.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

Spotlight

HTML

<section class="spotlight style(N) (optional modifiers)">
                                        <div class="content">
                                        (content)
                                        </div>
                                        <div class="image">
                                        <img src="(image URL)" alt="Alternate text" />
                                        </div>
                                        </section>

spotlight style1

A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:

orient-left Shows content on the left, image on the right.
orient-right Shows content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

spotlight style2

An image within a circular frame placed to the side of content. Supports these modifiers:

orient-left Places the content on the left, image on the right.
orient-right Places the content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-up Fades image up on page load.
onload-image-fade-down Fades image down on page load.
onload-image-fade-left Fades image left on page load.
onload-image-fade-right Fades image right on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-up Fades image up on page scroll.
onscroll-image-fade-down Fades image down on page scroll.
onscroll-image-fade-left Fades image left on page scroll.
onscroll-image-fade-right Fades image right on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

spotlight style3

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

orient-left Places the content on the left, image on the right.
orient-right Places the content on the right, image on the left.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-up Fades image up on page load.
onload-image-fade-down Fades image down on page load.
onload-image-fade-left Fades image left on page load.
onload-image-fade-right Fades image right on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-up Fades image up on page scroll.
onscroll-image-fade-down Fades image down on page scroll.
onscroll-image-fade-left Fades image left on page scroll.
onscroll-image-fade-right Fades image right on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

spotlight style4

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

fullscreen Fills the height of the screen.
halfscreen Fills half the height of the screen.
orient-left Attaches the content box to the left edge of the screen.
orient-center Places the content box in the center of the screen.
orient-right Attaches the content box to the right edge of the screen.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.

spotlight style5

Boxed-in content set against an image background. Supports these modifiers:

fullscreen Fills the height of the screen.
halfscreen Fills half the height of the screen.
orient-left Places the content box on the left of the screen.
orient-center Places the content box in the center of the screen.
orient-right Places the content box on the right side of the screen.
content-align-left Left-aligns content.
content-align-center Center-aligns content.
content-align-right Right-aligns content.
image-position-left Left-positions image.
image-position-center Center-positions image.
image-position-right Right-positions image.
onload-content-fade-up Fades content up on page load.
onload-content-fade-down Fades content down on page load.
onload-content-fade-left Fades content left on page load.
onload-content-fade-right Fades content right on page load.
onload-content-fade-in Fades in content on page load.
onload-image-fade-in Fades in image on page load.
onscroll-content-fade-up Fades content up on page scroll.
onscroll-content-fade-down Fades content down on page scroll.
onscroll-content-fade-left Fades content left on page scroll.
onscroll-content-fade-right Fades content right on page scroll.
onscroll-content-fade-in Fades in content on page scroll.
onscroll-image-fade-in Fades in image on page scroll.
invert Inverts the color scheme.
color1 Uses background color #1.
color2 Uses background color #2.
color3 Uses background color #3.
color4 Uses background color #4.
color5 Uses background color #5.
color6 Uses background color #6.
color7 Uses background color #7.