docs: Update frontmatter for material-io site (#876)

Author: yeelan0319

packages/mdc-slider/README.md

@@ -2,6 +2,7 @@
 title: "Sliders"
 layout: detail
 section: components
+excerpt: "A select over a range of values by moving the slider thumb."
 iconId: slider
 path: /catalog/input-controls/sliders/
 -->
@@ -11,7 +12,7 @@ path: /catalog/input-controls/sliders/
 <!--<div class="article__asset">
   <a class="article__asset-link"
      href="https://material-components-web.appspot.com/slider.html">
-    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/sliders.png" width="400" alt="Select screenshot">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/slider.png" width="400" alt="Select screenshot">
   </a>
 </div>-->
 
@@ -187,7 +188,7 @@ use to build a custom MDCSlider component for their framework.
 | `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |
 | `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |
 | `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |
-| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()`` for this. |
+| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |
 | `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |
 | `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |
 | `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |

packages/mdc-tabs/README.md

@@ -1,3 +1,12 @@
+<!--docs:
+title: "Tabs"
+layout: detail
+section: components
+excerpt: "A tabbed navigation component."
+iconId: tabs
+path: /catalog/tabs/
+-->
+
 # MDC Tabs
 
 The MDC Tabs component contains components which are used to create spec-aligned tabbed navigation components adhering to the
@@ -7,6 +16,17 @@ The MDC Tabs component contains components which are used to create spec-aligned
 - **mdc-tab-bar**: The main component which is composed of `mdc-tab` elements
 - **mdc-tab-bar-scroller**: The component which controls the horizontal scrolling behavior of an `mdc-tab-bar` that overflows its container
 
+## Design & API Documentation
+
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/tabs.html">Material Design guidelines: Tabs</a>
+  </li>
+  <li class="icon-list-item icon-list-item--link">
+    <a href="http://material-components-web.appspot.com/tabs.html">Demo</a>
+  </li>
+</ul>
+
 ## Installation
 
 ```
@@ -109,7 +129,7 @@ provides a minimal example of how to do so using JavaScript, also shown below.
 
 #### Markup:
 ```html
-<section id="dynamic-demo-toolbar">  
+<section id="dynamic-demo-toolbar">
   <nav id="dynamic-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent" role="tablist">
     <a role="tab" aria-controls="panel-1"
        class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>