feat(tutorial): complete step 4

src/components/InfoSection/InfoCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="info-card cds--col-md-4 cds--col-lg-4 cds--col-xlg-3 cds--offset-xlg-1"
+  >
+    <h4 class="info-card__heading">
+      {{ splitHeading[0] }}
+      <strong>{{ splitHeading[1] }}</strong>
+    </h4>
+    <p class="info-card__body">{{ body }}</p>
+    <component :is="icon" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoCard',
+  props: {
+    heading: String,
+    body: String,
+    icon: Object
+  },
+  computed: {
+    // Take in a phrase and separate the third word in an array
+    splitHeading() {
+      const splitHeading = this.heading.split(' ');
+      const finalWord = splitHeading.pop();
+      return [splitHeading.join(' '), finalWord];
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/carbon-utils';
+
+.info-card {
+  margin-top: $spacing-09;
+  display: flex;
+  flex-direction: column;
+
+  svg {
+    margin-top: $spacing-09;
+  }
+
+  // top border in only small breakpoints to prevent overrides
+  //   @include breakpoint-down(md) {
+  //     &:not(:nth-child(2)) {
+  //       border-top: 1px solid $ui-03;
+  //       padding-top: $spacing-09;
+  //     }
+  //   }
+
+  // left border in just the 2nd column items
+  //   @include breakpoint(md) {
+  //     &:nth-child(odd) {
+  //       border-left: 1px solid $ui-03;
+  //     }
+  //   }
+
+  // left border in all items
+  //   @include breakpoint(lg) {
+  //     margin-top: 0;
+  //     border-left: 1px solid $ui-03;
+
+  //     svg {
+  //       margin-top: $layout-06;
+  //     }
+  //   }
+}
+
+.info-card__heading {
+  @include type-style('productive-heading-03');
+}
+.info-card__body {
+  margin-top: $spacing-06;
+  flex-grow: 1; // fill space so icons are bottom aligned
+  @include type-style('body-long-01');
+
+  // prevent large line lengths between small and medium viewports
+  //   @include breakpoint-between(321px, md) {
+  //     max-width: 75%;
+  //   }
+}
+</style>

src/components/InfoSection/InfoSection.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="cds--row info-section">
+    <div class="cds--col-md-8 cds--col-lg-4 cds--col-xlg-3">
+      <h3 class="info-section__heading">{{ heading }}</h3>
+    </div>
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'InfoSection',
+  props: {
+    heading: String
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/_carbon-utils';
+
+.info-section__heading {
+  @include type-style('heading-01');
+}
+</style>

src/components/InfoSection/index.js

@@ -0,0 +1,4 @@
+import InfoSection from './InfoSection';
+import InfoCard from './InfoCard';
+
+export { InfoSection, InfoCard };

src/styles/_carbon.scss

@@ -1,6 +1,6 @@
-$feature-flags: (
-  grid-columns-16: true,
-);
+// $feature-flags: (
+//   grid-columns-16: true,
+// );
 
 @import 'carbon-components/scss/globals/scss/styles';
 @import './carbon-fixes';

src/views/LandingPage/LandingPage.vue

@@ -60,17 +60,52 @@
         </cv-tabs>
       </div>
     </div>
-    <div class="bx--row landing-page__r3">
-      <div class="bx--col-md-4 bx--col-lg-4">
-        <h3 class="landing-page__label">The Principles</h3>
-      </div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Open</div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Modular</div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Consistent</div>
-    </div>
+    <info-section heading="The Principles" class="landing-page__r3">
+      <info-section heading="The Principles" class="landing-page__r3">
+        <info-card
+          heading="Carbon is Open"
+          body="It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute."
+          :icon="PersonFavorite32"
+        />
+        <info-card
+          heading="Carbon is Modular"
+          body="Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user."
+          :icon="Application32"
+        />
+        <info-card
+          heading="Carbon is Consistent"
+          body="Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences."
+          :icon="Globe32"
+        />
+      </info-section>
+    </info-section>
   </div>
 </template>
 
+<script>
+import { InfoSection, InfoCard } from '../../components/InfoSection';
+//import { Globe32, PersonFavorite32, Application32 } from '@carbon/icons-vue';
+
+export default {
+  name: 'LandingPage',
+  components: {
+    InfoSection,
+    InfoCard
+    //Globe32,
+    //PersonFavorite32,
+    //Application32
+  },
+  created() {
+    // Add icons to this
+    Object.assign(this, {
+      Globe32,
+      PersonFavorite32,
+      Application32
+    });
+  }
+};
+</script>
+
 <style lang="scss">
 @import '../../styles/carbon-utils';
 @import './carbon-overrides';

src/views/LandingPage/_mixins.scss

@@ -12,8 +12,8 @@
     background: $ui-01;
   }
 
-  > * {
-    // lift above position absolute
-    position: relative;;
-  }
+  // > * {
+  //   // lift above position absolute
+  //   position: relative;;
+  // }
 }