feat(tutorial): complete step 4

src/app/home/home.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { InfoModule } from "./../info/info.module";
 
 import { HomeRoutingModule } from './home-routing.module';
 import { LandingPageComponent } from './landing-page/landing-page.component';
@@ -18,7 +19,8 @@ import {
 		BreadcrumbModule,
 		ButtonModule,
 		GridModule,
-		TabsModule
+		TabsModule,
+		InfoModule
 	]
 })
 export class HomeModule { }

src/app/home/landing-page/landing-page.component.html

@@ -31,11 +31,7 @@ <h2 class="landing-page__subheading">
 								<button ibmButton>Learn more</button>
 							</div>
 							<div ibmCol class="bx--offset-lg-1" [columnNumbers]="{'md': 4, 'lg': 8}">
-								<img
-								class="landing-page__illo"
-								src="../../../assets/tab-illo.png"
-								alt="Carbon illustration"
-								/>
+								<img class="landing-page__illo" src="../../../assets/tab-illo.png" alt="Carbon illustration" />
 							</div>
 						</div>
 					</div>
@@ -44,7 +40,8 @@ <h2 class="landing-page__subheading">
 					<div ibmGrid class="bx--grid--no-gutter bx--grid--full-width">
 						<div ibmRow class="landing-page__tab-content">
 							<div ibmCol [columnNumbers]="{'lg': 16}">
-								Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.
+								Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to
+								get started.
 							</div>
 						</div>
 					</div>
@@ -53,20 +50,14 @@ <h2 class="landing-page__subheading">
 					<div ibmGrid class="bx--grid--no-gutter bx--grid--full-width">
 						<div ibmRow class="landing-page__tab-content">
 							<div ibmCol [columnNumbers]="{'lg': 16}">
-								Carbon provides styles and components in Vanilla, React, Angular, and Vue for anyone building on the web.
+								Carbon provides styles and components in Vanilla, React, Angular, and Vue for anyone building on the
+								web.
 							</div>
 						</div>
 					</div>
 				</ibm-tab>
 			</ibm-tabs>
 		</div>
 	</div>
-	<div ibmRow class="landing-page__r3">
-		<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
-			<h3 class="landing-page__label">The Principles</h3>
-		</div>
-		<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Open</div>
-		<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Modular</div>
-		<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Consistent</div>
-	</div>
-</div>
+	<app-info-section></app-info-section>
+</div>

src/app/info/info-card/info-card.component.html

@@ -0,0 +1,10 @@
+<div class="info-card">
+  <h4 class="info-card__heading">
+    {{splitHeading[0]}}
+    <strong>{{splitHeading[1]}}</strong>
+  </h4>
+  <div class="info-card__body">{{content}}</div>
+  <div class="info-card__icon">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/info/info-card/info-card.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: "app-info-card",
+  templateUrl: "./info-card.component.html",
+  styleUrls: ["./info-card.component.scss"],
+})
+export class InfoCardComponent implements OnInit {
+  @Input() heading;
+  @Input() content;
+  splitHeading;
+
+  constructor() {}
+
+  ngOnInit() {
+    // create the split title to get bold styles
+    this.splitHeading = this.createArrayFromPhrase(this.heading);
+  }
+
+  // Take in a phrase and separate the third word in an array
+  createArrayFromPhrase(phrase) {
+    const splitPhrase = phrase.split(" ");
+    const thirdWord = splitPhrase.pop();
+    return [splitPhrase.join(" "), thirdWord];
+  }
+}

src/app/info/info-card/info-card.components.scss

@@ -0,0 +1,25 @@
+@import "~carbon-components/scss/globals/scss/typography";
+@import "~carbon-components/scss/globals/scss/layout";
+
+.info-card {
+	display: flex;
+	flex-direction: column;
+
+	.info-card__heading {
+		@include carbon--type-style("productive-heading-03");
+	}
+
+	.info-card__body {
+		margin-top: $spacing-06;
+		flex-grow: 1;
+		@include type-style("body-long-01");
+
+		// prevent large line lengths between small and medium viewports
+		@include carbon--breakpoint-between(321px, md) {
+			max-width: 75%;
+		}
+	}
+	info-card__icon {
+		margin-top: $spacing-09;
+	}
+}

