diff --git a/src/pivotal-ui/components/images.scss b/src/pivotal-ui/components/images.scss
index b05396893..b3148242f 100644
--- a/src/pivotal-ui/components/images.scss
+++ b/src/pivotal-ui/components/images.scss
@@ -179,3 +179,28 @@ For more information about setting up your svg, read this article about [svg coo
left: 0;
}
+/*doc
+---
+title: React Images
+name: image_react
+categories:
+ - Beta
+---
+Images in react can be responsive and/or wrapped in a link.
+
+```html_example
+
+```
+
+```jsx_example
+
+React.render(
+
+
+
,
+ document.getElementById('image-example')
+);
+```
+
+
+*/
diff --git a/src/pivotal-ui/javascripts/images.jsx b/src/pivotal-ui/javascripts/images.jsx
new file mode 100644
index 000000000..4a93a587a
--- /dev/null
+++ b/src/pivotal-ui/javascripts/images.jsx
@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react/addons');
+var _ = require('lodash');
+
+var setClass = React.addons.classSet;
+
+var Image = React.createClass({
+
+
+ render: function () {
+ var classes = setClass({
+ 'img-responsive': this.props.responsive
+ });
+
+ if (this.props.href){
+ return(
+
+
+ {this.props.children}
+
+
+ );
+ }
+ else {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+ }
+});
+
+module.exports = {
+ Image: Image
+};
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index 513477a0b..aa65e7809 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui-react.js
@@ -65,3 +65,5 @@ global.ClickableAltPanel = require('./panels.jsx').ClickableAltPanel;
global.BasicPanel = require('./panels.jsx').BasicPanel;
global.ShadowPanel = require('./panels.jsx').ShadowPanel;
global.HighlightPanel = require('./panels.jsx').HighlightPanel;
+
+global.Image = require('./images.jsx').Image;
diff --git a/test/spec/javascripts/image_spec.js b/test/spec/javascripts/image_spec.js
new file mode 100644
index 000000000..f93fddb14
--- /dev/null
+++ b/test/spec/javascripts/image_spec.js
@@ -0,0 +1,39 @@
+'use strict';
+
+var $ = require('jquery');
+var React = require('react/addons');
+var TestUtils = React.addons.TestUtils;
+
+var Image = require('../../../src/pivotal-ui/javascripts/images.jsx').Image;
+
+describe('Image', function() {
+ beforeEach(function() {
+ this.node = $('').appendTo('body').get(0);
+
+ React.render(
+ ,
+ this.node
+ );
+ });
+
+ afterEach(function() {
+ React.unmountComponentAtNode(this.node);
+ document.body.removeChild(this.node);
+ });
+
+ describe('when the href is set', function() {
+ it("wraps the image in an link", function() {
+ expect($('#container a')).toContainElement('img');
+ });
+ });
+
+ describe('when image responsive is set to true', function() {
+ it("adds the image-responsive class to the image", function() {
+ expect($('#container img')).toHaveClass('img-responsive');
+ });
+ });
+
+ it("adds the gutter class to the row", function() {
+ expect($('#container img').attr('src')).toEqual('http://placehold.it/20x20');
+ });
+});