diff --git a/src/components/atoms/core/HTMLElements/index.js b/src/components/atoms/core/HTMLElements/index.js
new file mode 100644
index 00000000..4a3885c2
--- /dev/null
+++ b/src/components/atoms/core/HTMLElements/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio
+ * Copyright (C) 2018-present Sven Greb
+ *
+ * Project: Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License: MIT
+ */
+
+/**
+ * @file Provides components that represents basic HTML elements.
+ * @author Arctic Ice Studio
+ * @author Sven Greb
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ * @since 0.3.0
+ */
+
+import { A } from "./inlineTextSemantics";
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { A };
diff --git a/src/components/atoms/core/HTMLElements/inlineTextSemantics/A.jsx b/src/components/atoms/core/HTMLElements/inlineTextSemantics/A.jsx
new file mode 100644
index 00000000..fa7759ea
--- /dev/null
+++ b/src/components/atoms/core/HTMLElements/inlineTextSemantics/A.jsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio
+ * Copyright (C) 2018-present Sven Greb
+ *
+ * Project: Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License: MIT
+ */
+
+/**
+ * @author Arctic Ice Studio
+ * @author Sven Greb
+ * @since 0.3.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "gatsby";
+import styled from "styled-components";
+
+import { isRouteInternal } from "utils";
+
+const BaseComponent = styled.a`
+ color: inherit;
+ cursor: pointer;
+ text-decoration: none;
+
+ &:active,
+ &:focus,
+ &:hover,
+ &:visited {
+ outline: none;
+ }
+`;
+
+/**
+ * A dynamic and failsafe component which either renders to a base HTML link `` (anchor) or a "Gatsby Link" based on
+ * the target/URL type, internal or external, passed to the `to` and `href` props.
+ *
+ * @example Usage
+ *
+ * Nord
+ * Nord
+ *
+ * Blog
+ * Blog
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ * @see https://www.gatsbyjs.org/docs/gatsby-link
+ * @since 0.3.0
+ */
+const A = ({ children, href, to, ...passProps }) =>
+ isRouteInternal(to) || isRouteInternal(href) ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ );
+
+A.propTypes = {
+ children: PropTypes.node.isRequired,
+ to: PropTypes.string
+};
+
+A.defaultProps = { to: "" };
+
+export default A;
diff --git a/src/components/atoms/core/HTMLElements/inlineTextSemantics/index.js b/src/components/atoms/core/HTMLElements/inlineTextSemantics/index.js
new file mode 100644
index 00000000..c85bd095
--- /dev/null
+++ b/src/components/atoms/core/HTMLElements/inlineTextSemantics/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio
+ * Copyright (C) 2018-present Sven Greb
+ *
+ * Project: Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License: MIT
+ */
+
+/**
+ * @file Provides components that represent basic HTML elements with inline text semantics functionality.
+ * @author Arctic Ice Studio
+ * @author Sven Greb
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics
+ * @since 0.3.0
+ */
+
+import A from "./A";
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { A };
diff --git a/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx b/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx
new file mode 100644
index 00000000..9451e154
--- /dev/null
+++ b/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio
+ * Copyright (C) 2018-present Sven Greb
+ *
+ * Project: Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License: MIT
+ */
+
+import React from "react";
+import { render } from "react-testing-library";
+
+import { A } from "atoms/core/HTMLElements";
+import { ROUTE_DOCS } from "config/routes/mappings";
+import { metadataNordDocs } from "data/project";
+
+describe("snapshot", () => {
+ test("renders inernal URLs with `to` prop", () => {
+ const { container } = render(Docs);
+ expect(container).toMatchSnapshot();
+ });
+
+ test("renders inernal URLs with `href` prop", () => {
+ const { container } = render(Docs);
+ expect(container).toMatchSnapshot();
+ });
+
+ test("renders external URLs with `href` prop", () => {
+ const { container } = render(Docs);
+ expect(container).toMatchSnapshot();
+ });
+
+ test("renders external URLs with `to` prop", () => {
+ const { container } = render(Docs);
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap b/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap
new file mode 100644
index 00000000..0c9d6320
--- /dev/null
+++ b/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot renders external URLs with \`href\` prop 1`] = `
+
+`;
+
+exports[`snapshot renders external URLs with \`to\` prop 1`] = `
+
+`;
+
+exports[`snapshot renders inernal URLs with \`href\` prop 1`] = `
+
+`;
+
+exports[`snapshot renders inernal URLs with \`to\` prop 1`] = `
+
+`;