Web Template HTML Classes and CSS

Marketing Cloud Personalization web templates support any valid CSS styling for the target browsers of your website. It is good practice to prefix all classes with evg- so they do not conflict with styling already on your website.

This article lists suggested HTML class names prefixed with evg-, descriptions of their intended purposes, and examples of CSS styling. If you need more classes than the ones listed here, refer to Bootstrap classes for ideas.

The following is a list of suggested HTML class names categorized by the website elements they target.

• Web Template HTML Classes and CSS
  • HTML Classes and CSS Styles
    • Jumbotron Classes
      • .evg-jumbotron
      • .evg-cta
    • Product Recommendation Classes
      • .evg-product-recommendations
      • .evg-product-recommendation
      • .evg-product-image
      • .evg-product-details
      • .evg-product-name
      • .evg-product-description
      • .evg-product-price
      • .evg-product-rating
      • .evg-star-empty
      • .evg-star-fill
    • Content Recommendation Classes
      • .evg-content-recommendations
      • .evg-content-recommendation
      • .evg-content-image
      • .evg-content-details
      • .evg-content-title
      • .evg-content-description
    • Form Classes
      • .evg-form
      • .evg-error-msg
      • .evg-opt-out-msg
      • .evg-email
    • Modal Classes
      • .evg-modal
      • .evg-overlay
    • Popup Classes
      • .evg-popup
      • .evg-cta
      • .evg-overlay
      • .evg-main-panel
      • .evg-confirm-panel
    • Button Classes
      • .evg-btn
      • .evg-btn-primary
      • .evg-btn-secondary
      • .evg-btn-outline-primary
      • .evg-btn-outline-secondary
      • .evg-btn-sm
      • .evg-btn-lg
      • .evg-btn-dismissal
    • Heading Classes
      • .evg-header
      • .evg-subheader
      • .evg-h1
      • .evg-h2
      • .evg-h3
      • .evg-h4
      • .evg-h5
      • .evg-h6
    • Display Classes
      • .evg-display-1
      • .evg-display-2
      • .evg-display-3
      • .evg-display-4
    • Typography Classes
      • .evg-text-primary
      • .evg-text-secondary
      • .evg-text-sm
      • .evg-text-lg
      • .evg-dark-on-light
      • .evg-light-on-dark
      • .evg-link
    • Other Classes
      • .evg-hide

Jumbotron Classes

.evg-jumbotron

The parent container class of a jumbotron-style hero banner.

.evg-cta

Applies styling for call-to-action buttons.

Product Recommendation Classes

.evg-product-recommendations

The parent container class of a product recommendations block. Applies styling for the layout of all product recommendations.

.evg-product-recommendation

The container class of a single product recommendation. Applies styling for the layout of the content within each product recommendation.

.evg-product-image

Applies styling for the product image for each product recommendation.

.evg-product-details

Applies styling for the body of each product recommendation.

.evg-product-name

Applies styling for the product name of each product recommendation.

.evg-product-description

Applies styling for the product description of each product recommendation.

.evg-product-price

Applies styling for the product price of each product recommendation.

.evg-product-rating

Applies styling for the product rating of each product recommendation.

.evg-star-empty

Applies styling for the empty rating stars of each product recommendation.

.evg-star-fill

Applies styling for filled rating stars of each product recommendation.

Content Recommendation Classes

.evg-content-recommendations

The parent container class of a content recommendations block. Applies styling for the layout of all content recommendations.

.evg-content-recommendation

The container class of a single content recommendation.

.evg-content-image

Applies styling for the content image of each content recommendation.

.evg-content-details

Applies styling for the body of each content recommendation.

.evg-content-title

Applies styling for the content title of each content recommendation.

.evg-content-description

Applies styling for the content description of each content recommendation.

Form Classes

.evg-form

The parent container class of a form.

.evg-error-msg

Applies styling for error message texts.

.evg-opt-out-msg

Applies styling for an opt-out message.

.evg-email

Applies styling for an email input field.

Modal Classes

.evg-modal

The parent container class of a window.

.evg-overlay

Applies a semi-transparent layer over the page, behind a popup or a window.

Popup Classes

.evg-popup

The parent container class of a popup.

.evg-cta

Applies styling for call-to-action buttons.

.evg-overlay

Applies a semi-transparent layer over the page, behind a popup or a window.

.evg-main-panel

The container class of the main panel of a popup. Applies styling for the layout of the content within the panel.

.evg-confirm-panel

The container class of the secondary confirmation panel of a popup. Applies styling for the layout of the content within the panel.

Button Classes

.evg-btn

Applies basic styling to the button, including spacing and sizing. Use class on button, anchor, or input elements.

.evg-btn-primary

Applies a solid primary color background to the button, adding more visual weight.

.evg-btn-secondary

Applies a solid secondary color background to the button, adding more visual weight.

.evg-btn-outline-primary

Removes the background color on any button (transparent) and colors the text and border using the primary color.

.evg-btn-outline-secondary

Removes the background color on any button (transparent) and colors the text and border using the secondary color.

.evg-btn-sm

Decreases the default button size.

.evg-btn-lg

Increases the default button size.

.evg-btn-dismissal

Styles the button into an "X" symbol. Whenever possible, use this class on a button element with an aria-label="Close".

Heading Classes

.evg-header

Applies unique styling for headers.

.evg-subheader

Applies unique styling for subheaders.

.evg-h1

Applies styling for a level 1 heading.

.evg-h2

Applies styling for a level 2 heading.

.evg-h3

Applies styling for a level 3 heading.

.evg-h4

Applies styling for a level 4 heading.

.evg-h5

Applies styling for a level 5 heading.

.evg-h6

Applies styling for a level 6 heading.

Display Classes

Classes for headers outside of the main page content, like jumbotron display headers. Use these classes to increase the font size of headings.

.evg-display-1

Increases size of the heading to the largest level.

.evg-display-2

Increases size of the heading to the second largest level.

.evg-display-3

Increases size of the heading to the third largest level.

.evg-display-4

Increases size of the heading to the fourth largest level.

Typography Classes

.evg-text-primary

Changes text color to the primary color.

.evg-text-secondary

Changes text color to the secondary color.

.evg-text-sm

Decreases size of text within the main content (non-heading) of the page.

.evg-text-lg

Increases size of text within the main content (non-heading) of the page.

.evg-dark-on-light

Applies a dark text over light background color theme. Use to change the text color in the foreground and the color of the background.

.evg-light-on-dark

Applies a light text over dark background color theme. Use to change the text color in the foreground and the color of the background

.evg-link

Applies styling for text links.

Other Classes

.evg-hide

Class for hiding elements.

• External Link: Bootstrap