Basic implementation of weekheadings

src/components/pages/Timeline/components/ModuleHeading/index.tsx

 import React from "react";
 import Card from "react-bootstrap/Card";
-const ModuleHeading: React.FC = () => {
+import styles from "./style.module.scss";
+
+export interface ModuleHeadingprops {
+  moduleCode: string;
+  title: string;
+}
+
+const ModuleHeading: React.FC<ModuleHeadingprops> = ({ moduleCode, title }) => {
   return (
-    <Card>
-			
+    <Card className={styles.moduleCard}>
+      <Card.Header>
+        <span>{moduleCode}</span>
+      </Card.Header>
+      <Card.Body>
+        <Card.Text>{title}</Card.Text>
+      </Card.Body>
     </Card>
   );
 };

src/components/pages/Timeline/components/ModuleHeading/style.module.scss

+.moduleCard {
+  background: var(--background-color);
+  height: 100%;
+  border-width: 0rem;
+  border-radius: 0.5rem !important;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 1px solid var(--border-color);
+}
+.moduleCard:hover {
+  transform: scale(1.03);
+  text-decoration: none;
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+  border-color: var(--border-color-hover);
+}
+
+.moduleCard :global(.card-header) {
+  background: var(--background-color);
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  border-width: 0rem;
+  color: var(--primary-text-color);
+  font-weight: 500;
+  text-transform: uppercase;
+  text-align: right;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.moduleCard :global(.card-body) {
+  padding: 0.5rem;
+  color: var(--primary-text-color);
+}
+
+.moduleCard :global(.card-title) {
+  margin-bottom: 0;
+}
\ No newline at end of file

src/components/pages/Timeline/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 import styles from "./style.module.scss";
 import TermSwitcher from "./components/TermSwitcher";
+import ModuleHeading from "./components/ModuleHeading";
 
 interface TimelineProps {
   initSideBar: () => void;
@@ -22,6 +23,10 @@ class Timeline extends React.Component<TimelineProps, {}> {
       <div className={styles.timelineContainer}>
         <MyBreadcrumbs />
 				{/* <TermSwitcher/> */}
+				<ModuleHeading
+					moduleCode="CO112"
+					title="Introduction to Computer Systems"
+				/>
       </div>
     );
   }