content: import React from 'react';
  import Title from 'react-title-component';
  
  import CodeExample from '../../../CodeExample';
  import PropTypeDescription from '../../../PropTypeDescription';
  import MarkdownElement from '../../../MarkdownElement';
  
  import cardReadmeText from './README';
  import cardExampleWithAvatarCode from '!raw!./ExampleWithAvatar';
  import CardExampleWithAvatar from './ExampleWithAvatar';
  import cardExampleWithoutAvatarCode from '!raw!./ExampleWithoutAvatar';
  import CardExampleWithoutAvatar from './ExampleWithoutAvatar';
  import cardExampleControlledCode from '!raw!./ExampleControlled';
  import CardExampleControlled from './ExampleControlled';
  
  import cardCode from '!raw!material-ui/Card/Card';
  import cardActionsCode from '!raw!material-ui/Card/CardActions';
  import cardHeaderCode from '!raw!material-ui/Card/CardHeader';
  import cardMediaCode from '!raw!material-ui/Card/CardMedia';
  import cardTextCode from '!raw!material-ui/Card/CardText';
  import cardTitleCode from '!raw!material-ui/Card/CardTitle';
  
  const descriptions = {
    avatar: 'A `Card` containing each of the card components: `CardHeader` (with avatar), `CardMedia` (with overlay), ' +
    '`CardTitle`, `CardText` & `CardActions`.',
    simple: 'An expandable `Card` with `CardHeader`, `CardText` and `CardActions`. ' +
    'Use the icon to expand the card.',
    controlled: 'A controlled expandable `Card`. Use the icon, the toggle or the ' +
    'buttons to control the expanded state of the card.',
  };
  
  const CardPage = () => (
    <div>
      <Title render={(previousTitle) => `Card - ${previousTitle}`} />
      <MarkdownElement text={cardReadmeText} />
      <CodeExample
        title="Card components example"
        description={descriptions.avatar}
        code={cardExampleWithAvatarCode}
      >
        <CardExampleWithAvatar />
      </CodeExample>
      <CodeExample
        title="Expandable example"
        description={descriptions.simple}
        code={cardExampleWithoutAvatarCode}
      >
        <CardExampleWithoutAvatar />
      </CodeExample>
      <CodeExample
        title="Controlled example"
        description={descriptions.controlled}
        code={cardExampleControlledCode}
      >
        <CardExampleControlled />
      </CodeExample>
      <PropTypeDescription code={cardCode} header="### Card properties" />
      <PropTypeDescription code={cardActionsCode} header="### CardActions properties" />
      <PropTypeDescription code={cardHeaderCode} header="### CardHeader properties" />
      <PropTypeDescription code={cardMediaCode} header="### CardMedia properties" />
      <PropTypeDescription code={cardTextCode} header="### CardText properties" />
      <PropTypeDescription code={cardTitleCode} header="### CardTitle properties" />
    </div>
  );
  
  export default CardPage;
  