Setup the timeline events grid

src/components/pages/Timeline/index.tsx

@@ -143,6 +143,17 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
               }}
             ></div>
           </div>
+          <div className={styles.timelineCardGrid} style={{
+              gridTemplateColumns: `repeat(${numWeeks}, 3rem 3rem 3rem 3rem 3rem 0.625rem`,
+              gridTemplateRows: `4.25rem 4.25rem 0.3125rem repeat(${7}, 4.25rem 4.25rem 0.625rem) 4.25rem 4.25rem 0.3125rem`
+            }}>
+            <div className={styles.timelineEvent} style={{ gridColumn: `1 / 9`}}>
+              <span className={styles.eventTitle}>Title of the first event</span>
+            </div>
+            <div className={styles.timelineEvent} style={{ gridColumn: `3 / 24`, gridRow: `2`}}>
+              <span className={styles.eventTitle}>Title of the second event</span>
+            </div>
+          </div>
         </div>
       </div>
     );

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

@@ -52,7 +52,7 @@
   top: 0;
   left: 0;
   position: sticky;
-  z-index: 3;
+  z-index: 5;
   background: var(--background-color);
   padding-right: 1.25rem;
   padding-left: 0.625rem;
@@ -75,7 +75,7 @@
   background: var(--background-color);
   padding-bottom: 0.625rem;
   height: 5.5rem !important;
-  z-index: 2;
+  z-index: 4;
 }
 
 .timelineModuleColumn {
@@ -90,7 +90,7 @@
   margin-bottom: 0.625rem;
   background: var(--background-color);
   padding-top: 0.625rem;
-  z-index: 2;
+  z-index: 4;
 }
 
 .weekHeading {
@@ -105,6 +105,7 @@
 	column-gap: 0.625rem;
   row-gap: 0;
   margin-bottom: 0.625rem;
+  z-index: 1;
 }
 
 .timelineBackgroundEven {
@@ -128,7 +129,7 @@
 .dayIndicatorGrid {
   grid-area: background; 
   padding-top: 0.625rem;
-  z-index: 1;
+  z-index: 2;
   display: grid;
   grid-template-rows: auto;
 }
@@ -141,3 +142,24 @@
   background-color: var(--day-indicator-column);
   border: 0.0625rem solid var(--border-color);
 }
+
+.timelineCardGrid {
+  padding-top: 0.625rem;
+  display: grid;
+  grid-area: background;
+  z-index: 3;
+}
+
+.timelineEvent {
+  background: red;
+  margin: 0.5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.eventTitle {
+  color: var(--primary-text-color);
+  font-size: 1rem;
+}