Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

button

is-secondary

Button Text

button

is-text

Button Text

button

is-icon

Button Text

Spacers

Unified spacer system for the project.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Presenter-Features

securing hidden classes for the features section.

blackout(.active to use)

pause-wrapper.active

pause-bar

section-wrap-txt.main.active

text-wrapper.active

heading & text generic

Heading-Generic

text-generic

vid-wrapper.intro.active

vid-code-intro.active
vid-code-intro.mp.active

vid-wrapper.features.active

vid-code.active
vid-code.mp.active

section-wrap-btns.active

ctrl-btn.active

ctrl-btn.current

ctrl-btn.active.hovered

active

current

hovered

Presenter-Data

securing hidden classes for the data section.

dimmer.active

section-wrap-txt.active

text-wrapper.active

opts-menu_btn.active

opts-dropdown.active

opts-menu_link

Data

Click 'View' to reveal different components. The 'Comp' buttons below zoom the view to that component and display its info. The 'Back' button reopens the last active main view.

vid-wrapper.active

vid-code.active
vid-code.mp.active

section-wrap-comp-data.active

txt-img-btn.active

comp-data-wrap.active

comp-data-body-wrap.active

ctrl-btn-back.active

image

Datasheet-1-1

Description

text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter text detailing this specific parameter

back

Presenter-Sequence

securing hidden classes for the sequence section.

text-wrapper.active

action-heading.active

intro-txt-wrap.active

Sequence-1

These steps describe a certain process. Click a 'Step' button to view the animation at that point. Click the screen to pause / play.

vid-wrapper.sequence.active

vid-code.active
vid-code.mp.active