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
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.
Use role="heading" aria-level="<heading level number>"
if you use non-semantic tags like a div
to ensure that the headings are accessible.
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.