SecondaryHeroSection

src/components/HeroMainSection/HeroMainSection.scss

@@ -8,9 +8,12 @@
   flex: 6;
   text-align: center;
   font-weight: 100;
-  padding: 2rem 1rem 2rem;
   line-height: 24px;
 
+  & > div {
+    padding: 2rem 1rem 2rem;
+  }
+
   h1 {
     max-width: 600px;
     line-height: 40px;

src/components/HeroSecondarySection/HeroSecondarySection.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import styled from "styled-components";
+import ColorDiv from "../ColorDiv/index";
+
+interface HeroSecondarySectionItemProps {
+  note?: string;
+}
+
+const Note = styled.span`
+  color: white;
+  transform-origin: right;
+  transform: rotate(-90deg);
+  height: fit-content;
+  text-transform: uppercase;
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-right: 2rem;
+  margin-top: -0.5rem;
+`;
+
+const Item = styled.div`
+  display: flex;
+  text-align: left;
+  flex: 1 0;
+  margin: 1rem 2rem 1rem;
+`;
+
+export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({note, children}) => (
+  <Item>
+    <Note>
+      {note}
+    </Note>
+    {children}
+  </Item>
+)
+
+const Container = styled(ColorDiv)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    padding: 1em 0;
+  }
+`;
+
+const Items = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+interface HeroSecondarySectionProps {
+  title: string;
+}
+
+const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({title, children}) => (
+  <Container textColor="dark-blue" backgroundColor="green1">
+    <h1>{title}</h1>
+    <Items>
+      {children}
+    </Items>
+  </Container>
+)
+
+export default HeroSecondarySection;

src/pages/ActualPage/ActualPage.tsx

@@ -11,6 +11,7 @@ import Ribbon from "../../components/Ribbon/index";
 import TextAnchor from "../../components/TextAnchor/index";
 import Button, { ButtonType } from "../../components/Button/index";
 import Accordion from "../../components/Accordion";
+import HeroSecondarySection, { HeroSecondarySectionItem } from "../../components/HeroSecondarySection/HeroSecondarySection";
 
 export interface ActualPageProps {}
 export interface ActualPageState {}
@@ -38,11 +39,14 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
                 </Button>
               </div>
             </div>
-            <div className="hero-secondary-section">
-              <h1>Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)</h1>
-              <p>Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</p>
-              <p>Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</p>
-            </div>
+            <HeroSecondarySection title="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)">
+              <HeroSecondarySectionItem note="Ma">
+                <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
+              </HeroSecondarySectionItem>
+              <HeroSecondarySectionItem note="To">
+                <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
+              </HeroSecondarySectionItem>
+            </HeroSecondarySection>
           </HeroMainSection>
           <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
             <p>

src/theme/colors.ts

@@ -15,7 +15,7 @@ export type Colors =
   "inherit";
 
 
-export const colorToClass = (color: Colors): string => `color-div__${color}`;
-export const bgColorToClass = (color: Colors): string => `color-div__background_${color}`;
-export const hoverColorToClass = (color: Colors): string => `color-div__${color}Hoverable`;
-export const bgHoverColorToClass = (color: Colors): string => `color-div__background_${color}Hoverable`;
+export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined;
+export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined;
+export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined;
+export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined;