Add bg version of code image row. Rename code image row. (#1011)

Co-authored-by: Jesse Borden <jborden@apple.com>

Author: jesseaborden

_data/new-data/get-started/cloud-services/image-text-column.yml renamed to _data/new-data/get-started/cloud-services/image-text-row.yml

@@ -1,4 +1,3 @@
-headline: Image Text Column
 image:
   src: /assets/images/getting-started/embedded/primary-card-vapor-logo.jpg
   alt: a place holder

_data/new-data/get-started/storybook/image-text-column.yml renamed to _data/new-data/get-started/storybook/image-text-row-bg.yml

@@ -0,0 +1,12 @@
+headline: Image Text Row
+image:
+  src: /assets/images/getting-started/embedded/primary-card-vapor-logo.jpg
+  alt: a place holder
+copy:
+  headline: Low memory footprint with massive performance.
+  paragraphs:
+    - 'Culture of Code migrated the infrasture that supports Things to Swift and saw a massive reduction in both cost and response time.'
+    - 'Leveraging Swift’s built-in features as well as frameworks to enable rapid development, they were able to improve their customer experience without sacrificing time.'
+  link:
+    text: Read more
+    href: '#'

_data/new-data/get-started/storybook/image-text-row.yml

@@ -1,5 +1,9 @@
-<div class="image-text-column content-wrapper">
+<div
+  class="image-text-row content-wrapper{% if include.background %} background{% endif %}"
+>
+  {% if include.headline %}
   <h2>{{ include.content.headline }}</h2>
+  {% endif %}
   <div class="card-wrapper">
     <img
       src="{{ include.content.image.src }}"

_includes/new-includes/components/image-text-column.html renamed to _includes/new-includes/components/image-text-row.html

@@ -323,9 +323,30 @@
   }
 }
 
-.image-text-column {
+.image-text-row {
   margin: 60px auto 70px;
 
+  &.background {
+    border-radius: 22px;
+    padding: 28px 50px 25px 50px;
+    background: var(--get-started-card-primary-bg);
+    box-sizing: border-box;
+
+    .card-wrapper:first-child {
+      // Maintain vertical space when there is no headline
+      margin-top: 10px;
+    }
+
+    @media only screen and (max-width: 768px) {
+      padding-bottom: 8px;
+
+      .card-wrapper:first-child {
+        // Maintain vertical space when there is no headline
+        margin-top: 0;
+      }
+    }
+  }
+
   h2 {
     font-size: 48px;
     margin-bottom: 44px;

assets/stylesheets/new-stylesheets/pages/_get-started.scss

@@ -11,7 +11,7 @@ title: Use case
 
 {% include new-includes/components/card-grid.html content = site.data.new-data.get-started.cloud-services.tertiary-content-cloud-native %}
 
-{% include new-includes/components/image-text-column.html content = site.data.new-data.get-started.cloud-services.image-text-column %}
+{% include new-includes/components/image-text-row.html content = site.data.new-data.get-started.cloud-services.image-text-row %}
 
 {% include new-includes/components/headline-section.html content = site.data.new-data.get-started.cloud-services.headline-section %}
 

get-started/cloud-services/index.md

@@ -33,7 +33,9 @@ title: Storybook
     content=site.data.new-data.get-started.storybook.code-text-row
 %}
 
-{% include new-includes/components/image-text-column.html content = site.data.new-data.get-started.storybook.image-text-column %}
+{% include new-includes/components/image-text-row.html content = site.data.new-data.get-started.storybook.image-text-row %}
+
+{% include new-includes/components/image-text-row.html content = site.data.new-data.get-started.storybook.image-text-row-bg background = true %}
 
 {% include new-includes/components/headline-section.html content = site.data.new-data.get-started.storybook.headline-section %}