swap default with badge slot. update component implementation on page

microsoft · May 8, 2020 · fb27458 · fb27458
1 parent dbff5ed
commit fb27458
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }