✨ feat: Collection Heading

src/components/common/CollectionHeading/CollectionHeading.module.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/utilities';
+
+.subtitle {
+    @apply spacing-horizontal-left;
+    font-size: var(--font-size);
+    line-height: var(--line-height);   
+}

src/components/common/CollectionHeading/CollectionHeading.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+// import classNames from 'classnames'
+import s from './CollectionHeading.module.scss'
+import HeadingCommon from '../HeadingCommon/HeadingCommon'
+
+interface CollectionHeadingProps {
+    headingType?: 'default' | 'highlight' | 'light'
+    headingText: string;
+    subtitle: string
+}
+
+const CollectionHeading = ({ headingType='default', headingText, subtitle }: CollectionHeadingProps) => {
+
+    return (
+        <section className="collectionHeading">
+            <HeadingCommon headingType={headingType} headingText={headingText}/>
+            <div className={s.subtitle}>{subtitle}</div>
+        </section>
+    )
+
+}
+
+export default CollectionHeading