diff --git a/src/components/atoms/core/HTMLElements/index.js b/src/components/atoms/core/HTMLElements/index.js
index 4348c5ba..a37b5a8e 100644
--- a/src/components/atoms/core/HTMLElements/index.js
+++ b/src/components/atoms/core/HTMLElements/index.js
@@ -17,6 +17,6 @@
 
 import { A, Code } from "./inline-text-semantics";
 import { H1, H2, H3, H4, H5, H6 } from "./sectioning";
-import { P, Pre } from "./text";
+import { Hr, P, Pre } from "./text";
 
-export { A, Code, H1, H2, H3, H4, H5, H6, P, Pre };
+export { A, Code, H1, H2, H3, H4, H5, H6, Hr, P, Pre };
diff --git a/src/components/atoms/core/HTMLElements/text/Hr.jsx b/src/components/atoms/core/HTMLElements/text/Hr.jsx
new file mode 100644
index 00000000..385aa897
--- /dev/null
+++ b/src/components/atoms/core/HTMLElements/text/Hr.jsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord4,
+  [MODE_DARK_NIGHT_FROST]: colors.nord2
+});
+
+/**
+ * A base HTML component that represents a visual thematic break between paragraph-level elements.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.7.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
+ */
+const Hr = styled.hr`
+  background-color: ${backgroundColor};
+  border: 0;
+  height: ${({ size }) => size || 1}px;
+  margin: ${({ spacing }) => spacing || 5}em auto;
+  width: ${({ spreadPercent }) => spreadPercent || 35}%;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+export default Hr;
diff --git a/src/components/atoms/core/HTMLElements/text/index.js b/src/components/atoms/core/HTMLElements/text/index.js
index 3bffb4ba..a9e607c6 100644
--- a/src/components/atoms/core/HTMLElements/text/index.js
+++ b/src/components/atoms/core/HTMLElements/text/index.js
@@ -15,7 +15,8 @@
  * @since 0.3.0
  */
 
+import Hr from "./Hr";
 import P from "./P";
 import Pre from "./Pre";
 
-export { P, Pre };
+export { Hr, P, Pre };