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.
The parent container class of a jumbotron-style hero banner.
1.evg-jumbotron {
2 position: relative;
3 z-index: 2;
4 display: -webkit-flex;
5 display: flex;
6 -webkit-flex-flow: column nowrap;
7 flex-flow: column nowrap;
8 -webkit-justify-content: center;
9 justify-content: center;
10 -webkit-align-items: center;
11 align-items: center;
12 width: 100%;
13 height: 500px;
14 padding: 10px;
15 background-size: cover;
16}Applies styling for call-to-action buttons.
1.evg-cta {
2 display: inline-block;
3 vertical-align: middle;
4 margin-left: 0.5rem;
5 font-size: 1rem;
6 color: #fff;
7 background-color: #000;
8}The parent container class of a product recommendations block. Applies styling for the layout of all product recommendations.
1.evg-product-recommendations {
2 position: relative;
3 z-index: 2;
4 display: -webkit-box;
5 display: -ms-flexbox;
6 display: flex;
7 -webkit-box-orient: horizontal;
8 -webkit-box-direction: normal;
9 -ms-flex-flow: row nowrap;
10 flex-flow: row nowrap;
11 -webkit-box-pack: space-between;
12 -ms-flex-pack: space-between;
13 justify-content: space-between;
14 -webkit-box-align: stretch;
15 -ms-flex-align: stretch;
16 align-items: stretch;
17 width: auto;
18 height: 100%;
19 padding: 0;
20}The container class of a single product recommendation. Applies styling for the layout of the content within each product recommendation.
1.evg-product-recommendation {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5 -webkit-box-orient: vertical;
6 -webkit-box-direction: normal;
7 -ms-flex-flow: column nowrap;
8 flex-flow: column nowrap;
9 -webkit-box-pack: center;
10 -ms-flex-pack: center;
11 justify-content: center;
12 -webkit-box-align: end;
13 -ms-flex-align: end;
14 align-items: flex-end;
15 width: auto;
16 margin: 0;
17 padding: 0 0.5rem;
18 text-align: center;
19}Applies styling for the product image for each product recommendation.
1.evg-product-image {
2 width: 80%;
3 height: auto;
4}Applies styling for the body of each product recommendation.
1.evg-product-details {
2 width: 100%;
3 height: 100%;
4 min-height: 9rem;
5 padding: 0.5rem 0;
6}Applies styling for the product name of each product recommendation.
1.evg-product-name {
2 display: block;
3 max-width: 90%;
4 min-height: 2.5rem;
5 margin: auto auto 0.25rem;
6 color: #393939;
7 font-size: 1rem;
8 font-weight: 600;
9 line-height: 1.25rem;
10 text-decoration: none;
11}Applies styling for the product description of each product recommendation.
1.evg-product-description {
2 overflow: hidden;
3 width: 95%;
4 max-height: 2rem;
5 margin: 0 auto;
6 font-size: 0.85rem;
7 line-height: 1rem;
8}Applies styling for the product price of each product recommendation.
1.evg-product-price {
2 margin-bottom: 0.5rem;
3}Applies styling for the product rating of each product recommendation.
1.evg-product-rating {
2 width: 5rem;
3 margin: 0 auto 0.5rem auto;
4 text-align: left;
5 text-decoration: none;
6}Applies styling for the empty rating stars of each product recommendation.
1.evg-star-empty {
2 color: #dee3e8;
3 background-color: #ffffff;
4 text-align: left;
5 text-decoration: none;
6}Applies styling for filled rating stars of each product recommendation.
1.evg-star-fill {
2 position: relative;
3 overflow: hidden;
4 margin-top: -1.4em;
5 color: #ce763c;
6 background-color: transparent;
7}The parent container class of a content recommendations block. Applies styling for the layout of all content recommendations.
1.evg-content-recommendations {
2 position: relative;
3 z-index: 2;
4 display: -webkit-box;
5 display: -ms-flexbox;
6 display: flex;
7 -webkit-box-orient: horizontal;
8 -webkit-box-direction: normal;
9 -ms-flex-flow: row wrap;
10 flex-flow: row wrap;
11 -webkit-box-pack: center;
12 -ms-flex-pack: center;
13 justify-content: center;
14 -webkit-box-align: start;
15 -ms-flex-align: start;
16 align-items: flex-start;
17 width: auto;
18 max-width: 960px;
19 margin: 0 auto;
20}The container class of a single content recommendation.
1.evg-content-recommendation {
2 margin: 1.5rem;
3}Applies styling for the content image of each content recommendation.
1.evg-content-image {
2 display: block;
3 width: 100%;
4 height: auto;
5 margin: 0;
6}Applies styling for the body of each content recommendation.
1.evg-content-details {
2 overflow: hidden;
3 width: 100%;
4 padding: 1rem;
5 background-color: #fff;
6 text-align: left;
7}Applies styling for the content title of each content recommendation.
1.evg-content-title {
2 overflow: hidden;
3 height: 2.5rem;
4 margin: 0 auto 0.75rem auto;
5 font-size: 1.5rem;
6 font-weight: 600;
7 line-height: 2.5rem;
8 text-decoration: none;
9}Applies styling for the content description of each content recommendation.
1.evg-content-description {
2 overflow: hidden;
3 height: 8rem;
4 font-size: 1.25rem;
5 line-height: 2rem;
6}The parent container class of a form.
1.evg-form {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5
6 -webkit-box-orient: vertical;
7 -webkit-box-direction: normal;
8 -ms-flex-direction: column;
9 flex-direction: column;
10
11 -webkit-box-pack: center;
12 -ms-flex-pack: center;
13 justify-content: center;
14
15 -webkit-box-align: center;
16 -ms-flex-align: center;
17 align-items: center;
18
19 width: 100%;
20 text-align: center;
21}Applies styling for error message texts.
1.evg-error-msg {
2 color: #ff0000;
3 font-size: 1rem;
4}Applies styling for an opt-out message.
1.evg-opt-out-msg {
2 font-size: 1rem;
3 text-decoration: underline;
4 cursor: pointer;
5}Applies styling for an email input field.
1.evg-email {
2 width: 75%;
3 margin: 0.5rem 0;
4 padding: 0.5rem 1rem;
5 border: 1px solid #ddd;
6 color: #59575c;
7}The parent container class of a window.
1.evg-modal {
2 position: relative;
3 z-index: 10000000;
4}Applies a semi-transparent layer over the page, behind a popup or a window.
1.evg-overlay {
2 position: fixed;
3 top: 0;
4 right: 0;
5 bottom: 0;
6 left: 0;
7 opacity: 0.3;
8 width: 100%;
9 height: 100%;
10 background-color: #000;
11}The parent container class of a popup.
1.evg-popup {
2 position: fixed;
3 top: 50%;
4 left: 50%;
5 width: 500px;
6 height: 500px;
7 padding: 20px;
8 background-color: #fff;
9 background-position: center bottom;
10 background-size: cover;
11 background-repeat: no-repeat;
12 transform: translateX(-50%) translateY(-50%);
13}Applies styling for call-to-action buttons.
1.evg-cta {
2 display: inline-block;
3 vertical-align: middle;
4 margin-left: 0.5rem;
5 font-size: 1rem;
6 color: #fff;
7 background-color: #000;
8}Applies a semi-transparent layer over the page, behind a popup or a window.
1.evg-overlay {
2 position: fixed;
3 top: 0;
4 right: 0;
5 bottom: 0;
6 left: 0;
7 opacity: 0.3;
8 width: 100%;
9 height: 100%;
10 background-color: #000;
11}The container class of the main panel of a popup. Applies styling for the layout of the content within the panel.
1.evg-main-panel {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5 -webkit-box-orient: vertical;
6 -webkit-box-direction: normal;
7 -ms-flex-direction: column;
8 flex-direction: column;
9 -webkit-box-pack: center;
10 -ms-flex-pack: center;
11 justify-content: center;
12 -webkit-box-align: center;
13 -ms-flex-align: center;
14 align-items: center;
15 width: 100%;
16 height: 100%;
17 text-align: center;
18}The container class of the secondary confirmation panel of a popup. Applies styling for the layout of the content within the panel.
1.evg-confirm-panel {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5 -webkit-box-orient: vertical;
6 -webkit-box-direction: normal;
7 -ms-flex-direction: column;
8 flex-direction: column;
9 -webkit-box-pack: center;
10 -ms-flex-pack: center;
11 justify-content: center;
12 -webkit-box-align: center;
13 -ms-flex-align: center;
14 align-items: center;
15 width: 100%;
16 height: 100%;
17 text-align: center;
18}Applies basic styling to the button, including spacing and sizing. Use class on button, anchor, or input elements.
1.evg-btn {
2 display: inline-block;
3 vertical-align: middle;
4 padding: 0.5rem 1rem;
5 border: 1px solid transparent;
6 border-radius: 3rem;
7 color: #215ca0;
8 background-color: transparent;
9 font-size: 1rem;
10 font-weight: 400;
11 line-height: 1.5;
12 text-align: center;
13 text-decoration: none;
14 cursor: pointer;
15 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
16 border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
17 -webkit-user-select: none;
18 -moz-user-select: none;
19 -ms-user-select: none;
20 user-select: none;
21}Applies a solid primary color background to the button, adding more visual weight.
1.evg-btn-primary {
2 color: #ffffff;
3 border-color: #215ca0;
4 background-color: #215ca0;
5 transition: background-color 0.15s, color 0.15s;
6}
7
8.evg-btn-primary:hover {
9 color: #ffffff;
10 border-color: #1c4e88;
11 background-color: #1c4e88;
12}Applies a solid secondary color background to the button, adding more visual weight.
1.evg-btn-secondary {
2 color: #ffffff;
3 border-color: #6c757d;
4 background-color: #6c757d;
5 transition: background-color 0.15s, color 0.15s;
6}
7
8.evg-btn-secondary:hover {
9 color: #ffffff;
10 border-color: #59595c;
11 background-color: #59595c;
12}Removes the background color on any button (transparent) and colors the text and border using the primary color.
1.evg-btn-outline-primary {
2 color: #215ca0;
3 border-color: #215ca0;
4 transition: background-color 0.15s, color 0.15s;
5}
6
7.evg-btn-outline-primary:hover {
8 color: #ffffff;
9 border-color: #215ca0;
10 background-color: #215ca0;
11}Removes the background color on any button (transparent) and colors the text and border using the secondary color.
1.evg-btn-outline-secondary {
2 color: #6c757d;
3 border-color: #6c757d;
4 transition: background-color 0.15s, color 0.15s;
5}
6
7.evg-btn-outline-secondary:hover {
8 color: #ffffff;
9 border-color: #6c757d;
10 background-color: #6c757d;
11}Decreases the default button size.
1.evg-btn-sm {
2 padding: 0.25rem 0.75rem;
3 font-size: 0.875rem;
4}Increases the default button size.
1.evg-btn-lg {
2 padding: 0.5rem 2rem;
3 font-size: 1.25rem;
4}Styles the button into an “X” symbol. Whenever possible, use this class on a button element with an aria-label="Close".
1.evg-btn-dismissal {
2 position: absolute;
3 top: 0;
4 right: 0;
5 padding: 0 0.5rem;
6 border: 1px solid transparent;
7 background-color: transparent;
8 font-size: 2rem;
9 font-weight: 700;
10 line-height: 1;
11 cursor: pointer;
12}Applies unique styling for headers.
1.evg-header {
2 display: block;
3 max-width: 90%;
4 height: fit-content;
5 text-align: center;
6 margin-bottom: .5rem;
7 font-size: 1.75rem;
8 line-height: 1.75rem;Applies unique styling for subheaders.
1.evg-subheader {
2 display: block;
3 max-width: 90%;
4 height: fit-content;
5 text-align: center;
6 margin-bottom: .5rem;
7 font-size: 1.5rem;
8 font-weight: 300;
9 line-height: 1.5rem;Applies styling for a level 1 heading.
1.evg-h1 {
2 font-size: 2.5rem;
3}Applies styling for a level 2 heading.
1.evg-h2 {
2 font-size: 2rem;
3}Applies styling for a level 3 heading.
1.evg-h3 {
2 font-size: 1.75rem;
3}Applies styling for a level 4 heading.
1.evg-h4 {
2 font-size: 1.5rem;
3}Applies styling for a level 5 heading.
1.evg-h5 {
2 font-size: 1.25rem;
3}Applies styling for a level 6 heading.
1.evg-h6 {
2 font-size: 1rem;
3}Use role="heading" aria-level="<heading level number>" if you use non-semantic tags like a div to ensure that the headings are accessible.
Note
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.
1.evg-display-1 {
2 font-size: 6rem;
3 font-weight: 700;
4 line-height: 1.2;
5}Increases size of the heading to the second largest level.
1.evg-display-2 {
2 font-size: 5.5rem;
3 font-weight: 700;
4 line-height: 1.2;
5}Increases size of the heading to the third largest level.
1.evg-display-3 {
2 font-size: 4.5rem;
3 font-weight: 700;
4 line-height: 1.2;
5}Increases size of the heading to the fourth largest level.
1.evg-display-4 {
2 font-size: 3.5rem;
3 font-weight: 700;
4 line-height: 1.2;
5}Changes text color to the primary color.
1.evg-text-primary {
2 color: #343a40;
3}Changes text color to the secondary color.
1.evg-text-secondary {
2 color: #6c757d;
3}Decreases size of text within the main content (non-heading) of the page.
1.evg-text-sm {
2 font-size: 0.85rem;
3}Increases size of text within the main content (non-heading) of the page.
1.evg-text-lg {
2 font-size: 1.25rem;
3}Applies a dark text over light background color theme. Use to change the text color in the foreground and the color of the background.
1.evg-element1.evg-dark-on-light {
2 color: #343a40;
3}
4.evg-element2.evg-dark-on-light {
5 background-color: #fff;
6}Applies a light text over dark background color theme. Use to change the text color in the foreground and the color of the background
1.evg-element1.evg-light-on-dark {
2 color: #fff;
3}
4.evg-element2.evg-light-on-dark {
5 background-color: #343a40;
6}Applies styling for text links.
1.evg-element1.evg-light-on-dark {
2 color: #fff;
3}
4.evg-element2.evg-light-on-dark {
5 background-color: #343a40;
6}Class for hiding elements.
1.evg-hide {
2 visibility: hidden;
3 display: none;
4 width: 0;
5 height: 0;
6}
j