diff --git a/src/components/StopTitle.js b/src/components/StopTitle.js
new file mode 100644
index 0000000..d2bf05c
--- /dev/null
+++ b/src/components/StopTitle.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import './css/StopTitle.css';
+
+class StopTitle extends Component {
+ render() {
+ return (
+
+
+
+
{this.props.departure.time}
+ {lineInterference &&
+
+ }
+
+
+
+
{this.props.departure.lineName}
+
+
{this.props.departure.destination}
+
+ {infoElem}
+
+
+
+ {lineInterference &&
+
+ }
+
+ );
+ }
+}
+
+export default TrafficEntry;
\ No newline at end of file
diff --git a/src/components/TrafficList.js b/src/components/TrafficList.js
new file mode 100644
index 0000000..d96e079
--- /dev/null
+++ b/src/components/TrafficList.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+import TrafficEntry from './TrafficEntry.js';
+
+import './css/TrafficInfo.css';
+
+class TrafficList extends Component {
+ render() {
+ let entries = [];
+
+ this.props.departures.forEach(departure => {
+ entries.push(
+
+ {entries.map(element => {
+ return element
+ })}
+
+ );
+ }
+}
+
+export default TrafficList;
\ No newline at end of file
diff --git a/src/components/css/StopTitle.css b/src/components/css/StopTitle.css
new file mode 100644
index 0000000..3c80e0d
--- /dev/null
+++ b/src/components/css/StopTitle.css
@@ -0,0 +1,39 @@
+#stopTitle {
+ text-align: left;
+ background: white;
+ border-radius: var(--borderRadius);
+ box-shadow: var(--boxShadow);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ padding: 0 5vw;
+}
+
+#stopTitle h1, #stopTitle h3 {
+ font-weight: 100;
+}
+
+#stopTitle div {
+ display: flex;
+ flex-direction: row;
+}
+
+#stopTitle h3 {
+ color: rgba(0, 0, 0, 0.4);
+}
+
+#stopTitle button {
+ width: auto;
+ height: 100%;
+ box-shadow: none;
+ background: rgba(0, 0, 0, 0.2);
+ display: block;
+ flex-flow: row;
+ margin-left: 10px;
+ padding: 0 2.5vw;
+ border-radius: calc(var(--topMenuHeight) / 15);
+}
+
+#stopTitle button:active {
+ background: rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file
diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css
new file mode 100644
index 0000000..088bc6c
--- /dev/null
+++ b/src/components/css/TrafficInfo.css
@@ -0,0 +1,84 @@
+#trafficList {
+ height: 100%;
+ margin-top: 40px;
+ background: white;
+}
+
+.trafficEntry {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ width: 100vw;
+ padding: 6vw 0;
+ background: white;
+}
+
+.trafficEntry div {
+ width: 90%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ margin-bottom: 8px;
+}
+
+.trafficEntry div p {
+ text-align: left;
+ font-size: 3.5vw;
+ padding: 3vw 0;
+}
+
+.trafficEntry div div {
+ display: flex;
+ flex-direction: column;
+}
+
+.timeColumn {
+ flex-basis: 15%;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.timeColumn img {
+ width: 20px;
+}
+
+.lineColumn {
+ flex-basis: 75%;
+}
+
+.lineColumn img {
+ width: 30px;
+ margin-right: 10px;
+}
+
+.trafficEntry div div div {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-end;
+}
+
+.lineName {
+ background: var(--colorLine);
+ color: white;
+ font-size: 6vw;
+ font-weight: 100;
+ margin-right: 10px;
+ padding: 1vw 4vw;
+}
+
+.destination {
+ font-size: 100%;
+ text-align: left;
+}
+
+.trafficEntry button {
+ width: 90%;
+ font-size: 4vw;
+ font-weight: bold;
+ color: var(--colorVT1);
+ padding: 4vw 0;
+ border-radius: var(--borderRadius);
+ box-shadow: var(--boxShadow);
+}
\ No newline at end of file
diff --git a/src/components/pages/TrafficInfo.js b/src/components/pages/TrafficInfo.js
index 284e9ad..803d04e 100644
--- a/src/components/pages/TrafficInfo.js
+++ b/src/components/pages/TrafficInfo.js
@@ -1,14 +1,35 @@
import React, { Component } from 'react';
import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
import MainArea from '../MainArea.js';
+import StopTitle from '../StopTitle.js';
+import TrafficList from '../TrafficList.js';
+
+import Stop from '../../classes/Stop.js';
+import Departure from '../../classes/Departure.js';
class TrafficInfo extends Component {
render() {
+ let testStop =
+ new Stop(
+ "Lemmingsgatan",
+ ["Läge A", "Läge B", "Läge C"],
+ [
+ new Departure("519", "Mot Heden", "11:59", "Trafikolycka vid Partille Centrum."),
+ new Departure("58", "Mot Västra Eriksberg", "12:07")
+ ],
+ );
+
return (
<>