1 files changed, 56 insertions, 0 deletions
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
new file mode 100644
index 0000000..4703b5d
--- /dev/null
+++ b/src/components/atoms/headings/heading.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react';
+import styles from './heading.module.scss';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type HeadingProps = {
+  /**
+   * Set additional classnames.
+   */
+  className?: string;
+  /**
+   * The heading id.
+   */
+  id?: string;
+  /**
+   * Use an heading element or only its styles. Default: false.
+   */
+  isFake?: boolean;
+  /**
+   * HTML heading level.
+   */
+  level: HeadingLevel;
+  /**
+   * Adds margin. Default: true.
+   */
+  withMargin?: boolean;
+};
+
+/**
+ * Heading component.
+ *
+ * Render an HTML heading element or a paragraph with heading styles.
+ */
+const Heading: FC<HeadingProps> = ({
+  children,
+  className,
+  id,
+  isFake = false,
+  level,
+  withMargin = true,
+}) => {
+  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
+  const levelClass = `heading--${level}`;
+  const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
+
+  return (
+    <TitleTag
+      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
+      id={id}
+    >
+      {children}
+    </TitleTag>
+  );
+};
+
+export default Heading;