Add media object pattern

client/App.jsx

@@ -5,6 +5,7 @@ import Home from './Home';
 import Badge from './layouts/Badge';
 import Centering from './layouts/Centering';
 import InputAddon from './layouts/InputAddon';
+import MediaObject from './layouts/MediaObject';
 import Sidebar from './layouts/Sidebar';
 import StepperInput from './layouts/StepperInput';
 import StickyFooter from './layouts/StickyFooter';
@@ -18,6 +19,7 @@ const App = () => {
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/input-add-on'><InputAddon /></Route>
+                <Route exact={true} path='/media-object'><MediaObject /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>

client/layouts/MediaObject.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import Block from '../placeholders/Block';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import Rectangle from '../placeholders/Rectangle';
+import Square from '../placeholders/Square';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const MediaObject = () => {
+    useDocumentTitle('CSS Layout ∙ Media object');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Media object</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex items-start pa3">
+                        <div className="w4 h4 mr3">
+                            <Square />
+                        </div>
+                        <div className="flex-auto">
+                            <div className="w-80 mb4">
+                                <Rectangle />
+                            </div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={15} /></div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    /* Align sub-items to top */
+    align-items: start;
+    display: flex;
+">
+    <!-- Media object -->
+    <div style="
+        margin-right: 16px;
+
+        /* Set the width for the media object */
+        width: 200px;
+    ">
+        ...
+    </div>
+
+    <!-- Main content -->
+    <div style="
+        /* Take the remaining width */
+        flex: 1;
+    ">
+        ...
+    </div>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default MediaObject;

client/placeholders/Square.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Square = ({ size = 8 }) => {
     return (
-        <div className="w-100 h-100 bg-black-30 br1" />
+        <div className="w-100 h-100 bg-black-30 br2" />
     );
 };