2 files changed, 19 insertions, 7 deletions
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
index 2e16071e563..b54f7051806 100644
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
@@ -1,6 +1,6 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import WelcomePage from './welcome.vue';
 import LegacyContainer from './legacy_container.vue';
 import { __, s__ } from '~/locale';
@@ -57,7 +57,9 @@ export default {
     WelcomePage,
     LegacyContainer,
   },
-
+  directives: {
+    SafeHtml,
+  },
   props: {
     hasErrors: {
       type: Boolean,
@@ -69,6 +71,11 @@ export default {
       required: false,
       default: false,
     },
+    newProjectGuidelines: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 
   data() {
@@ -83,11 +90,11 @@ export default {
         return PANELS;
       }
 
-      return PANELS.filter(p => p.name !== CI_CD_PANEL);
+      return PANELS.filter((p) => p.name !== CI_CD_PANEL);
     },
 
     activePanel() {
-      return PANELS.find(p => p.name === this.activeTab);
+      return PANELS.find((p) => p.name === this.activeTab);
     },
 
     breadcrumbs() {
@@ -113,7 +120,7 @@ export default {
       this.handleLocationHashChange();
       this.resetProjectErrors();
     });
-    this.$root.$on('clicked::link', e => {
+    this.$root.$on('clicked::link', (e) => {
       window.location = e.target.href;
     });
   },
@@ -142,9 +149,14 @@ export default {
   <welcome-page v-if="activeTab === null" :panels="availablePanels" />
   <div v-else class="row">
     <div class="col-lg-3">
-      <div class="text-center" v-html="activePanel.illustration"></div>
+      <div class="gl-text-white" v-html="activePanel.illustration"></div>
       <h4>{{ activePanel.title }}</h4>
       <p>{{ activePanel.description }}</p>
+      <div
+        v-if="newProjectGuidelines"
+        id="new-project-guideline"
+        v-safe-html="newProjectGuidelines"
+      ></div>
     </div>
     <div class="col-lg-9">
       <gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs">
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
index 022328cd8a2..63a65975fff 100644
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
@@ -37,7 +37,7 @@ export default {
         class="blank-state blank-state-link experiment-new-project-page-blank-state"
         @click="track('click_tab', { label: panel.name })"
       >
-        <div class="blank-state-icon" v-html="panel.illustration"></div>
+        <div class="blank-state-icon gl-text-white" v-html="panel.illustration"></div>
         <div class="blank-state-body gl-pl-4!">
           <h3 class="blank-state-title experiment-new-project-page-blank-state-title">
             {{ panel.title }}