Fix spacing in details page

client/Home.jsx

@@ -29,6 +29,10 @@ const Home = () => {
                                 <div>No CSS hacks</div>
                                 <div>🎉</div>
                             </li>
+                            <li className="flex items-center justify-between">
+                                <div>Real use cases</div>
+                                <div>🎉</div>
+                            </li>
                             <li className="flex items-center justify-between">
                                 <div>Good practices</div>
                                 <div className="br-pill ph2 white bg-dark-blue f6">soon</div>

client/layouts/DetailsLayout.jsx

@@ -15,10 +15,8 @@ const DetailsLayout = ({ title, children }) => {
             <div className="bt br bl b--black-20 relative br4 br--top">
                 <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
 
-                <div className="pa5">
                 {children}
             </div>
-            </div>
         </Layout>
     );
 };

client/patterns/badge/Details.jsx

@@ -7,6 +7,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Badge">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -40,6 +41,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/breadcrumb/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Breadcrumb">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -44,6 +45,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/button-with-icon/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Button with icon">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -41,6 +42,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/card/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Card">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -52,6 +53,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/centering/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Centering">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -33,6 +34,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/docked-at-corner/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Docked at corner">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -48,6 +49,31 @@ code={`
 />
                     }
                 />
+            </div>
+            <div className="bt b--black-20 relative">
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+
+                <div className="pa4">
+                    <div className="mb4 w4 pa2 relative ba b--black-30 br2">
+                        Inbox
+                        <div
+                            className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center"
+                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                        >
+                            5
+                        </div>
+                    </div>
+                    <div className="w-40 h4 pa3 relative ba b--black-30 br2">
+                        Modal
+                        <div
+                            className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center"
+                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                        >
+                            &times;
+                        </div>
+                    </div>
+                </div>
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/dot-navigation/Details.jsx

@@ -24,6 +24,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Dot navigation">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/feature-list/Details.jsx

@@ -11,6 +11,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Feature list">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="flex h-100 items-center justify-center">
@@ -68,6 +69,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/fixed-at-corner/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Fixed at corner">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="relative h-100">
@@ -72,6 +73,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/holy-grail/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Holy grail">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column">
@@ -76,6 +77,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/input-add-on/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Input add-on">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -125,6 +126,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/media-object/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Media object">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex items-start pa3">
@@ -56,6 +57,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/menu/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Menu">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -112,6 +113,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/modal/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Modal">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/notification/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Notification">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -38,6 +39,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/pagination/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Pagination">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -75,6 +76,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/previous-next-buttons/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -44,6 +45,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/pricing-table/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Pricing table">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex items-center justify-center pa3">
@@ -89,6 +90,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/progress-bar/Details.jsx

@@ -13,6 +13,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Progress bar">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -58,6 +59,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/questions-and-answers/Details.jsx

@@ -29,6 +29,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Questions and answers">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -87,6 +88,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/same-height-columns/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Same height columns">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -82,6 +83,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/search-box/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Search box">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -58,6 +59,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/separator/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Separator">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -56,6 +57,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sidebar/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sidebar">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content!</div>
                 <BrowserFrame
                     content={
@@ -47,6 +48,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/simple-grid/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Simple grid">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -114,6 +115,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/slider/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Slider">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -68,6 +69,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/split-navigation/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Split navigation">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -49,6 +50,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/split-screen/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Split screen">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex">
@@ -45,6 +46,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/stepper-input/Details.jsx

@@ -13,6 +13,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Stepper input">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">
                     The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
                 </div>
@@ -77,6 +78,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sticky-footer/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sticky footer">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">
                     The footer always sticks to the bottom if the main content is short.
                 </div>
@@ -49,6 +50,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sticky-header/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sticky header">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
                 <BrowserFrame
                     content={
@@ -42,6 +43,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/switch/Details.jsx

@@ -10,6 +10,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Switch">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
                 <BrowserFrame
                     content={
@@ -65,6 +66,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/tab/Details.jsx

@@ -26,6 +26,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Tab">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -84,6 +85,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/toggle-password-visibility/Details.jsx

@@ -10,6 +10,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Toggle password visibility">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/wizard/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Wizard">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -112,6 +113,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };