Component improvements.

app/components/Header.js

@@ -0,0 +1,10 @@
+export const Header = props => (
+  <>
+    <header {...props} />
+    <style jsx>{`
+      header {
+        margin: var(--daui-spacing);
+      }
+    `}</style>
+  </>
+)

app/components/Inset.js

@@ -1,10 +0,0 @@
-export const Inset = ({ children }) => (
-  <div>
-    {children}
-    <style jsx>{`
-      div {
-        margin: 1.5rem;
-      }
-    `}</style>
-  </div>
-)

app/components/Section.js

@@ -1,15 +1,10 @@
-export const Section = ({ intro, children }) => (
-  <section>
-    <header>{intro}</header>
-    {children}
+export const Section = props => (
+  <>
+    <section {...props} />
     <style jsx>{`
       section {
-        margin-top: 3rem;
-        margin-bottom: 1.5rem;
-      }
-      header {
-        margin: 1.5rem;
+        margin: calc(var(--daui-spacing) * 2) 0;
       }
     `}</style>
-  </section>
+  </>
 )

app/pages/index.js

@@ -1,5 +1,5 @@
-import { Code, Heading } from 'device-agnostic-ui'
-import { Inset } from '../components/Inset'
+import { Code, Heading, Margin } from 'device-agnostic-ui'
+import { Header } from '../components/Header'
 import { Page } from '../components/Page'
 import { Section } from '../components/Section'
 import { UploadBlob } from '../components/UploadBlob'
@@ -9,40 +9,45 @@ import { Uploads } from '../components/Uploads'
 
 const IndexPage = () => (
   <Page title="Apollo upload examples">
-    <Section
-      intro={
-        <Heading>
+    <Header>
+      <Heading level={1} size={1}>
+        Apollo upload examples
+      </Heading>
+    </Header>
+    <Section>
+      <Header>
+        <Heading level={2} size={2}>
           Upload <Code>FileList</Code>
         </Heading>
-      }
-    >
-      <Inset>
+      </Header>
+      <Margin>
         <UploadFileList />
-      </Inset>
+      </Margin>
     </Section>
-    <Section
-      intro={
-        <Heading>
+    <Section>
+      <Header>
+        <Heading level={2} size={2}>
           Upload <Code>File</Code>
         </Heading>
-      }
-    >
-      <Inset>
+      </Header>
+      <Margin>
         <UploadFile />
-      </Inset>
+      </Margin>
     </Section>
-    <Section
-      intro={
-        <Heading>
+    <Section>
+      <Header>
+        <Heading level={2} size={2}>
           Upload <Code>Blob</Code>
         </Heading>
-      }
-    >
-      <Inset>
+      </Header>
+      <Margin>
         <UploadBlob />
-      </Inset>
+      </Margin>
     </Section>
-    <Section intro={<Heading>Uploads</Heading>}>
+    <Section>
+      <Header>
+        <Heading>Uploads</Heading>
+      </Header>
       <Uploads />
     </Section>
   </Page>