src/app/info/info-section/info-section.component.html

@@ -0,0 +1,14 @@
+<section ibmRow class="info-section info-section__r1">
+  <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
+    <h3 class="info-section__heading">{{heading}}</h3>
+  </div>
+  <app-info-card ibmCol [columnNumbers]="{'md': 4, 'lg': 4}" [heading]="items[0].heading" [content]="items[0].content">
+    <ibm-icon-person-favorite32></ibm-icon-person-favorite32>
+  </app-info-card>
+  <app-info-card ibmCol [columnNumbers]="{'md': 4, 'lg': 4}" [heading]="items[1].heading" [content]="items[1].content">
+    <ibm-icon-application32></ibm-icon-application32>
+  </app-info-card>
+  <app-info-card ibmCol [columnNumbers]="{'md': 4, 'lg': 4}" [heading]="items[2].heading" [content]="items[2].content">
+    <ibm-icon-globe32></ibm-icon-globe32>
+  </app-info-card>
+</section>

src/app/info/info-section/info-section.component.scss

@@ -0,0 +1,61 @@
+@import "~carbon-components/scss/globals/scss/typography";
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family";
+
+@mixin info-section-background() {
+  background-color: $ui-01;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -$spacing-05;
+    top: 0;
+    right: -$spacing-05;
+    bottom: 0;
+    background: $ui-01;
+    z-index: -1;
+  }
+}
+
+.info-section {
+  @include info-section-background;
+  display: flex;
+  height: fit-content;
+
+  &.info-section__r1 {
+    padding-top: $spacing-09;
+    padding-bottom: $spacing-09;
+    height: auto;
+  }
+
+  .info-section__heading {
+    @include carbon--type-style("heading-01");
+    @include carbon--font-weight("semibold");
+  }
+
+  app-info-card {
+    margin-top: $spacing-09;
+  }
+// top border in only small breakpoints to prevent overrides
+  @include carbon--breakpoint-down(md) {
+    app-info-card:not(:nth-child(2)) {
+      border-top: 1px solid $ui-03;
+      padding-top: $spacing-09;
+    }
+  }
+
+  // left border in just the 2nd column items
+  @include carbon--breakpoint(md) {
+    app-info-card:nth-child(odd) {
+      border-left: 1px solid $ui-03;
+    }
+  }
+
+  // left border in all items
+  @include carbon--breakpoint(lg) {
+    app-info-card {
+      margin-top: 0;
+      border-left: 1px solid $ui-03;
+    }
+  }
+}

src/app/info/info-section/info-section.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import * as data from '../info.json';
+
+@Component({
+	selector: 'app-info-section',
+	templateUrl: './info-section.component.html',
+	styleUrls: ['./info-section.component.scss']
+})
+export class InfoSectionComponent implements OnInit {
+	heading = data.title;
+	items = data.items;
+
+	constructor() { }
+
+	ngOnInit(): void {
+
+	}
+
+}

src/app/info/info.json

@@ -0,0 +1,17 @@
+{
+  "title": "The Principles",
+  "items": [
+    {
+      "heading": "Carbon is Open",
+      "content": "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."
+    },
+    {
+      "heading": "Carbon is Modular",
+      "content": "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."
+    },
+    {
+      "heading": "Carbon is Consistent",
+      "content": "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."
+    }
+  ]
+}

src/app/info/info.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { GridModule } from "carbon-components-angular";
+
+import { PersonFavorite32Module } from "@carbon/icons-angular/lib/person--favorite/32";
+import { Globe32Module } from "@carbon/icons-angular/lib/globe/32";
+import { Application32Module } from "@carbon/icons-angular/lib/application/32";
+
+
+import { InfoSectionComponent } from './info-section/info-section.component';
+import { InfoCardComponent } from './info-card/info-card.component';
+
+@NgModule({
+    declarations: [InfoCardComponent, InfoSectionComponent],
+    imports: [
+        CommonModule,
+        GridModule,    
+        PersonFavorite32Module,
+        Globe32Module,
+        Application32Module,
+    ],
+    exports:  [InfoCardComponent, InfoSectionComponent]
+})
+export class InfoModule { }

tsconfig.json

@@ -8,6 +8,8 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "target": "es2015",
     "lib": [
       "es2016",