Digital Marketing Templates

Main CSS

CSS - overrides

These are examples. You can remove or add any class you want to override. (note: make sure you keep the !important at the end of the css).

Template Titles

Main Title - default

Main Title

Main Title - lowercase

Main Title

Main Title - version 2 (font-size: 88px)

Main Title

Template Titles

Secondary Title - default

Secondary Title

Secondary Title - lowercase

Secondary Title

Secondary Title - version 2 (font-size: 62px)

Secondary Title

Subtitle - Default

Subtitle

Subtitle - lowercase

Subtitle

Subtitle - version 2 (font-size: 20px)

Subtitle

Pretext - default

Pretext

Pretext - lowercase

Pretext

Pretext - version 2 (font-size: 14px)

Pretext

CSS Helpers

Text Color class

Text Color

Background Color class

Background Color

Text Center class

Text Center

Text Capitalize class

Text capitalize

In css there is no 'title case'...you can only capitalize text. This class will only capitalize the text, so in order for it to work the text has to be all 'lower case', or already in 'Title Case'.

Custom Bullet List

  • List Item
  • List Item
  • List Item

Layout modules

Two column layout

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Three column layout

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Four column layout

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Sample Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Two column layout - Image Right

Sample Image

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque.

  • List Item
  • List Item
  • List Item

Two column layout - Image Left

Sample Image

Lorem ipsum

new!

anti-aging breakthrough technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque.

subtitle Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.

subtitle Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.

subtitle Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.

Infographic layout

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.

Percentage of participants who experienced the following results:

Redefine™ Regimen +

Active Hydration Serum = Radiance

more radiant skin

more radiant skin

more radiant skin

more radiant skin

Reverse™ Regimen +

Active Hydration Serum = Radiance

more radiant skin

more radiant skin

more radiant skin

more radiant skin

Unblemish™ Regimen +

Active Hydration Serum = Radiance

more radiant skin

more radiant skin

more radiant skin

more radiant skin

Soothe™ Regimen +

Active Hydration Serum = Radiance

more radiant skin

more radiant skin

more radiant skin

more radiant skin

*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.

Blockquote Layout

1 The first anti-aging product you should buy is the right sunscreen with UVA/UVB protection.

Lorem ipsum dolor sit amet
(after 7 days of use)

2 The first anti-aging product you should buy is the right sunscreen with UVA/UVB protection.

Lorem ipsum dolor sit amet
(after 7 days of use)

3 The first anti-aging product you should buy is the right sunscreen with UVA/UVB protection.

Lorem ipsum dolor sit amet
(after 7 days of use)

Video - Youtube & Vimeo

Centered Text Layout - w/ background and line decoration

Introducing

main title here

Centered Text Layout - no background

subtitle

Connect with a consultant to learn more about our new products and how they can help you love the skin you’re in.

Primary Button Link

Centered Text Layout Wide - no background

subtitle

Connect with a consultant to learn more about our new products and how they can help you love the skin you’re in. Connect with a consultant to learn more about our new products and how they can help you love the skin you’re in.

Primary Button Link

Banner Left Text Layout

secondary title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary Button Link

Banner Right Text Layout

secondary title

pretext

subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary Button Link

Offset Textbox Layout

pretext here

secondary title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam felis, laoreet quis urna quis. Cras molestie ligula in purus elementum.