`
+as shown in the example).
+
+```html
+
+
+
+ {{message.from}}
+
+ {{message.subject}}
+ -- {{message.content}}
+
+
+
+
+
+
+
+ {{message.from}}
+ {{message.subject}}
+ {{message.content}}
+
+
+```
+
+### Lists with avatars
+To include an avatar, add an image tag with an `md-list-avatar` attribute.
+
+```html
+
+
+ 
+ {{message.from}}
+
+ {{message.subject}}
+ -- {{message.content}}
+
+
+
+```
+
+### Dense lists
+Lists are also available in "dense layout" mode, which shrinks the font size and height of the list
+to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute
+to the main `md-list` tag.
+
+
+```html
+
+ Pepper
+ Salt
+ Paprika
+
+```
+
+
+### Lists with multiple sections
+
+Subheader can be added to a list by annotating a heading tag with an `md-subheader` attribute.
+To add a divider, use ``.
+
+```html
+
+ Folders
+
+ folder
+ {{folder.name}}
+ {{folder.updated}}
+
+ Notes
+
+ note
+ {{note.name}}
+ {{note.updated}}
+
+
+```
diff --git a/src/lib/menu/OVERVIEW.md b/src/lib/menu/OVERVIEW.md
new file mode 100644
index 00000000000..44650a524bb
--- /dev/null
+++ b/src/lib/menu/OVERVIEW.md
@@ -0,0 +1,62 @@
+`` is a floating panel containing list of options.
+
+
+
+By itself, the `` element does not render anything. The menu is attached to and opened
+via application of the `mdMenuTriggerFor` directive:
+```ts
+
+
+
+
+
+
+```
+
+### Toggling the menu programmatically
+The menu exposes an API to open/close programmatically. Please note that in this case, an
+`mdMenuTriggerFor` directive is still necessary to attach the menu to a trigger element in the DOM.
+
+```ts
+class MyComponent {
+ @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
+
+ someMethod() {
+ this.trigger.openMenu();
+ }
+}
+```
+
+### Icons
+Menus support displaying `md-icon` elements before the menu item text.
+
+*my-comp.html*
+```html
+
+
+
+
+
+```
+
+### Customizing menu position
+
+By default, the menu will display after and below its trigger. The position can be changed
+using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes.
+
+
+### Keyboard interaction
+- DOWN_ARROW: Focuses the next menu item
+- UP_ARROW: Focuses previous menu item
+- ENTER: Activates the focused menu item
diff --git a/src/lib/progress-bar/OVERVIEW.md b/src/lib/progress-bar/OVERVIEW.md
new file mode 100644
index 00000000000..b2fbf54d63b
--- /dev/null
+++ b/src/lib/progress-bar/OVERVIEW.md
@@ -0,0 +1,30 @@
+`` is a horizontal progress-bar for indicating progress and activity.
+
+
+
+
+### Progress mode
+The progress-bar supports four modes.
+
+| Mode | Description |
+|---------------|----------------------------------------------------------------------------------|
+| determinate | Standard progress bar, fills from 0% to 100% |
+| indeterminate | Indicates that something is happening without conveying a discrete progress |
+| buffer | Dual-progress mode, typically showing both video download and playback progress |
+| query | Dual-stage mode, typically showing sending a request and downloading a response |
+
+The default mode is "determinate". In this mode, the progress is set via the `value` property,
+which can be a whole number between 0 and 100.
+
+In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is
+used to show the additional buffering progress.
+
+In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response
+progress is available, the `mode` should be changed to determinate to convey the progress.
+
+In both "indeterminate" and "query" modes, the `value` property is ignored.
+
+
+### Theming
+The color of a progress-bar can be changed by using the `color` property. By default, progress-bars
+use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
diff --git a/src/lib/progress-spinner/OVERVIEW.md b/src/lib/progress-spinner/OVERVIEW.md
new file mode 100644
index 00000000000..b9b2adf724e
--- /dev/null
+++ b/src/lib/progress-spinner/OVERVIEW.md
@@ -0,0 +1,23 @@
+`` and `` are a circular indicators of progress and activity.
+
+
+
+### Progress mode
+The progress-spinner supports two modes, "determinate" and "indeterminate".
+The `` component is an alias for ``.
+
+| Mode | Description |
+|---------------|----------------------------------------------------------------------------------|
+| determinate | Standard progress indicator, fills from 0% to 100% |
+| indeterminate | Indicates that something is happening without conveying a discrete progress |
+
+
+The default mode is "determinate". In this mode, the progress is set via the `value` property,
+which can be a whole number between 0 and 100.
+
+In "indeterminate" mode, the `value` property is ignored.
+
+
+### Theming
+The color of a progress-spinner can be changed by using the `color` property. By default,
+progress-spinners use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
diff --git a/src/lib/radio/OVERVIEW.md b/src/lib/radio/OVERVIEW.md
new file mode 100644
index 00000000000..776f7c758a0
--- /dev/null
+++ b/src/lib/radio/OVERVIEW.md
@@ -0,0 +1,29 @@
+`` provides the same functionality as a native `` enhanced with
+Material Design styling and animations.
+
+
+
+All radio buttons with the same `name` comprise a set from which only one may be selected at a time.
+
+### Radio-button label
+The radio-button label is provided as the content to the `` element. The label can be
+positioned before or after the radio-button by setting the `labelPosition` property to `'before'`
+or `'after'`.
+
+If you don't want the label to appear next to the radio-button, you can use
+[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or
+[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to
+specify an appropriate label.
+
+
+### Radio groups
+Radio-buttons should typically be placed inside of an `` unless the DOM structure
+would make that impossible (e.g., radio buttons inside of table cells). The radio-group has a
+`value` property that reflects the currently selected radio-button inside of the group.
+
+Individual radio-buttons inside of a radio-group will inherit the `name` of the group.
+
+
+### Use with `@angular/forms`
+`` is compatible with `@angular/forms` and supports both `FormsModule`
+and `ReactiveFormsModule`.
diff --git a/src/lib/select/OVERVIEW.md b/src/lib/select/OVERVIEW.md
new file mode 100644
index 00000000000..27aee5f25dd
--- /dev/null
+++ b/src/lib/select/OVERVIEW.md
@@ -0,0 +1,8 @@
+`` is a form control for selecting a value from a set of options, similar to the native
+`
{{message.from}}
++ {{message.subject}} + -- {{message.content}} +
+{{message.from}}
+{{message.subject}}
+{{message.content}}
+{{message.from}}
++ {{message.subject}} + -- {{message.content}} +
+Folders
+{{folder.name}}
+{{folder.updated}}
+Notes
+{{note.name}}
+{{note.updated}}
+