add tabs and card component styles and markup

Author: ghislaineguerin

addon/styles/addon.css

@@ -7,3 +7,5 @@
 @import "components/es-header.css";
 @import "components/es-page-header.css";
 @import "components/es-button.css";
+@import "components/es-tabs.css";
+@import "components/es-card.css";

addon/styles/components/es-card.css

@@ -0,0 +1,9 @@
+.card {
+  border: 1px solid var(--color-gray);
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+.card-content {
+  padding: 1em;
+}

addon/styles/components/es-tabs.css

@@ -0,0 +1,27 @@
+.tabs {
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.tabs-item {
+  flex-grow: 1;
+  text-align: center;
+  border-bottom: 2px solid var(--color-gray);
+}
+
+.tabs-link {
+  text-decoration: none;
+  font-size: var(--text-preset-1);
+  font-weight: 600;
+  color: var(--color-muted);
+  display: block;
+  padding: 1em;
+}
+
+.tabs-item--active {
+  border-bottom: 2px solid var(--color-ember-orange);
+}
+
+.tabs-item--active .tabs-link {
+  color: var(--color-ember-orange);
+}

addon/styles/global.css

@@ -4,6 +4,7 @@
   --color-light: #FFFFFF;
   --color-muted: #F4F6F8;
   --color-ember-orange: #E04E39;
+  --color-gray: #A2A3A8;
   --text-preset-1: 1rem;
   --text-preset-2: 1.2rem;
   --text-preset-3: 1.8rem;

tests/dummy/app/templates/index.hbs

@@ -18,13 +18,38 @@
   <div class="container">
     <h3 class="small bold">A Simple Component</h3>
     <p>Ember Components are a superset of HTML – that means <span class="bold">&lt;p&gt;Hello, world&lt;/p&gt;</span> is a full-fledged Ember Component! To pass data into Components, use the @ symbol along with an argument name.</p>
+    <div class="card">
+      <div class="card-content">
+        <h3 class="small bold">Discussion Forum</h3>
+        <p>Post and search longer-form questions in our public forum.</p>
+      </div>
+    </div>
   </div>
 </section>
 
 <section class="content-section dark center">
   <div class="container">
     <h2 class="large">Batteries are included</h2>
     <p>Ember’s out-of-the-box experience has everything you need to start building on day one, and keep shipping for years. Never wire together your own framework again.</p>
+    <div class="tabs">
+      <div class="tabs-item tabs-item--active">
+        <a class="tabs-link" href="#">Build Pipeline</a>
+      </div>
+      <div class="tabs-item">
+        <a class="tabs-link" href="#">Routing</a>
+      </div>
+      <div class="tabs-item">
+        <a class="tabs-link" href="#">Data Layer</a>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-content">
+        <h3 class="small bold">Discussion Forum</h3>
+        <p>Post and search longer-form questions in our public forum.</p>
+      </div>
+    </div>
     <p class="medium">Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command.</p>
   </div>
-</section>
+</section>
+