Make card font bigger and add key prop

src/components/Card/Card.scss

@@ -24,10 +24,13 @@
 
   &__title {
     padding: 0.5rem;
+    margin-bottom: 0.5rem;
     display: flex;
     justify-content: center;
     font-size: 1.5rem;
     text-align: center;
+    font-weight: 300;
+    color: $black;
   }
 
   &__image {
@@ -61,9 +64,11 @@
     justify-content: center;
     text-align: center;
     text-overflow: ellipsis;
-    font-size: 12px;
-    font-weight: 200;
+    font-size: 16px;
     margin: 0 0 0.5rem;
+    font-weight: 200;
+    line-height: 22px;
+    color: $black;
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;

src/pages/FrontPage/FrontPage.tsx

@@ -102,22 +102,22 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
           </HeroAsideSection>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} cardSection>
-          {events.map(event => (
-            <Card
-              key={event.id}
-              title={event.title}
-              start_time={event.start_time}
-              text={event.description}
-              link={"/events/" + event.id}
-              image={BeerImage}
-              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
-            />
-          ))}
-          <div className="card">
-            <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
-              Kaikki tapahtumat
-            </PageLink>
-          </div>
+        {events.map(event => (
+          <Card
+            key={event.id}
+            title={event.title}
+            start_time={event.start_time}
+            text={event.description}
+            link={"/events/" + event.id}
+            image={BeerImage}
+            button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
+          />
+        ))}
+        <div className="card" key="links">
+          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
+            Kaikki tapahtumat
+          </PageLink>
+        </div>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.Orange}>
           <Ribbon>
@@ -127,23 +127,23 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} bottomBorder cardSection>
           {feed.map(inst => (
-              <Card
-                key={inst.id}
-                title={inst.title}
-                start_time={inst.publish_time}
-                text={inst.description}
-                link={"/feed/" + inst.id}
-                button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
-              />
-            ))}
-            <div className="card">
-              <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
-                Lue tuoreimmat uutiset
-              </PageLink>
-              <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-                Kuvia tapahtumista
-              </PageLink>
-            </div>
+            <Card
+              key={inst.id}
+              title={inst.title}
+              start_time={inst.publish_time}
+              text={inst.description}
+              link={"/feed/" + inst.id}
+              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
+            />
+          ))}
+          <div className="card" key="links">
+            <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
+              Lue tuoreimmat uutiset
+            </PageLink>
+            <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+              Kuvia tapahtumista
+            </PageLink>
+          </div>
         </PageSection>
         <PageSection center backgroundColor={PageSectionColor.White}>
           <SponsorReel />