diff --git a/docs/src/app/components/Card/ExampleWithAvatar.jsx b/docs/src/app/components/Card/ExampleWithAvatar.jsx
new file mode 100644
index 00000000000000..b24c8a6d609006
--- /dev/null
+++ b/docs/src/app/components/Card/ExampleWithAvatar.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import Avatar from 'material-ui/lib/avatar';
+import Card from 'material-ui/lib/card/card';
+import CardActions from 'material-ui/lib/card/card-actions';
+import CardHeader from 'material-ui/lib/card/card-header';
+import CardMedia from 'material-ui/lib/card/card-media';
+import CardTitle from 'material-ui/lib/card/card-title';
+import FlatButton from 'material-ui/lib/flat-button';
+import CardText from 'material-ui/lib/card/card-text';
+
+const CardExampleWithAvatar = React.createClass({
+ render() {
+ return (
+
+ A}/>
+
+ }>
+ 
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+ Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+ Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
+
+
+ );
+ },
+});
+export default CardExampleWithAvatar;
diff --git a/docs/src/app/components/Card/ExampleWithoutAvatar.jsx b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx
new file mode 100644
index 00000000000000..205fb138939bb0
--- /dev/null
+++ b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Card from 'material-ui/lib/card/card';
+import CardActions from 'material-ui/lib/card/card-actions';
+import CardHeader from 'material-ui/lib/card/card-header';
+import FlatButton from 'material-ui/lib/flat-button';
+import CardText from 'material-ui/lib/card/card-text';
+
+const CardExampleWithoutAvatar = React.createClass({
+ render() {
+ return (
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+ Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+ Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+ Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+ Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
+
+
+ );
+ },
+});
+export default CardExampleWithoutAvatar;
diff --git a/docs/src/app/components/Card/README.md b/docs/src/app/components/Card/README.md
new file mode 100644
index 00000000000000..da4287695b45c5
--- /dev/null
+++ b/docs/src/app/components/Card/README.md
@@ -0,0 +1,12 @@
+## Card
+
+A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an
+entry point to more detailed information. For example, a card could
+contain a photo, text, and a link about a single subject.
+
+Cards have a constant width and variable height. The maximum height is
+limited to the height of the available space on a platform,
+but it can temporarily expand (for example, to display a comment field).
+Cards do not flip over to reveal information on the back.
+
+### Examples
diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
index 1b527326e0acef..1af88bad946e43 100644
--- a/docs/src/app/components/pages/components/cards.jsx
+++ b/docs/src/app/components/pages/components/cards.jsx
@@ -1,169 +1,32 @@
import React from 'react';
-import mui from 'material-ui';
-import ComponentDoc from '../../component-doc';
+import cardCode from '!raw!material-ui/lib/card/card';
import CodeExample from '../../code-example/code-example';
-
-const {
- Avatar,
- Card,
- CardActions,
- CardHeader,
- CardMedia,
- CardText,
- CardTitle,
- FlatButton,
- Paper,
-} = mui;
-import Code from 'cards-code';
-import CodeBlock from '../../code-example/code-block';
+import PropTypeDescription from '../../PropTypeDescription';
+import MarkdownElement from '../../MarkdownElement';
+import CardExampleWithAvatar from '../../Card/ExampleWithAvatar';
+import cardExampleWithAvatarCode from '!raw!../../Card/ExampleWithAvatar';
+import CardExampleWithoutAvatar from '../../Card/ExampleWithoutAvatar';
+import cardExampleWithoutAvatarCode from '!raw!../../Card/ExampleWithoutAvatar';
+import cardReadmeText from '../../Card/README';
export default class CardPage extends React.Component {
constructor(props) {
super(props);
-
- this.desc =
- 'A card is a piece of paper with unique related data that serves as an ' +
- 'entry point to more detailed information. For example, a card could ' +
- 'contain a photo, text, and a link about a single subject.' +
- '\n\n' +
- 'Cards have a constant width and variable height. The maximum height is ' +
- 'limited to the height of the available space on a platform, ' +
- 'but it can temporarily expand (for example, to display a comment field). ' +
- 'Cards do not flip over to reveal information on the back.';
-
-
- this.componentInfo = [
- {
- name: 'Card.Props',
- infoArray: [
- {
- name: 'initiallyExpanded',
- type: 'bool',
- header: 'optional',
- desc: 'Whether this card is initially expanded.',
- },
- ],
- },
- {
- name: 'Props',
- infoArray: [
- {
- name: 'expandable',
- type: 'bool',
- header: 'optional',
- desc: 'Whether this card component is expandable. Can be set on any child of the Card component.',
- },
- {
- name: 'actAsExpander',
- type: 'bool',
- header: 'optional',
- desc: 'Whether a click on this card component expands the card. ' +
- 'Can be set on any child of the Card component.',
- },
- {
- name: 'showExpandableButton',
- type: 'bool',
- header: 'optional',
- desc: 'Whether this card component include a button to expand the card. CardTitle, CardHeader ' +
- 'and CardActions implement showExpandableButton. Any child component of Card can implements ' +
- 'showExpandableButton or forwards the property to a child component supporting it.',
- },
- {
- name: 'style',
- type: 'object',
- header: 'optional',
- desc: 'Override the inline-styles of the card\'s root element.',
- },
- ],
- },
- {
- name: 'Card.Events',
- infoArray: [
- {
- name: 'onExpandChange',
- type: 'function(isExpanded)',
- header: 'optional',
- desc: 'Fired when the expandable state changes.',
- },
- ],
- },
- ];
}
render() {
return (
-
-
-
-
- {
- '//Import statements:\nimport Card from \'material-ui/lib/card/card\';\n' +
- 'import CardActions from \'material-ui/lib/card/card-actions\';\n' +
- 'import CardHeader from \'material-ui/lib/card/card-header\';\n' +
- 'import CardMedia from \'material-ui/lib/card/card-media\';\n' +
- 'import CardText from \'material-ui/lib/card/card-text\';\n' +
- 'import CardTitle from \'material-ui/lib/card/card-title\';\n\n' +
- '//See material-ui/lib/index.js for more\n'
- }
-
-
-
-
-
- A}/>
-
- }>
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
+
);
}
-
}
diff --git a/docs/src/app/components/raw-code/cards-code.txt b/docs/src/app/components/raw-code/cards-code.txt
deleted file mode 100644
index 1a984330e8cfa2..00000000000000
--- a/docs/src/app/components/raw-code/cards-code.txt
+++ /dev/null
@@ -1,50 +0,0 @@
-
- A}/>
-
- }>
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
-
-
- A}
- actAsExpander={true}
- showExpandableButton={true}>
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
- Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
- Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
-
-
diff --git a/src/card/card.jsx b/src/card/card.jsx
index 87418c94b8974f..dda5186fef403e 100644
--- a/src/card/card.jsx
+++ b/src/card/card.jsx
@@ -12,12 +12,46 @@ const Card = React.createClass({
};
},
+ getDefaultProps() {
+ return {
+ expandable: false,
+ initiallyExpanded: true,
+ actAsExpander: false,
+ };
+ },
+
propTypes: {
+ /**
+ * Whether a click on this card component expands the card. Can be set on any child of the Card component.
+ */
actAsExpander: React.PropTypes.bool,
+
+ /**
+ * Can be used to render elements inside the Card.
+ */
children: React.PropTypes.node,
+
+ /**
+ * Whether this card component is expandable. Can be set on any child of the Card component.
+ */
expandable: React.PropTypes.bool,
+
+ /**
+ * Whether this card is initially expanded.
+ */
initiallyExpanded: React.PropTypes.bool,
+
+ /**
+ * Fired when the expandable state changes.
+ */
onExpandChange: React.PropTypes.func,
+
+ /**
+ * Whether this card component include a button to expand the card. CardTitle,
+ * CardHeader and CardActions implement showExpandableButton. Any child component
+ * of Card can implements showExpandableButton or forwards the property to a child
+ * component supporting it.
+ */
showExpandableButton: React.PropTypes.bool,
/**