diff --git a/components/card/Card.js b/components/card/Card.js
index 0fa04ee7..af621993 100644
--- a/components/card/Card.js
+++ b/components/card/Card.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const Card = ({children, className, raised, theme, ...other}) => {
   const classes = classnames(theme.card, {
@@ -19,9 +20,10 @@ Card.propTypes = {
   className: PropTypes.string,
   raised: PropTypes.bool,
   theme: React.PropTypes.shape({
-    card: React.PropTypes.string.isRequired,
-    raised: React.PropTypes.string.isRequired
+    card: React.PropTypes.string,
+    raised: React.PropTypes.string
   })
 };
 
-export default themr('ToolboxCard')(Card);
+export default themr(CARD)(Card);
+export { Card };
diff --git a/components/card/CardActions.js b/components/card/CardActions.js
index e2e09145..bd83a57b 100644
--- a/components/card/CardActions.js
+++ b/components/card/CardActions.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardActions = ({ children, className, theme, ...other }) => (
   <div className={classnames(theme.cardActions, className)} {...other}>
@@ -16,4 +17,5 @@ CardActions.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardActions);
+export default themr(CARD)(CardActions);
+export { CardActions };
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
index ecaba7d3..91939238 100644
--- a/components/card/CardMedia.js
+++ b/components/card/CardMedia.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
   const classes = classnames(theme.cardMedia, {
@@ -44,4 +45,5 @@ CardMedia.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardMedia);
+export default themr(CARD)(CardMedia);
+export { CardMedia };
diff --git a/components/card/CardText.js b/components/card/CardText.js
index 14c4683d..df13ffc6 100644
--- a/components/card/CardText.js
+++ b/components/card/CardText.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardText = ({ children, className, theme, ...other }) => (
   <div className={classnames(theme.cardText, className)} {...other}>
@@ -16,4 +17,5 @@ CardText.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardText);
+export default themr(CARD)(CardText);
+export { CardText };
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index 287c6ba9..a9e83ef3 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -1,62 +1,62 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import { Avatar } from '../avatar';
+import { CARD } from '../identifiers.js';
+import InjectAvatar from '../avatar/Avatar.js';
 
-const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
-  const classes = classnames(theme.cardTitle, {
-    [theme.small]: avatar,
-    [theme.large]: !avatar
-  }, className);
+const factory = (Avatar) => {
+  const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
+    const classes = classnames(theme.cardTitle, {
+      [theme.small]: avatar,
+      [theme.large]: !avatar
+    }, className);
 
-  let avatarComponent;
-
-  if (typeof avatar === 'string') {
-    avatarComponent = <Avatar image={avatar} />;
-  } else {
-    avatarComponent = avatar;
-  }
-
-  return (
-    <div className={classes} {...other}>
-      {avatarComponent}
-      <div>
-        {title && <h5 className={theme.title}>{title}</h5>}
-        {children && typeof children === 'string' && (
-          <h5 className={theme.title}>{children}</h5>
-        )}
-        {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
-        {children && typeof children !== 'string' && children}
+    return (
+      <div className={classes} {...other}>
+        {typeof avatar === 'string' ? <Avatar image={avatar} /> : avatar}
+        <div>
+          {title && <h5 className={theme.title}>{title}</h5>}
+          {children && typeof children === 'string' && (
+            <h5 className={theme.title}>{children}</h5>
+          )}
+          {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
+          {children && typeof children !== 'string' && children}
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
+
+  CardTitle.propTypes = {
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+      PropTypes.array
+    ]),
+    className: PropTypes.string,
+    subtitle: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    theme: React.PropTypes.shape({
+      large: React.PropTypes.string.isRequired,
+      title: React.PropTypes.string.isRequired,
+      small: React.PropTypes.string.isRequired,
+      subtitle: React.PropTypes.string.isRequired
+    }),
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ])
+  };
+
+  return CardTitle;
 };
 
-CardTitle.propTypes = {
-  avatar: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-    PropTypes.array
-  ]),
-  className: PropTypes.string,
-  subtitle: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  theme: React.PropTypes.shape({
-    large: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    small: React.PropTypes.string.isRequired,
-    subtitle: React.PropTypes.string.isRequired
-  }),
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ])
-};
-
-export default themr('ToolboxCard')(CardTitle);
+const CardTitle = factory(InjectAvatar);
+export default themr(CARD)(CardTitle);
+export { CardTitle };
+export { factory as cardTitleFactory };
diff --git a/components/card/index.js b/components/card/index.js
index 5f9ceb93..ef571e9b 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,7 +1,23 @@
-import Card from './Card';
-export default Card;
-export { Card };
-export CardActions from './CardActions';
-export CardMedia from './CardMedia';
-export CardText from './CardText';
-export CardTitle from './CardTitle';
+import { themr } from 'react-css-themr';
+import { CARD } from '../identifiers.js';
+import { Card } from './Card.js';
+import { CardActions } from './CardActions.js';
+import { CardMedia } from './CardMedia.js';
+import { CardText } from './CardText.js';
+import { cardTitleFactory } from './CardTitle.js';
+import Avatar from '../avatar';
+import theme from './theme.scss';
+
+const CardTitle = cardTitleFactory(Avatar);
+const ThemedCard = themr(CARD, theme)(Card);
+const ThemedCardActions = themr(CARD, theme)(CardActions);
+const ThemedCardMedia = themr(CARD, theme)(CardMedia);
+const ThemedCardText = themr(CARD, theme)(CardText);
+const ThemedCardTitle = themr(CARD, theme)(CardTitle);
+
+export default ThemedCard;
+export { ThemedCard as Card };
+export { ThemedCardActions as CardActions };
+export { ThemedCardMedia as CardMedia };
+export { ThemedCardText as CardText };
+export { ThemedCardTitle as CardTitle };
diff --git a/components/card/readme.md b/components/card/readme.md
index 68518a54..a2add5f0 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -7,29 +7,25 @@ Cards are composed of multiple subcomponents in React Toolbox. You can combine e
 <!-- example -->
 ```jsx
 import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
-import theme from 'react-toolbox/lib/card/theme';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card theme={theme} style={{width: '350px'}}>
+  <Card style={{width: '350px'}}>
     <CardTitle
       avatar="https://placeimg.com/80/80/animals"
       title="Avatar style title"
       subtitle="Subtitle here"
-      theme={theme}
     />
     <CardMedia
       aspectRatio="wide"
       image="https://placeimg.com/800/450/nature"
-      theme={theme}
     />
     <CardTitle
       title="Title goes here"
       subtitle="Subtitle here"
-      theme={theme}
     />
-    <CardText theme={theme}>{dummyText}</CardText>
+    <CardText>{dummyText}</CardText>
     <CardActions theme={theme}>
       <Button label="Action 1" />
       <Button label="Action 2" />
@@ -40,7 +36,7 @@ const TestCards = () => (
 return <TestCards />;
 ```
 
