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

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

Applies styling for call-to-action buttons.

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

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

Applies styling for the product image for each product recommendation.

Applies styling for the body of each product recommendation.

Applies styling for the product name of each product recommendation.

Applies styling for the product description of each product recommendation.

Applies styling for the product price of each product recommendation.

Applies styling for the product rating of each product recommendation.

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

Applies styling for filled rating stars of each product recommendation.

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

The container class of a single content recommendation.

Applies styling for the content image of each content recommendation.

Applies styling for the body of each content recommendation.

Applies styling for the content title of each content recommendation.

Applies styling for the content description of each content recommendation.

The parent container class of a form.

Applies styling for error message texts.

Applies styling for an opt-out message.

Applies styling for an email input field.

The parent container class of a window.

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

The parent container class of a popup.

Applies styling for call-to-action buttons.

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

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

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

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

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

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

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

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

Decreases the default button size.

Increases the default button size.

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

Applies unique styling for headers.

Applies unique styling for subheaders.

Applies styling for a level 1 heading.

Applies styling for a level 2 heading.

Applies styling for a level 3 heading.

Applies styling for a level 4 heading.

Applies styling for a level 5 heading.

Applies styling for a level 6 heading.

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

Increases size of the heading to the largest level.

Increases size of the heading to the second largest level.

Increases size of the heading to the third largest level.

Increases size of the heading to the fourth largest level.

Changes text color to the primary color.

Changes text color to the secondary color.

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

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

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

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

Applies styling for text links.

Class for hiding elements.

• External Link: Bootstrap