diff --git a/src/components/media/media.tsx b/src/layout/media/media.tsx
similarity index 91%
rename from src/components/media/media.tsx
rename to src/layout/media/media.tsx
index 42bafd5c..402c8b37 100644
--- a/src/components/media/media.tsx
+++ b/src/layout/media/media.tsx
@@ -1,7 +1,7 @@
import { cx } from "emotion";
import React from "react";
-import { forwardRefAs } from "@/components/exotic";
+import { forwardRefAs } from "@/exotic";
import { ModifierProps, transformModifiers } from "@/modifiers";
import { MediaContent } from "./media-content";
import { MediaItem } from "./media-item";
diff --git a/src/components/section/__tests__/__snapshots__/section.test.tsx.snap b/src/layout/section/__tests__/__snapshots__/section.test.tsx.snap
similarity index 100%
rename from src/components/section/__tests__/__snapshots__/section.test.tsx.snap
rename to src/layout/section/__tests__/__snapshots__/section.test.tsx.snap
diff --git a/src/components/section/__tests__/section.test.tsx b/src/layout/section/__tests__/section.test.tsx
similarity index 100%
rename from src/components/section/__tests__/section.test.tsx
rename to src/layout/section/__tests__/section.test.tsx
diff --git a/src/components/section/index.ts b/src/layout/section/index.ts
similarity index 100%
rename from src/components/section/index.ts
rename to src/layout/section/index.ts
diff --git a/src/components/section/section.module.sass b/src/layout/section/section.module.sass
similarity index 60%
rename from src/components/section/section.module.sass
rename to src/layout/section/section.module.sass
index 10bb9e7c..f2c37b03 100644
--- a/src/components/section/section.module.sass
+++ b/src/layout/section/section.module.sass
@@ -1,2 +1,2 @@
-@import '../utils.sass'
+@import '../../utils.sass'
@import '~bulma/sass/layout/section.sass'
\ No newline at end of file
diff --git a/src/components/section/section.story.tsx b/src/layout/section/section.story.tsx
similarity index 70%
rename from src/components/section/section.story.tsx
rename to src/layout/section/section.story.tsx
index ff3e2591..f9a7c639 100644
--- a/src/components/section/section.story.tsx
+++ b/src/layout/section/section.story.tsx
@@ -1,47 +1,46 @@
import { storiesOf } from "@storybook/react";
import React from "react";
-import { Container } from "@/components/container";
-import { Heading } from "@/components/heading";
-import { Section } from "../section";
+import { Title } from "@/elements";
+import { Container, Section } from "@/layout";
-storiesOf("Section", module)
+storiesOf("Layout/Section", module)
.add("Default", () => (
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
@@ -50,29 +49,29 @@ storiesOf("Section", module)
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
@@ -81,29 +80,29 @@ storiesOf("Section", module)
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
- Section
-
+ Section
+
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you are currently reading
- </Heading>
+
diff --git a/src/components/section/section.tsx b/src/layout/section/section.tsx
similarity index 91%
rename from src/components/section/section.tsx
rename to src/layout/section/section.tsx
index 31d727c9..33d88195 100644
--- a/src/components/section/section.tsx
+++ b/src/layout/section/section.tsx
@@ -1,7 +1,7 @@
import { cx } from "emotion";
import React from "react";
-import { forwardRefAs } from "@/components/exotic";
+import { forwardRefAs } from "@/exotic";
import { ModifierProps, transformModifiers } from "@/modifiers";
export type SectionModifierProps = Partial<{
diff --git a/src/components/tile/__tests__/__snapshots__/tile.test.tsx.snap b/src/layout/tile/__tests__/__snapshots__/tile.test.tsx.snap
similarity index 100%
rename from src/components/tile/__tests__/__snapshots__/tile.test.tsx.snap
rename to src/layout/tile/__tests__/__snapshots__/tile.test.tsx.snap
diff --git a/src/components/tile/__tests__/tile.test.tsx b/src/layout/tile/__tests__/tile.test.tsx
similarity index 100%
rename from src/components/tile/__tests__/tile.test.tsx
rename to src/layout/tile/__tests__/tile.test.tsx
diff --git a/src/components/tile/index.ts b/src/layout/tile/index.ts
similarity index 100%
rename from src/components/tile/index.ts
rename to src/layout/tile/index.ts
diff --git a/src/components/tile/tile.module.sass b/src/layout/tile/tile.module.sass
similarity index 57%
rename from src/components/tile/tile.module.sass
rename to src/layout/tile/tile.module.sass
index e816e3ce..04151616 100644
--- a/src/components/tile/tile.module.sass
+++ b/src/layout/tile/tile.module.sass
@@ -1,2 +1,2 @@
-@import '../utils.sass'
+@import '../../utils.sass'
@import '~bulma/sass/grid/tiles.sass'
\ No newline at end of file
diff --git a/src/components/tile/tile.story.tsx b/src/layout/tile/tile.story.tsx
similarity index 66%
rename from src/components/tile/tile.story.tsx
rename to src/layout/tile/tile.story.tsx
index 8be3dd8a..7bbd6ff6 100644
--- a/src/components/tile/tile.story.tsx
+++ b/src/layout/tile/tile.story.tsx
@@ -1,13 +1,10 @@
import { storiesOf } from "@storybook/react";
import React from "react";
-import { Box } from "@/components/box";
-import { Heading } from "@/components/heading";
-import { Image } from "@/components/image";
-import { Section } from "@/components/section";
-import { Tile } from "@/components/tile";
+import { Box, Image, Title } from "@/elements";
+import { Section, Tile } from "@/layout";
-storiesOf("Tile", module).add("Default", () => (
+storiesOf("Layout/Tile", module).add("Default", () => (
@@ -20,8 +17,8 @@ storiesOf("Tile", module).add("Default", () => (
notification
color="primary"
>
- Vertical...
- Top tile
+ Vertical...
+ Top tile
as="article"
@@ -29,8 +26,8 @@ storiesOf("Tile", module).add("Default", () => (
notification
color="warning"
>
- Tiles...
- Bottom Tile...
+ Tiles...
+ Bottom Tile...
@@ -40,8 +37,8 @@ storiesOf("Tile", module).add("Default", () => (
notification
color="info"
>
- Middle Tile...
- With image Tile...
+ Middle Tile...
+ With image Tile...
(
notification
color="danger"
>
- Wide tile
- Aligned with the right tile
+ Wide tile
+ Aligned with the right tile
@@ -70,8 +67,8 @@ storiesOf("Tile", module).add("Default", () => (
color="success"
>
-
Tall tile
-
With even more content
+
Tall tile
+
With even more content
rbx