From fb274583274cad69e01fa09d5b375d94cc76d270 Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Thu, 7 May 2020 15:14:14 -0700
Subject: [PATCH] swap default with badge slot. update component implementation
 on page

---
 .../section-header/section-header.styles.ts   |  3 ++-
 .../section-header/section-header.template.ts |  2 +-
 sites/fast-website/src/public/index.html      | 20 +++++++++----------
 sites/fast-website/src/public/style.css       | 16 +++++++++++++++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/sites/fast-website/src/app/components/section-header/section-header.styles.ts b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
index 66a0232b31e..17f67780580 100755
--- a/sites/fast-website/src/app/components/section-header/section-header.styles.ts
+++ b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
@@ -2,7 +2,8 @@ import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-components";
 
 export const SectionHeaderStyles = css`
-    ${display("block")} :host {
+    ${display("flex")} :host {
+        flex-direction: column;
         font-family: var(--body-font);
         color: var(--neutral-foreground-rest);
         box-sizing: border-box;
diff --git a/sites/fast-website/src/app/components/section-header/section-header.template.ts b/sites/fast-website/src/app/components/section-header/section-header.template.ts
index fccdf120d7a..89c56e26126 100755
--- a/sites/fast-website/src/app/components/section-header/section-header.template.ts
+++ b/sites/fast-website/src/app/components/section-header/section-header.template.ts
@@ -3,8 +3,8 @@ import { SectionHeader } from "./section-header";
 
 export const SectionHeaderTemplate = html<SectionHeader>`
     <template>
-        <slot></slot>
         <slot name="badge"></slot>
+        <slot></slot>
         <slot name="body"></slot>
         <slot name="action"></slot>
     </template>
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
index f6380effce8..e483206d609 100644
--- a/sites/fast-website/src/public/index.html
+++ b/sites/fast-website/src/public/index.html
@@ -26,8 +26,8 @@
         <section class="section">
           <div class="section-content">
             <fast-section-header>
-              <h5>ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</h5>
-              <h1 slot="badge">The adaptive interface system for modern web experiences</h1>
+              <fast-badge slot="badge" class="section-badge">ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</fast-badge>
+              <p class="section-heading-hero">The adaptive interface system for modern web experiences</p>
               <p slot="body">Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.</p>
               <fast-button slot="action" appearance="outline">Get start</fast-button>
             </fast-section-header>
@@ -38,8 +38,8 @@ <h1 slot="badge">The adaptive interface system for modern web experiences</h1>
         <section class="section">
           <div class="section-content">
             <fast-section-header>
-              <h5>FLEXIBLE AND ADAPTABLE</h5>
-              <h1 slot="badge">One component, many faces</h1>
+              <fast-badge slot="badge" class="section-badge">FLEXIBLE AND ADAPTABLE</fast-badge>
+              <p class="section-heading">One component, many faces</p>
               <p slot="body">Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.</p>
               <fast-button slot="action" appearance="outline">Explore components</fast-button>
             </fast-section-header>
@@ -59,8 +59,8 @@ <h1 slot="badge">One component, many faces</h1>
         <section class="section">
           <div class="section-content">
             <fast-section-header>
-              <h5>FULLY INTEGRATED</h5>
-              <h1 slot="badge">Works with existing frameworks</h1>
+              <fast-badge slot="badge" class="section-badge">FULLY INTEGRATED</fast-badge>
+              <p class="section-heading">Works with existing frameworks</p>
               <fast-button slot="action" appearance="outline">Learn more</fast-button>
             </fast-section-header>
           </div>
@@ -77,8 +77,8 @@ <h1 slot="badge">Works with existing frameworks</h1>
         <section class="section">
           <div class="section-content">
             <fast-section-header>
-              <h5>A COMPREHENSIVE TOOLKIT</h5>
-              <h1 slot="badge">Feature and Utilities</h1>
+              <fast-badge slot="badge" class="section-badge">A COMPREHENSIVE TOOLKIT</fast-badge>
+              <p class="section-heading">Feature and Utilities</p>
               <fast-button slot="action" appearance="outline">Read documentation</fast-button>
             </fast-section-header>
           </div>
@@ -95,8 +95,8 @@ <h1 slot="badge">Feature and Utilities</h1>
         <section class="section">
           <div class="section-content">
             <fast-section-header>
-              <h5>LEARN, MODIFY AND FOLLOW</h5>
-              <h1 slot="badge">Join the community</h1>
+              <fast-badge slot="badge" class="section-badge">LEARN, MODIFY AND FOLLOW</fast-badge>
+              <p class="section-heading">Join the community</p>
             </fast-section-header>
           </div>
         </section>
diff --git a/sites/fast-website/src/public/style.css b/sites/fast-website/src/public/style.css
index f5af733fa81..272878184fa 100644
--- a/sites/fast-website/src/public/style.css
+++ b/sites/fast-website/src/public/style.css
@@ -49,4 +49,20 @@ body {
 
 .footer-copyright-group {
   display: flex;
+}
+
+.section-badge {
+  font-weight: bold;
+}
+
+.section-heading-hero {
+  font-size: 60px;
+  line-height: 72px;
+  margin: 0;
+}
+
+.section-heading {
+  font-size: 46px;
+  line-height: 56px;
+  margin: 0;
 }
\ No newline at end of file