diff --git a/src/Divider/Divider.story.tsx b/src/Divider/Divider.story.tsx
index 156fa7563..a5b3af99c 100644
--- a/src/Divider/Divider.story.tsx
+++ b/src/Divider/Divider.story.tsx
@@ -1,9 +1,36 @@
import React from "react";
import { Divider } from ".";
+import { Text } from "../Type";
export default {
title: "Components/Divider",
component: Divider,
};
-export const _Divider = () => ;
+export const Default = () => (
+
+
Section A
+
+
Section B
+
+);
+
+export const WithCustomColourAndSpacing = () => (
+
+
Section A
+
+
Section B
+
+);
+
+export const WithCustomProperties = () => (
+
+
Section A
+
+
Section B
+
+);
diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx
index 10356df40..15e16fa09 100644
--- a/src/Divider/Divider.tsx
+++ b/src/Divider/Divider.tsx
@@ -1,9 +1,19 @@
-import React from "react";
-import { Box } from "../Box";
-import { BoxProps } from "../Box/Box";
+import styled from "styled-components";
+import { addStyledProps, StyledProps } from "../StyledProps";
-const Divider = ({ borderColor = "lightGrey", ...props }: BoxProps) => (
-
+type Props = StyledProps;
+
+const Divider = styled.div(
+ ({ theme, color }) => ({
+ display: "flex",
+ marginTop: theme.space.x2,
+ marginBottom: theme.space.x2,
+ marginLeft: "0",
+ marginRight: "0",
+ borderBottom: "1px solid",
+ borderColor: color ? color : theme.colors.lightGrey,
+ }),
+ addStyledProps
);
export default Divider;