-<!--component-docgen-start-->
+This component and all of its subcomponents are themeable by context using the key `RTCard`. This component theme can also include class modifiers for `Button` and `Avatar` component.
 
 ## Card
 
@@ -54,15 +50,15 @@ that all subcomponents are placed within.
 | `className` | `String` |  | Additional class(es) for custom styling. |
 | `raised` | `Boolean` |  | Increases the shadow depth to appear elevated. |
 
+### Theme
 
-Since the `Button` implements a ripple, it accepts theme properties for the ripple as well. If you want to compose the default style for the ripple, you just have to provide Ripple keys with custom styles in the theme object.
-
+| Name     | Description|
+|:---------|:-----------|
+| `card`   | Class used for the root element.|
+| `raised` | Added to the root element in case the card is raised.|
 
 ## CardTitle
-A versatile title block that can be used in
-various places on the card, including the media
-area. This component can also display an avatar next
-to the title content.
+A versatile title block that can be used in various places on the card, including the media area. This component can also display an avatar next to the title content.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -73,11 +69,18 @@ to the title content.
 | `subtitle` | `String` |  | Text used for the sub header of the card. |
 | `title` | `String` |  | Text used for the title of the card.  |
 
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `large` | Added to the root element when the card has avatar.|
+| `small` | Added to the root element when the card has no avatar.|
+| `subtitle` | Added to the root element for subtitle.|
+| `title` | Used in for the root element.|
+
 ## CardMedia
 
