Started work on the facility cards.

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/CardContainer.js

 import React from 'react'
 import {withStyles} from 'material-ui/styles';
 import FacilityCard from '../containers/FacilityCard'
+import Grid from 'material-ui/Grid';
 
-const CardContainer = ({classes,facilities}) => {
+const CardContainer = ({classes, facilities}) => {
     return (
-        <div className={classes.root}>
-            {facilities.map((item) =>{
-               return <FacilityCard key={item.slug} facility={item}/>
-            })}
-        </div>
+        <Grid container className={classes.root} spacing={24}>
+            {facilities.map(item =>
+                <Grid key={item.slug} item>
+                    <FacilityCard facility={item}/>
+                </Grid>
+            )}
+        </Grid>
     )
 }
 const styleSheet = {
-    root:{
-        width:'100%',
-        height:'100%',
-        display:'flex',
-        flexWrap:'wrap',
+    root: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
     }
 }
 

src/containers/FacilityCard.js

 import React from 'react'
 import {withStyles} from 'material-ui/styles';
-import Paper from 'material-ui/Paper';
+import Card, {CardContent, CardMedia} from 'material-ui/Card';
+import Typography from 'material-ui/Typography';
 import {compose} from 'redux'
 import {connect} from 'react-redux'
 import {setSidebar} from '../actions/ui'
+import FacilityStatus from './FacilityStatus';
 
-const FacilityCard = ({classes,facility,setSidebar}) => {
+
+const FacilityCard = ({classes, facility, setSidebar}) => {
 
     const handleClick = () => {
         setSidebar(facility)
-    }
+    };
     const removeBrackets = (name) => {
-        if(typeof(name) === "undefined"){
+        if (typeof(name) === "undefined") {
             return ""
         }
-        const openBracket = name.indexOf('[')
-         if(openBracket !== -1){
-            return name.substring(0,openBracket)
+        const openBracket = name.indexOf('[');
+        if (openBracket !== -1) {
+            return name.substring(0, openBracket)
         }
         return name
-     } 
-    return(
-        <Paper onClick={handleClick} className={classes.root}>
+    };
+    return (
+        <Card onClick={handleClick} className={classes.root}>
+            <CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>
+            <CardContent>
+                <Typography type={'title'} align={'center'} className={classes.title} noWrap>
                     {removeBrackets(facility.facility_name)}
-        </Paper>
+                </Typography>
+                <FacilityStatus/>
+                <Typography type={'caption'} align={'center'} className={classes.location}>
+                    {removeBrackets(facility.facility_location.building)}
+                </Typography>
+            </CardContent>
+        </Card>
     )
-}
+};
 const styleSheet = {
-    root:{
-        width:100,
-        height:100,
+    root: {
+        width: 200,
+        height: 200,
+    },
+    card: {
+        maxWidth: 345
+    },
+    media: {
+        flex: 1,
+        width: 200,
+        height: 100,
+        resizeMode: 'cover',
+    },
+    title: { //TODO: Should the fonts be added here or in the muitheme (index.js)?
+        fontFamily: 'Nunito',
+        fontWeight: 'Bold'
+    },
+    location: {
+        fontFamily: 'Nunito'
     }
-}
+};
 
-export default compose(connect(null,{setSidebar}),withStyles(styleSheet))(FacilityCard)
\ No newline at end of file
+export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file

src/containers/FacilityStatus.js

+import React from 'react'
+import {withStyles} from 'material-ui/styles';
+import Chip from 'material-ui/Chip'
+
+const FacilityStatus = ({classes, facility}) => {
+    return (
+        <Chip label={'Todo'} className={classes.chip} />
+    )
+};
+const styleSheet = {
+    chip: {
+        margin: 'auto',
+        height: '24px'
+    }
+};
+
+export default withStyles(styleSheet)(FacilityStatus);
\ No newline at end of file