Website: Make titles on GetStarted page clickable

apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss

@@ -47,23 +47,31 @@
   background-color:$color-getStarted-darker;
   color: $ms-color-neutralLighter;
 
-  a, a:visited,
+  a:not(.title), a:visited, a:hover.title,
   .getStartedLink {
     border-bottom: 1px solid $ms-color-neutralLight;
   }
 
+  a.title {
+    border-bottom: 1px solid transparent;
+  }
+
   a, a:hover, a:active,
   .getStartedLink {
     color: $ms-color-neutralLight;
   }
 }
 
 .feature {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
   margin-bottom: 32px;
 
+  .featureImage {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
   img {
     height: 100%;
     margin-bottom: 8px;
@@ -91,7 +99,7 @@
   font-size: $font-size-big;
   font-weight: $ms-font-weight-semilight;
   margin-bottom: $contentMargin-vertical;
-  width: 100%;
+  display: table;
 }
 
 @media screen and (max-width: $uhf-screen-max-mobile) {

apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx

@@ -49,26 +49,31 @@ export class GetStartedPage extends React.Component<any, any> {
           <div className='ms-Grid ms-Grid--wide'>
             <div className={ css('ms-Grid-row', styles.contentInGrid) }>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg' } alt='Illustration of Typography and color swatches.' />
-                <div className={ styles.title }>Styles</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg' } alt='Illustration of Typography and color swatches.' />
+                </div>
+                <a className={ styles.title } href={ '#/styles' }>Styles</a>
                 <div className={ styles.description }>Fabric gives you access to Segoe, Microsoft&rsquo;s official typeface, along with the color palette, type ramp, icons, and responsive grid for Office 365.</div>
               </div>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg' } alt='Illustration of Icons' />
-                <div className={ styles.title }>Icons</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg' } alt='Illustration of Icons' />
+                </div>
+                <a className={ styles.title } href={ '#/styles/icons' }>Icons</a>
                 <div className={ styles.description }>Fabric includes Office&rsquo;s official product icons. Fabric also provides a suite of product and document symbols, so you can use the same metaphors we use.</div>
               </div>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg' } alt='Illustration of Components' />
-                <div className={ styles.title }>Components</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg' } alt='Illustration of Components' />
+                </div>
+                <a className={ styles.title } href={ '#/components' }>Components</a>
                 <div className={ styles.description }>Components are the building blocks of your UI. Fabric has a variety of components, including navigation, commands, containers, and content.</div>
               </div>
             </div>
           </div>
           <div id='toolkit'>
-            <span className={ styles.title }>Design Toolkit</span>
+            <a className={ styles.title } href='#/resources'>Design Toolkit</a>
             <span className={ styles.descriptionLarge }>The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable you to create seamless, beautiful Office experiences.</span>
-            <a className={ styles.getStartedLink } href='#/resources'>Learn more</a>
           </div>
         </div>
 

common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "GetStarted page: Give titles links to their corresponding pages.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}