-Used for displaying media such as images or videos
-on a card. Can also be used with a solid background
-color instead of an image.
+Used for displaying media such as images or videos on a card. Can also be used with a solid background color instead of an image.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -89,9 +92,18 @@ color instead of an image.
 | `contentOverlay` | `Boolean` |  | Creates a dark overlay underneath the child components. |
 | `image` | `String`, `Element` |  | Can be used instead of children. Accepts an element or a URL string. |
 
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `cardMedia` | Added to the element root.|
+| `content` | Used for the content element.|
+| `contentOverlay` | Added to content element if its overlayed.|
+| `square` | Added to content element if its squared.|
+| `wide` | Added to content element if its wide.|
+
 ## CardText
-Basic card content container. Good for
-small descriptions or other supplementary text.
+Basic card content container. Good for small descriptions or other supplementary text.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -99,37 +111,25 @@ small descriptions or other supplementary text.
 | `children` | `Any` |  | Children to pass through the component. |
 | `className` | `String` |  | Additional class(es) for custom styling. |
 
-## CardActions
-
-This component is used as a container for supplemental
-card actions. Supplemental actions within the card are
-explicitly called out using icons, text, and UI controls,
-typically placed at the bottom of the card.
-
-### Properties
-| Name | Type | Default | Description |
-|:-----|:-----|:-----|:-----|
-| `children` | `Any` |  | Children to pass through the component. |
-| `className` | `String` |  | Additional class(es) for custom styling. |
-
-## Theming
-
-Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, and also those styles are related to each other, we use the same themed key `ToolboxCard` for context styles. The interface is as follows:
+### Theme
 
 | Name       | Description|
 |:-----------|:-----------|
-| `card`     | Used in `Card` as root class.|
-| `cardActions` | Used in `CardActions` for the wrapper.|
-| `cardMedia` | Used in `CardMedia` for the wrapper.|
-| `cardText` | Used in `CardText` for text wrapper.|
-| `content` | Used in `CardMedia` for inner content.|
-| `contentOverlay` | Used in `CardMedia` for inner content if its overlayed.|
-| `large` | Used in `CardTitle` when the card has avatar.|
-| `raised`   | Used in `Card` for raised cards.|
-| `small` | Used in `CardTitle` when the card has no avatar.|
-| `square` | Used in `CardMedia` for square content.|
-| `subtitle` | Used in `CardTitle` for subtitle.|
-| `title` | Used in `CardTitle` for title main wrapper.|
-| `wide` | Used in `CardMedia` for wide content.|
+| `cardText` | Used for the main root element.|
 
-This component theme also includes modifiers for `Button` and for `Avatar` component.
+## CardActions
+
+This component is used as a container for supplemental card actions. Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
+
+### Properties
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+
+### Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `cardActions` | Used for a wrapper around actions as the root element.|
diff --git a/components/identifiers.js b/components/identifiers.js
index 6f7e9d15..5d44773a 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -2,6 +2,7 @@ export const APP_BAR = 'RTAppBar';
 export const AUTOCOMPLETE = 'RTAutocomplete';
 export const AVATAR = 'RTAvatar';
 export const BUTTON = 'RTButton';
+export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
 export const INPUT = 'RTInput';
 export const RIPPLE = 'RTRipple';
diff --git a/spec/theme.js b/spec/theme.js
index aad6b4b1..508f9d21 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
@@ -23,7 +22,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxCard,
   ToolboxCheckbox,
   ToolboxDatePicker,
   ToolboxDialog,