docs(pattern): import pattern

src/data/nav-items.yaml

@@ -126,12 +126,14 @@
       path: /experimental/overview
     - title: Chatbots
       path: /experimental/chatbot/overview
-    - title: Exporting pattern
-      path: /experimental/exporting-pattern
+    - title: Delete pattern
+      path: /experimental/delete-pattern
+    - title: Export pattern
+      path: /experimental/export-pattern
+    - title: Import pattern
+      path: /experimental/import-pattern
     - title: Navigation pattern
       path: /experimental/navigation-pattern
-    - title: Deleting pattern
-      path: /experimental/deleting-pattern
 - title: Resources
   pages:
     - path: /resources

src/pages/experimental/deleting-pattern/index.mdx → src/pages/experimental/delete-pattern/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Deleting pattern
+title: Delete pattern
 ---
 
 ### Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. If ‘undo’ support is impossible, request user confirmation before deleting a resource or asset.
@@ -10,7 +10,7 @@ Experimental
 
 #### Maintainers:
 
-[Vikki Paterson](https://github.ibm.com/VICTORIA)
+[Vikki Paterson](https://github.com/vikkipaterson)
 
 <AnchorLinks>
 

src/pages/experimental/exporting-pattern/index.mdx → src/pages/experimental/export-pattern/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Exporting pattern
+title: Export pattern
 ---
 
 ### Exporting a resource saves data in a different format, external to the system.
@@ -10,7 +10,7 @@ Experimental
 
 #### Maintainers:
 
-[Vikki Paterson](https://github.ibm.com/VICTORIA)
+[Vikki Paterson](https://github.com/vikkipaterson)
 
 <AnchorLinks>
 

src/pages/experimental/import-pattern/index.mdx

@@ -0,0 +1,72 @@
+---
+title: Import pattern
+---
+
+<PageDescription>
+
+The import action transfers data or objects from an external source into a system.
+
+</PageDescription>
+
+#### Status:
+
+[Experimental](experimental/about)
+
+#### Maintainers:
+
+[Vikki Paterson](https://github.com/vikkipaterson)
+
+
+
+
+![Example of an import modal in context](/images/0.5.png)
+
+<Caption>Example of an import modal in context</Caption>
+
+## Choose a file
+
+Wherever possible there should be a drag and drop zone. Use a file drop component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.
+
+<Row>
+<Column colLg={8}>
+
+![Example of an import dialog](/images/2.png)
+
+<Caption>Example of an import dialog</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={8}>
+
+![Example of drag and drop file import](/images/3.png)
+
+<Caption>Example of drag and drop file import</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={8}>
+
+![Example of loaded files in the import modal](/images/4.png)
+
+<Caption>Example of loaded files in the import modal</Caption>
+
+</Column>
+</Row>
+
+## Import from a URL
+
+If your product supports importing from a URL, use this method.
+
+<Row>
+<Column colLg={8}>
+
+![Example of importing with a URL](images/5.png)
+
+<Caption>Example of importing with a URL</Caption>
+
+</Column>
+</Row>