diff --git a/spec/pivotal-ui-react/media/media_spec.js b/spec/pivotal-ui-react/media/media_spec.js
index 420c91dcf..c17f0ffc7 100644
--- a/spec/pivotal-ui-react/media/media_spec.js
+++ b/spec/pivotal-ui-react/media/media_spec.js
@@ -124,10 +124,24 @@ describe('Media', function() {
     });
   });
 
+  describe('when custom attributes are set on media', function() {
+    beforeEach(function() {
+      var image = (<img src="http://placehold.it/20x20" />);
+      React.render((<Media leftImage={image} stackSize="medium" innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Media>), root);
+    });
+
+    it('the class, id, and style are passed through', function() {
+      expect('.media').toHaveClass('test-class');
+      expect('.media-body').toHaveClass('inner-test-class');
+      expect('.media').toHaveAttr('id', 'test-id');
+      expect('.media').toHaveCss({opacity: '1'});
+    });
+  });
+
   describe('Flag', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Flag leftImage={image} rightImage={image}>fop</Flag>), root);
+      React.render((<Flag leftImage={image} rightImage={image} innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Flag>), root);
     });
 
     it('adds the class media-middle to the media-body, media-left, and media-right', function() {
@@ -135,5 +149,12 @@ describe('Media', function() {
       expect('.media-left').toHaveClass('media-middle');
       expect('.media-right').toHaveClass('media-middle');
     });
+
+    it('the class, id, and style are passed through', function() {
+      expect('.media').toHaveClass('test-class');
+      expect('.media-body').toHaveClass('inner-test-class');
+      expect('.media').toHaveAttr('id', 'test-id');
+      expect('.media').toHaveCss({opacity: '1'});
+    });
   });
 });
diff --git a/src/pivotal-ui-react/media/media.js b/src/pivotal-ui-react/media/media.js
index a31efc5a5..821bf291d 100644
--- a/src/pivotal-ui-react/media/media.js
+++ b/src/pivotal-ui-react/media/media.js
@@ -56,10 +56,10 @@ var Media = React.createClass({
   },
 
   render() {
-    var {className, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
+    var {className, innerClassName, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
 
     var classes = classnames('media', stackSize && `media-stackable-${shortSizes[stackSize]}`, className);
-    var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`);
+    var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`, innerClassName);
 
     var leftMedia = leftImage ?
       <MediaObject horizontalAlignment="left" {...{vAlign, leftMediaSpacing}}>{leftImage}</MediaObject> :
diff --git a/src/pivotal-ui/components/media/media.scss b/src/pivotal-ui/components/media/media.scss
index 324081762..518d3c1ac 100644
--- a/src/pivotal-ui/components/media/media.scss
+++ b/src/pivotal-ui/components/media/media.scss
@@ -282,7 +282,8 @@ var mediaBasicLinkedImage = <UI.Image src='http://placehold.it/50x50' href="http
 
 ```react_example_table
 <UI.Media
-  leftImage={mediaBasicImage}>
+  leftImage={mediaBasicImage}
+  innerClassName='my-media-body'>
     left media
 </UI.Media>