` that is used.
+
+For example, to render an `article` you could use `as="article"`:
+
+```jsx
+
+ Your content
+
+```
+
+You can also provide custom components, for example:
+
+```jsx
+function Article({ children, ...rest }) {
+ return
{children};
+}
+
+
+ Your content
+;
+```
+
+### AspectRatio className
+
+The `className` prop passed into `AspectRatio` will be forwarded to the
+outermost node in the component.
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/AspectRatio/AspectRatio.mdx).
diff --git a/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js b/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js
new file mode 100644
index 000000000000..53b2911329a5
--- /dev/null
+++ b/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Simulate } from 'react-dom/test-utils';
+import { AspectRatio } from '../';
+
+describe('AspectRatio', () => {
+ it('should support rendering content in different aspect ratios', () => {
+ const ratios = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
+
+ for (const ratio of ratios) {
+ const mountNode = document.createElement('div');
+ ReactDOM.render(
+
{ratio},
+ mountNode
+ );
+
+ // Verify the aspect ratio class exists on the container
+ const container = mountNode.firstChild;
+ const classes = Array.from(container.classList);
+ const ratioClass = classes.find((className) => {
+ return className.includes(ratio);
+ });
+ expect(ratioClass).not.toBe(null);
+ }
+ });
+
+ describe('Component API', () => {
+ let mountNode;
+
+ beforeEach(() => {
+ mountNode = document.createElement('div');
+ document.body.appendChild(mountNode);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(mountNode);
+ });
+
+ it('should pass in a given className to the outermost node', () => {
+ ReactDOM.render(
+
+ test
+ ,
+ mountNode
+ );
+
+ const container = document.querySelector('[data-testid="test"]');
+ expect(container).not.toBe(null);
+ expect(container.classList.contains('test')).toBe(true);
+ });
+
+ it('should forward extra props to the outermost node', () => {
+ const onClick = jest.fn();
+ ReactDOM.render(
+
+ test
+ ,
+ mountNode
+ );
+ const container = mountNode.firstChild;
+ expect(container).not.toBe(null);
+ expect(container.getAttribute('data-testid')).toBe('test');
+
+ Simulate.click(container);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('should support rendering custom elements with the `as` prop', () => {
+ function Test() {
+ return (
+ <>
+
test
+
}>
+ test as component
+
+
+ );
+ }
+
+ ReactDOM.render(
, mountNode);
+
+ const section = document.querySelector('section');
+ expect(section).not.toBe(null);
+
+ const article = document.querySelector('article');
+ expect(article).not.toBe(null);
+
+ // Make sure props are forwarded to a custom base component
+ expect(article.classList.contains('test')).toBe(true);
+ });
+ });
+});
diff --git a/packages/react/src/components/AspectRatio/index.js b/packages/react/src/components/AspectRatio/index.js
new file mode 100644
index 000000000000..6f2395beec81
--- /dev/null
+++ b/packages/react/src/components/AspectRatio/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as AspectRatio } from './AspectRatio';
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index cbf5ccee4e6a..4ba2c266aa23 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -7,6 +7,7 @@
export Accordion from './components/Accordion';
export AccordionItem from './components/AccordionItem';
+export { AspectRatio } from './components/AspectRatio';
export { Breadcrumb, BreadcrumbItem } from './components/Breadcrumb';
export Button from './components/Button';
export ButtonSet from './components/ButtonSet';