make some fun components for rich text and events 🎷

web/src/components/events/EventItem.tsx

@@ -0,0 +1,13 @@
+import styles from "./eventItem.module.scss";
+
+export const EventItem = () => {
+  return (
+    <li className={`${styles.eventItem} linkItem`}>
+      <div className={styles.image}></div>
+      <div className={styles.text}>
+        <h1 className={styles.title}>Arrangementstittel</h1>
+        <p className={styles.details}>Detaljer og tidspunkt</p>
+      </div>
+    </li>
+  );
+};

web/src/components/events/EventList.tsx

@@ -0,0 +1,13 @@
+import { EventItem } from "./EventItem";
+import styles from "./eventList.module.scss";
+
+export const EventList = () => {
+  return (
+    <ul className={styles.eventList}>
+      <EventItem />
+      <EventItem />
+      <EventItem />
+      <EventItem />
+    </ul>
+  );
+};

web/src/components/events/eventItem.module.scss

@@ -0,0 +1,23 @@
+.eventItem {
+  position: relative;
+  list-style: none;
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-neufPink);
+}
+
+.text {
+  padding: .8rem 0;
+}
+
+.title,
+.details {
+  font-size: 1.6rem;
+}
+
+.details {
+  font-family: var(--font-serif);
+}

web/src/components/events/eventList.module.scss

@@ -0,0 +1,7 @@
+.eventList {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
+}