1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
new file mode 100644
index 0000000..f1bbb34
--- /dev/null
+++ b/src/components/atoms/layout/section.tsx
@@ -0,0 +1,57 @@
+import { ReactNode, VFC } from 'react';
+import Heading from '../headings/heading';
+import styles from './section.module.scss';
+
+export type SectionVariant = 'dark' | 'light';
+
+export type SectionProps = {
+  /**
+   * Set additional classnames to the section element.
+   */
+  className?: string;
+  /**
+   * The section content.
+   */
+  content: ReactNode;
+  /**
+   * The section title.
+   */
+  title: string;
+  /**
+   * The section variant.
+   */
+  variant?: SectionVariant;
+  /**
+   * Add a border at the bottom of the section. Default: true.
+   */
+  withBorder?: boolean;
+};
+
+/**
+ * Section component
+ *
+ * Render a section element.
+ */
+const Section: VFC<SectionProps> = ({
+  className = '',
+  content,
+  title,
+  variant = 'dark',
+  withBorder = true,
+}) => {
+  const borderClass = withBorder ? styles[`wrapper--borders`] : '';
+  const variantClass = styles[`wrapper--${variant}`];
+
+  return (
+    <section
+      className={`${styles.wrapper} ${borderClass} ${variantClass} ${className}`}
+    >
+      <Heading level={2} className={styles.title}>
+        {title}
+      </Heading>
+      <div className={styles.body}>{content}</div>
+    </section>
+  );
+};
+
+export default Section;