4 files changed, 18 insertions, 21 deletions
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 0e3885d..4aa79c2 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Heading from './heading';
+import { Heading } from './heading';
 
 /**
  * Heading - Storybook Meta
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index e1eef77..636fae0 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Heading from './heading';
+import { Heading } from './heading';
 
 describe('Heading', () => {
   it('renders a h1', () => {
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index b1e4c5f..b1b6164 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -3,13 +3,14 @@ import {
   ForwardedRef,
   forwardRef,
   ForwardRefRenderFunction,
+  HTMLAttributes,
   ReactNode,
 } from 'react';
 import styles from './heading.module.scss';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-export type HeadingProps = {
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
   /**
    * The title alignment. Default: left;
    */
@@ -19,14 +20,6 @@ export type HeadingProps = {
    */
   children: ReactNode;
   /**
-   * Set additional classnames.
-   */
-  className?: string;
-  /**
-   * The heading id.
-   */
-  id?: string;
-  /**
    * Use an heading element or only its styles. Default: false.
    */
   isFake?: boolean;
@@ -57,23 +50,19 @@ const TitleTag = forwardRef<
 );
 TitleTag.displayName = 'TitleTag';
 
-/**
- * Heading component.
- *
- * Render an HTML heading element or a paragraph with heading styles.
- */
-const Heading: ForwardRefRenderFunction<
+const HeadingWithRef: ForwardRefRenderFunction<
   HTMLHeadingElement | HTMLParagraphElement,
   HeadingProps
 > = (
   {
     alignment = 'left',
     children,
-    className,
+    className = '',
     id,
     isFake = false,
     level,
     withMargin = true,
+    ...props
   },
   ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
 ) => {
@@ -81,17 +70,24 @@ const Heading: ForwardRefRenderFunction<
   const levelClass = `heading--${level}`;
   const alignmentClass = `heading--${alignment}`;
   const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
+  const headingClass = `${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`;
 
   return (
     <TitleTag
-      tagName={tagName}
-      className={`${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`}
+      {...props}
+      className={headingClass}
       id={id}
       ref={ref}
+      tagName={tagName}
     >
       {children}
     </TitleTag>
   );
 };
 
-export default forwardRef(Heading);
+/**
+ * Heading component.
+ *
+ * Render an HTML heading element or a paragraph with heading styles.
+ */
+export const Heading = forwardRef(HeadingWithRef);
diff --git a/src/components/atoms/headings/index.ts b/src/components/atoms/headings/index.ts
new file mode 100644
index 0000000..3de265c
--- /dev/null
+++ b/src/components/atoms/headings/index.ts
@@ -0,0 +1 @@
+export * from './heading';