Colors

Primary Base

Dark Gray

Medium Gray

Light Gray

Primary Highlight

Secondary 1

Secondary 2

Secondary 3

Secondary 4

Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with Buffer

Paragraph with Link

Heading with Buffer

Paragraph Lorem ipsum dolor, sit amet Link consectetur adipisicing elit. Eum, eos neque, exercitationem rem incidunt quis delectus, adipisci quisquam laboriosam nulla officia autem architecto molestias vitae vero nam! Harum, quidem dignissimos?

Paragraph (lead-in)

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe reprehenderit voluptas.

Paragraph (small)

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe reprehenderit voluptas.

Unordered List

adipisci quisquam laboriosam nulla officia
arum, quidem dignissimos
laboriosam nulla
sit amet Link consectetur adipisicing elit

Ordered List

adipisci quisquam laboriosam nulla officia
arum, quidem dignissimos
laboriosam nulla
sit amet Link consectetur adipisicing elit

Blockquote

Blockquote Lorem ipsum dolor sit amet consectetur adipisicing elit.

Blockquote with citation

Blockquote dolor sit amet consectetur adipisicing elit.
Citation Name

Image with Caption

Shadow

Table

Table heading	Table heading	Table heading	Table heading
Table data	Table data	Table data	Table data
Table data	Table data	Table data	Table data
Table data	Table data	Table data	Table data
Table data	Table data	Table data	Table data

Horizontal Rule

Horizontal Rule (White)

Components

Buttons

Default Button Secondary 1 Button Secondary 2 Button

Secondary 3 Button Secondary 4 Button

White Button

Eye Brow

Eyebrow

Lorem ipsum title

Stat

Ticker Stat

500

Form - Text Inut

Text Label

Form - Textarea

Textarea Label

Form - Select

Select Label

Form - checkbox

Checkbox Label Checkbox Label Checkbox Label

Form - radio

Radio Label Radio Label Radio Label

Form - Submit

[vc_section][vc_row][vc_column][vc_column_text]

UI Animations

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”m-b-40″][vc_column width=”1/3″][hover_promo header=”Reveal” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal” promo_bg=”555″][/vc_column][vc_column width=”1/3″][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][hover_promo header=”Reveal up” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–up” promo_bg=”555″][/vc_column][vc_column width=”1/4″][hover_promo header=”Reveal down” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–down” promo_bg=”555″][/vc_column][vc_column width=”1/4″][hover_promo header=”Reveal Left” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–left” promo_bg=”555″][/vc_column][vc_column width=”1/4″][hover_promo header=”Reveal Right” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–right” promo_bg=”555″][/vc_column][/vc_row][vc_row el_class=”m-t-40 m-b-40″][vc_column width=”1/3″][hover_promo header=”Delay Reveal 1 (.3 second)” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–delay-1″ promo_bg=”555″][/vc_column][vc_column width=”1/3″][hover_promo header=”Delay Reveal 2 (.6 seconds)” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–delay-2″ promo_bg=”555″][/vc_column][vc_column width=”1/3″][hover_promo header=”Delay Reveal 3 (.9 seconds)” promo_text=”” text_color=”#03061b” aspect_ratio=”4:3″ bg_color=”#61dbff” promo_extra_class_name=”reveal reveal–delay-3″ promo_bg=”555″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Overlays

Overlays can be added to sections or rows containing an image or video in the background.[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay” css=”.vc_custom_1620851031007{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/3×2-placeholder-light.jpg?id=552) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Overlay

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–base-10″ css=”.vc_custom_1620851050379{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Base Overlay 10%

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–base-25″ css=”.vc_custom_1620851077150{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Base Overlay 25%

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–base-50″ css=”.vc_custom_1620851612952{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Base Overlay 50%

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–dark-gradient-top” css=”.vc_custom_1620851631332{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Dark Gradient Overlay (Top)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–dark-gradient-bottom” css=”.vc_custom_1620851646973{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Dark Gradient Overlay (Bottom)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–dark-gradient-right” css=”.vc_custom_1620851664588{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Dark Gradient Overlay (Right)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–dark-gradient-left” css=”.vc_custom_1620851690551{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Dark Gradient Overlay (Left)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–light-gradient-top” css=”.vc_custom_1620851707907{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Light Gradient Overlay (Top)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–light-gradient-bottom” css=”.vc_custom_1620851727193{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Light Gradient Overlay (Bottom)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–light-gradient-left” css=”.vc_custom_1620851746472{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Light Gradient Overlay (Left)

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”p-t-80 p-b-80 text-white overlay overlay–light-gradient-right” css=”.vc_custom_1620851764564{background-image: url(http://visceral-starter.flywheelsites.com//www/wp-content/uploads/4×3-placeholder-light.jpg?id=556) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][vc_column_text]

Light Gradient Overlay (Right)

[/vc_column_text][/vc_column][/vc_row][/vc_section][vc_section css=”.vc_custom_1607711345143{margin-top: 80px !important;}” el_class=”m-b-40″][vc_row][vc_column][vc_column_text]

Hover Promos

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][hover_promo header=”Default: 1:1″ promo_text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.” text_color=”#ffffff” promo_bg=”547″ promo_url=”url:%2F”][/vc_column][vc_column width=”1/2″][hover_promo header=”No Background Image” promo_text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.” text_color=”#03061b” bg_color=”#61dbff” promo_url=”url:%2F” promo_bg=”547″][/vc_column][/vc_row][vc_row el_class=”m-t-40″][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 3:2″ promo_text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.” text_color=”#ffffff” aspect_ratio=”3:2″ promo_bg=”551″ promo_url=”url:%2F”][/vc_column][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 2:3″ text_color=”#ffffff” aspect_ratio=”2:3″ promo_bg=”549″ promo_url=”url:%2F”][/vc_column][/vc_row][vc_row el_class=”m-t-40″][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 4:3″ promo_text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.” text_color=”#ffffff” aspect_ratio=”4:3″ promo_bg=”555″ promo_url=”url:%2F”][/vc_column][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 3:4″ text_color=”#ffffff” aspect_ratio=”3:4″ promo_bg=”553″ promo_url=”url:%2F”][/vc_column][/vc_row][vc_row el_class=”m-t-40″][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 16:9″ promo_text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.” text_color=”#ffffff” aspect_ratio=”16:9″ promo_bg=”557″ promo_url=”url:%2F”][/vc_column][vc_column width=”1/2″][hover_promo header=”Aspect Ratio 9:16″ text_color=”#ffffff” aspect_ratio=”9:16″ promo_bg=”620″ promo_url=”url:%2F”][/vc_column][/vc_row][/vc_section][vc_section][vc_row][vc_column][vc_toggle]

Toggle content goes here, click edit button to change this text.

[/vc_toggle][/vc_column][/vc_row][/vc_section]

Styleguide

Colors

Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with Buffer

Components

Eyebrow

Lorem ipsum title

UI Animations

Overlays

Overlay

Base Overlay 10%

Base Overlay 25%

Base Overlay 50%

Dark Gradient Overlay (Top)

Dark Gradient Overlay (Bottom)

Dark Gradient Overlay (Right)

Dark Gradient Overlay (Left)

Light Gradient Overlay (Top)

Light Gradient Overlay (Bottom)

Light Gradient Overlay (Left)

Light Gradient Overlay (Right)

Hover Promos