diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js
new file mode 100644
index 0000000..3af9c0c
--- /dev/null
+++ b/src/components/EmailHeader/EmailHeader.js
@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Card, CardHeader, makeStyles } from "@material-ui/core";
+import UserAvatar from "../UserAvatar/";
+import webqueue2Theme from "../../theme";
+
+export default function EmailHeader({name, date, email}){
+
+	const theme = webqueue2Theme(false);
+	const useStyles = makeStyles({
+		"verticalPadding": {
+			paddingTop: theme.spacing(1),
+			paddingBottom: theme.spacing(1),
+		},
+		"removeCardHeaderPadding": {
+			padding: "0"
+		}
+	});
+	const classes = useStyles();
+
+	/**
+	 * Returns the title for the user.
+	 * @param {string} name Name of the user.
+	 * @param {string} email Email address of the user.
+	 * @example
+	 * // Has alias and name
+	 * return "campb303 (Justin Campbell)"
+	 * // Has alias but no name
+	 * return "campb303"
+	 * // Has no alias and no name
+	 * return ""
+	 * @returns {string}
+	 */
+	function buildTitle(name, email){
+		let title = "";		
+		const isNotEmpty = (value) => {
+			return value === "" || value === null ? false : true;
+		};
+		if (isNotEmpty(name)){
+			title += `${name}`;
+		};
+		if (isNotEmpty(email)){
+			title += ` <${email}>`
+		}
+		return title;
+	};
+
+	return(
+		<Card elevation={0} classes={{root: classes.verticalPadding}}>
+			<CardHeader
+				avatar={<UserAvatar userName={name} />}
+				title={buildTitle(name, email)}
+				subheader={Date(date)}
+				classes={{root: classes.removeCardHeaderPadding}}
+			/>
+		</Card>
+	);
+};
+
+EmailHeader.propTypes = {
+	/** Name of the user. */
+	"name": PropTypes.string,
+	/** Date of the message. */
+	"date": PropTypes.string,
+	/** Email address of the user. */
+	"email": PropTypes.string
+};
+
+EmailHeader.defaultProps = {
+	"name": "",
+	"date": "",
+	"email": ""
+};
\ No newline at end of file
diff --git a/src/components/EmailHeader/EmailHeader.md b/src/components/EmailHeader/EmailHeader.md
new file mode 100644
index 0000000..e163f38
--- /dev/null
+++ b/src/components/EmailHeader/EmailHeader.md
@@ -0,0 +1,9 @@
+Description of EmailHeader.
+
+```jsx
+import EmailHeader from "./EmailHeader";
+<EmailHeader />
+```
+```jsx static
+<EmailHeader />
+```
\ No newline at end of file
diff --git a/src/components/EmailHeader/index.js b/src/components/EmailHeader/index.js
new file mode 100644
index 0000000..d4df79e
--- /dev/null
+++ b/src/components/EmailHeader/index.js
@@ -0,0 +1 @@
+export { default as EmailHeader } from "./EmailHeader";
\ No newline at end of file