diff --git a/src/elements/Icon/index.d.ts b/src/elements/Icon/index.d.ts
index ce3c972e22..538582c5cc 100644
--- a/src/elements/Icon/index.d.ts
+++ b/src/elements/Icon/index.d.ts
@@ -3,7 +3,7 @@ import {SemanticCOLORS, SemanticROTATION} from '../..';
 
 type ICON_SIZES = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
 
-interface IconProps {
+export interface IconProps {
   [key: string]: any;
 
   /** An element type to render as (string or function). */
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index a224591ec8..31dc725c05 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -21,7 +21,7 @@ import ListItem from './ListItem'
 import ListList from './ListList'
 
 /**
- * A list groups related content
+ * A list groups related content.
  */
 function List(props) {
   const {
@@ -38,8 +38,8 @@ function List(props) {
     link,
     ordered,
     relaxed,
-    size,
     selection,
+    size,
     verticalAlign,
   } = props
 
@@ -78,12 +78,6 @@ function List(props) {
 List._meta = {
   name: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    floated: SUI.FLOATS,
-    relaxed: ['very'],
-    size: SUI.SIZES,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 List.propTypes = {
@@ -109,7 +103,7 @@ List.propTypes = {
   divided: PropTypes.bool,
 
   /** An list can be floated left or right. */
-  floated: PropTypes.oneOf(List._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** A list can be formatted to have items appear horizontally. */
   horizontal: PropTypes.bool,
@@ -129,17 +123,17 @@ List.propTypes = {
   /** A list can relax its padding to provide more negative space. */
   relaxed: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(List._meta.props.relaxed),
+    PropTypes.oneOf(['very']),
   ]),
 
   /** A selection list formats list items as possible choices. */
   selection: PropTypes.bool,
 
   /** A list can vary in size. */
-  size: PropTypes.oneOf(List._meta.props.size),
+  size: PropTypes.oneOf(SUI.SIZES),
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(List._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 List.Content = ListContent
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 9cf07481d4..256f9ba768 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -12,10 +12,12 @@ import {
   useValueAndKey,
   useVerticalAlignProp,
 } from '../../lib'
-
 import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
 
+/**
+ * A list item can contain a content.
+ */
 function ListContent(props) {
   const {
     children,
@@ -53,10 +55,6 @@ ListContent._meta = {
   name: 'ListContent',
   parent: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    floated: SUI.FLOATS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 ListContent.propTypes = {
@@ -76,13 +74,13 @@ ListContent.propTypes = {
   description: customPropTypes.itemShorthand,
 
   /** An list content can be floated left or right. */
-  floated: PropTypes.oneOf(ListContent._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** Shorthand for ListHeader. */
   header: customPropTypes.itemShorthand,
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(ListContent._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 ListContent.create = createShorthandFactory(ListContent, content => ({ content }))
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index 9c3c354f2b..e6327d0cd4 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A list item can contain a description.
+ */
 function ListDescription(props) {
   const { children, className, content } = props
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
   const ElementType = getElementType(ListDescription, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ListDescription._meta = {
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index 8fa027c5a2..ed70431ba0 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A list item can contain a header.
+ */
 function ListHeader(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'header')
+  const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
   const ElementType = getElementType(ListHeader, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ListHeader._meta = {
diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js
index 7f3acea137..0c084cfd64 100644
--- a/src/elements/List/ListIcon.js
+++ b/src/elements/List/ListIcon.js
@@ -10,6 +10,9 @@ import {
 } from '../../lib'
 import Icon from '../Icon/Icon'
 
+/**
+ * A list item can contain an icon.
+ */
 function ListIcon(props) {
   const { className, verticalAlign } = props
   const classes = cx(
@@ -25,9 +28,6 @@ ListIcon._meta = {
   name: 'ListIcon',
   parent: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 ListIcon.propTypes = {
@@ -35,7 +35,7 @@ ListIcon.propTypes = {
   className: PropTypes.string,
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(ListIcon._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 ListIcon.create = createShorthandFactory(ListIcon, name => ({ name }))
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index 26c3a8eee5..8c6de809de 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { isValidElement, PropTypes } from 'react'
 
 import {
@@ -17,6 +17,9 @@ import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
 import ListIcon from './ListIcon'
 
+/**
+ * A list item can contain a set of items.
+ */
 function ListItem(props) {
   const {
     active,
@@ -42,7 +45,7 @@ function ListItem(props) {
   const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
 
   if (!_.isNil(children)) {
-    return <ElementType {...rest} role='listitem' className={classes} {...valueProp}>{children}</ElementType>
+    return <ElementType {...rest} {...valueProp} role='listitem' className={classes}>{children}</ElementType>
   }
 
   const iconElement = ListIcon.create(icon)
@@ -51,7 +54,7 @@ function ListItem(props) {
   // See description of `content` prop for explanation about why this is necessary.
   if (!isValidElement(content) && _.isPlainObject(content)) {
     return (
-      <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
         {iconElement || imageElement}
         {ListContent.create(content, { header, description })}
       </ElementType>
@@ -63,7 +66,7 @@ function ListItem(props) {
 
   if (iconElement || imageElement) {
     return (
-      <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
         {iconElement || imageElement}
         {(content || headerElement || descriptionElement) && (
           <ListContent>
@@ -77,7 +80,7 @@ function ListItem(props) {
   }
 
   return (
-    <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+    <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
       {headerElement}
       {descriptionElement}
       {content}
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 9290f9ace7..8ba1641634 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A list can contain a sub list.
+ */
 function ListList(props) {
   const { children, className } = props
 
diff --git a/src/elements/List/index.d.ts b/src/elements/List/index.d.ts
index 51bb61b5a8..8da449154f 100644
--- a/src/elements/List/index.d.ts
+++ b/src/elements/List/index.d.ts
@@ -1,12 +1,21 @@
-import { ReactMouseEvents, SemanticFLOATS, SemanticSIZES, SemanticVERTICALALIGNMENTS } from '../..';
 import * as React from 'react';
 
-interface ListProps extends ReactMouseEvents<any> {
-  animated?: boolean;
+import {
+  SemanticFLOATS,
+  SemanticSIZES,
+  SemanticVERTICALALIGNMENTS
+} from '../..';
+import { IconProps } from '../Icon';
+
+interface ListProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** A list can animate to set the current item apart from the list. */
+  animated?: boolean;
+
   /** A list can mark items with a bullet. */
   bulleted?: boolean;
 
@@ -32,7 +41,7 @@ interface ListProps extends ReactMouseEvents<any> {
   inverted?: boolean;
 
   /** Shorthand array of props for ListItem. */
-  items?: any;
+  items?: Array<any>;
 
   /** A list can be specially formatted for navigation links. */
   link?: boolean;
@@ -53,7 +62,7 @@ interface ListProps extends ReactMouseEvents<any> {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 }
 
-interface ListClass extends React.ComponentClass<ListProps> {
+interface ListComponent extends React.StatelessComponent<ListProps> {
   Content: typeof ListContent;
   Description: typeof ListDescription;
   Header: typeof ListHeader;
@@ -62,9 +71,11 @@ interface ListClass extends React.ComponentClass<ListProps> {
   List: typeof ListList;
 }
 
-export const List: ListClass;
+export const List: ListComponent;
 
 interface ListContentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -90,9 +101,11 @@ interface ListContentProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 }
 
-export const ListContent: React.ComponentClass<ListContentProps>;
+export const ListContent: React.StatelessComponent<ListContentProps>;
 
 interface ListDescriptionProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -103,12 +116,14 @@ interface ListDescriptionProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const ListDescription: React.ComponentClass<ListDescriptionProps>;
+export const ListDescription: React.StatelessComponent<ListDescriptionProps>;
 
 interface ListHeaderProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -119,28 +134,26 @@ interface ListHeaderProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const ListHeader: React.ComponentClass<ListHeaderProps>;
+export const ListHeader: React.StatelessComponent<ListHeaderProps>;
 
-interface ListIconProps extends ReactMouseEvents<any> {
-  /** Additional classes. */
-  className?: string;
-
-  /** An element inside a list can be vertically aligned. */
-  name?: string;
+interface ListIconProps extends IconProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 }
 
-export const ListIcon: React.ComponentClass<ListIconProps>;
+export const ListIcon: React.StatelessComponent<ListIconProps>;
 
-interface ListItemProps extends ReactMouseEvents<any> {
-  active?: boolean;
+interface ListItemProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** A list item can active. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
@@ -169,9 +182,11 @@ interface ListItemProps extends ReactMouseEvents<any> {
   value?: string;
 }
 
-export const ListItem: React.ComponentClass<ListItemProps>;
+export const ListItem: React.StatelessComponent<ListItemProps>;
 
 interface ListListProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -182,4 +197,4 @@ interface ListListProps {
   className?: string;
 }
 
-export const ListList: React.ComponentClass<ListListProps>;
+export const ListList: React.StatelessComponent<ListListProps>;
diff --git a/test/specs/elements/List/ListContent-test.js b/test/specs/elements/List/ListContent-test.js
index c240e16816..1695070cd0 100644
--- a/test/specs/elements/List/ListContent-test.js
+++ b/test/specs/elements/List/ListContent-test.js
@@ -1,14 +1,15 @@
 import faker from 'faker'
 import React from 'react'
-import * as common from 'test/specs/commonTests'
 
 import ListContent from 'src/elements/List/ListContent'
+import * as common from 'test/specs/commonTests'
 
 describe('ListContent', () => {
   common.isConformant(ListContent)
   common.rendersChildren(ListContent)
 
   common.implementsVerticalAlignProp(ListContent)
+
   common.propKeyAndValueToClassName(ListContent, 'floated')
 
   describe('shorthand', () => {
diff --git a/test/specs/elements/List/ListDescription-test.js b/test/specs/elements/List/ListDescription-test.js
index 0e1177f112..9482219915 100644
--- a/test/specs/elements/List/ListDescription-test.js
+++ b/test/specs/elements/List/ListDescription-test.js
@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import ListDescription from 'src/elements/List/ListDescription'
+import * as common from 'test/specs/commonTests'
 
 describe('ListDescription', () => {
   common.isConformant(ListDescription)
diff --git a/test/specs/elements/List/ListHeader-test.js b/test/specs/elements/List/ListHeader-test.js
index fe29235f56..f44973962d 100644
--- a/test/specs/elements/List/ListHeader-test.js
+++ b/test/specs/elements/List/ListHeader-test.js
@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import ListHeader from 'src/elements/List/ListHeader'
+import * as common from 'test/specs/commonTests'
 
 describe('ListHeader', () => {
   common.isConformant(ListHeader)
diff --git a/test/specs/elements/List/ListIcon-test.js b/test/specs/elements/List/ListIcon-test.js
index 4d1a2f4a35..7c1811c230 100644
--- a/test/specs/elements/List/ListIcon-test.js
+++ b/test/specs/elements/List/ListIcon-test.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import * as common from 'test/specs/commonTests'
 
 import Icon from 'src/elements/Icon/Icon'
 import ListIcon from 'src/elements/List/ListIcon'
+import * as common from 'test/specs/commonTests'
 
 describe('ListIcon', () => {
   common.isConformant(ListIcon)
diff --git a/test/specs/elements/List/ListItem-test.js b/test/specs/elements/List/ListItem-test.js
index 0299d722d9..65cd331cac 100644
--- a/test/specs/elements/List/ListItem-test.js
+++ b/test/specs/elements/List/ListItem-test.js
@@ -1,11 +1,11 @@
-import _ from 'lodash'
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
-import * as common from 'test/specs/commonTests'
-import { sandbox } from 'test/utils'
 
 import ListItem from 'src/elements/List/ListItem'
 import ListContent from 'src/elements/List/ListContent'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 describe('ListItem', () => {
   common.isConformant(ListItem)
diff --git a/test/specs/elements/List/ListList-test.js b/test/specs/elements/List/ListList-test.js
index a255abc38f..19d2b69bc6 100644
--- a/test/specs/elements/List/ListList-test.js
+++ b/test/specs/elements/List/ListList-test.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import * as common from 'test/specs/commonTests'
 
 import ListList from 'src/elements/List/ListList'
+import * as common from 'test/specs/commonTests'
 
 describe('ListList', () => {
   common.isConformant(ListList)