diff --git a/src/components/Article/index.mdx b/src/components/Article/index.mdx
index cc2b4c5e..592ee7fc 100644
--- a/src/components/Article/index.mdx
+++ b/src/components/Article/index.mdx
@@ -5,6 +5,7 @@ route: /article
 
 import { Playground, PropsTable } from 'docz'
 import Article from '.'
+import { css } from 'react-emotion'
 
 # Article
 
@@ -16,6 +17,7 @@ Note that `Article` expects an array of `Content`, which
 
 <Playground>
   <Article
+    style={css`color: red;`}
     dropcap={true}
     content={[
       {
diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
index f879e10b..6d4978a2 100644
--- a/src/components/Article/index.tsx
+++ b/src/components/Article/index.tsx
@@ -23,6 +23,8 @@ interface ArticleProps {
   /** The paragraphs of content for the story. */
   content: Content[]
   dropcap: boolean
+  /** custom css for the article component */
+  style?: string
 }
 
 /** A footer to go at the bottom of every page. */
@@ -70,6 +72,7 @@ export default class Article extends React.Component<ArticleProps> {
                 }
               `
             : ''};
+          ${this.props.style};
         `}
       >
         {renderedContent}
diff --git a/src/components/ArticleGrid/index.mdx b/src/components/ArticleGrid/index.mdx
index 227d30f6..88c76a73 100644
--- a/src/components/ArticleGrid/index.mdx
+++ b/src/components/ArticleGrid/index.mdx
@@ -5,6 +5,7 @@ route: /article-grid
 
 import { Playground, PropsTable } from 'docz'
 import ArticleGrid from '.'
+import { css } from 'react-emotion'
 
 # ArticleGrid
 
@@ -13,5 +14,8 @@ A grid of articles for displaying on grid layout flatpages.
 <PropsTable of={ArticleGrid} />
 
 <Playground>
-  <ArticleGrid heading="News" articles={[]} />
+  <ArticleGrid style={css`
+    color: blue;
+  `}
+  heading="News" articles={[]} />
 </Playground>
diff --git a/src/components/ArticleGrid/index.tsx b/src/components/ArticleGrid/index.tsx
index ee3c05d6..c1a9116e 100644
--- a/src/components/ArticleGrid/index.tsx
+++ b/src/components/ArticleGrid/index.tsx
@@ -11,6 +11,7 @@ interface ArticleGridProps {
   articles: ArticleCardData[]
   maxColumns: number
   minColumns: number
+  style?: string
 }
 
 export default class ArticleGrid extends React.Component<ArticleGridProps> {
@@ -47,6 +48,7 @@ export default class ArticleGrid extends React.Component<ArticleGridProps> {
         id={!!this.props.heading ? slugify(this.props.heading) : undefined}
         className={css`
           margin-top: 20px;
+          ${this.props.style};
         `}
       >
         {!!this.props.heading && (
diff --git a/src/components/Byline/index.mdx b/src/components/Byline/index.mdx
index 128bf79c..89a72fc9 100644
--- a/src/components/Byline/index.mdx
+++ b/src/components/Byline/index.mdx
@@ -5,6 +5,7 @@ route: /byline
 
 import { Playground, PropsTable } from 'docz'
 import Byline from '.'
+import { css } from 'react-emotion'
 
 # Byline
 
@@ -13,6 +14,9 @@ Every story needs an author and a byline.
 <PropsTable of={Byline} />
 
 <Playground>
-  <Byline authors="Tanner Walters" />
+  <Byline style={css`
+    font-weight: bold
+    `}
+  authors="Tanner Walters" />
   <Byline authors={["Tanner Walters", "Mackenzie Possee", "Jacob Preal"]} />
 </Playground>
diff --git a/src/components/Byline/index.tsx b/src/components/Byline/index.tsx
index 157aed19..d3be0afe 100644
--- a/src/components/Byline/index.tsx
+++ b/src/components/Byline/index.tsx
@@ -8,6 +8,8 @@ import toSentence from '../../utils/toSentence'
 interface BylineProps {
   /** The authors of the story. */
   authors: string | string[]
+  /** Custom css for the byline */
+  style?: string
 }
 
 /** The byline of the story. */
@@ -21,6 +23,7 @@ export default function Byline(props: BylineProps) {
     <div
       className={css`
         padding-top: 5px;
+        ${props.style};
       `}
     >
       By {authorString}
diff --git a/src/components/CoverPhoto/index.mdx b/src/components/CoverPhoto/index.mdx
index 92bd43d8..2c09b8da 100644
--- a/src/components/CoverPhoto/index.mdx
+++ b/src/components/CoverPhoto/index.mdx
@@ -5,6 +5,7 @@ route: /cover-photo
 
 import { Playground, PropsTable } from 'docz'
 import CoverPhoto from '.'
+import { css } from 'react-emotion'
 
 # Cover Photo
 
@@ -13,7 +14,7 @@ A cover photo.
 <PropsTable of={CoverPhoto} />
 
 <Playground>
-  <CoverPhoto headline="Gene Block starts meme factory" authors="Tanner Walters" imageURL="https://features.dailybruin.com/2017/close-to-home/img/web.enterprise.anonymous.DLee.jpg"
+  <CoverPhoto style={css`border-radius: 10em;`} headline="Gene Block starts meme factory" authors="Tanner Walters" imageURL="https://features.dailybruin.com/2017/close-to-home/img/web.enterprise.anonymous.DLee.jpg"
   xPosition="center"
   yPosition="center"
    />
diff --git a/src/components/CoverPhoto/index.tsx b/src/components/CoverPhoto/index.tsx
index e75229ec..0530895a 100644
--- a/src/components/CoverPhoto/index.tsx
+++ b/src/components/CoverPhoto/index.tsx
@@ -22,6 +22,7 @@ interface CoverPhotoProps {
   xPosition: XPosition
   yPosition: YPosition
   darken?: number
+  style?: string
 }
 
 export default class CoverPhoto extends React.Component<CoverPhotoProps> {
@@ -52,6 +53,7 @@ export default class CoverPhoto extends React.Component<CoverPhotoProps> {
         display: grid;
         align-items: ${this.props.yPosition};
         justify-content: ${this.props.xPosition};
+        ${this.props.style}
       `}
       >
         <div
diff --git a/src/components/Footer/index.mdx b/src/components/Footer/index.mdx
index edf0354a..f7efa516 100644
--- a/src/components/Footer/index.mdx
+++ b/src/components/Footer/index.mdx
@@ -5,6 +5,7 @@ route: /footer
 
 import { Playground, PropsTable } from 'docz'
 import Footer from '.'
+import { css } from 'react-emotion'
 
 # Footer
 
@@ -14,6 +15,10 @@ Every web page needs a footer.
 
 <Playground>
   <Footer
+    style={css`
+              background-color: #0B5FFF;
+              color: #FFF;
+              `}
     githubLink={'https://dailybruin.com/'}
     developers={['Nathan Smith', 'Michael Zhang', 'Dustin Newman']}
   />
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index fb886b9f..a2957613 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -25,17 +25,19 @@ interface FooterProps {
   copyrightYear: number
   /** What type of project this footer is being used in. */
   footerType: ComponentType
+  /** Custom css for the footer component */
+  style?: string
 }
 
 /** A footer to go at the bottom of every page. */
 class Footer extends React.Component<FooterProps> {
   static defaultProps = {
     license: License.Copyright,
-    footerType: ComponentType.Default
+    footerType: ComponentType.Default,
   }
 
   render() {
-    if(this.props.footerType === ComponentType.Default) {
+    if (this.props.footerType === ComponentType.Default) {
       return (
         <footer
           className={css`
@@ -50,6 +52,7 @@ class Footer extends React.Component<FooterProps> {
             @media (max-width: 600px) {
               font-size: 0.8rem;
             }
+            ${this.props.style};
           `}
         >
           <div>
@@ -66,7 +69,9 @@ class Footer extends React.Component<FooterProps> {
               >
                 Site code available on{' '}
                 <a
-                  href={`https://github.com/dailybruin/${this.props.githubName}`}
+                  href={`https://github.com/dailybruin/${
+                    this.props.githubName
+                  }`}
                 >
                   GitHub
                 </a>
@@ -85,11 +90,9 @@ class Footer extends React.Component<FooterProps> {
           </div>
         </footer>
       )
-    } else /** this.props.footerType === ComponentType.MainSite */{
+    } /** this.props.footerType === ComponentType.MainSite */ else {
       /** This should be updated if more typeEnums are added */
-      return(
-        <MainSiteFooter/>
-      )
+      return <MainSiteFooter />
     }
   }
 }
diff --git a/src/components/Headline/index.mdx b/src/components/Headline/index.mdx
index 8d63b497..722cfb69 100644
--- a/src/components/Headline/index.mdx
+++ b/src/components/Headline/index.mdx
@@ -5,6 +5,7 @@ route: /headline
 
 import { Playground, PropsTable } from 'docz'
 import Headline from '.'
+import { css } from 'react-emotion'
 
 # Headline
 
@@ -13,5 +14,5 @@ Every story needs a headline.
 <PropsTable of={Headline} />
 
 <Playground>
-  <Headline text="Gene Block Starts Meme Factory"/>
+  <Headline style={css`color: #0B5FFF;`} text="Gene Block Starts Meme Factory"/>
 </Playground>
diff --git a/src/components/Headline/index.tsx b/src/components/Headline/index.tsx
index 569c43ae..75bb2f13 100644
--- a/src/components/Headline/index.tsx
+++ b/src/components/Headline/index.tsx
@@ -7,9 +7,11 @@ import { css } from 'react-emotion'
 interface HeadlineProps {
   /** The headline of the story. */
   text: string
+  /** Custom css for the headline component */
+  style?: string
 }
 
 /** The story's headline. */
 export default function Headline(props: HeadlineProps) {
-  return <h1>{props.text}</h1>
+  return <h1 className={props.style}>{props.text}</h1>
 }
diff --git a/src/components/Image/index.mdx b/src/components/Image/index.mdx
index ffd5710e..0cf50e5f 100644
--- a/src/components/Image/index.mdx
+++ b/src/components/Image/index.mdx
@@ -5,6 +5,7 @@ route: /image
 
 import { Playground, PropsTable } from 'docz'
 import Image from '.'
+import { css } from 'react-emotion'
 
 # Image
 
@@ -18,5 +19,8 @@ An image with a caption.
     caption="Freshman attacker Ashworth Molthen has registered 21 goals on the season, finding the back of the net in 13 of the 16 games so far this year for UCLA men’s water polo. UCLA is one of two teams remaining in the MPSF conference that remains undefeated."
     credit="Amy Dixon/Photo editor"
     alt="Ashworth Molthen playing water polo."
+    style={css`
+          color: red;
+          `}
   />
 </Playground>
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index cd2a7c57..8b1a9e17 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -6,15 +6,16 @@ export interface ImageProps {
   caption: string
   credit: string
   alt: string
+  /** Custom css for the image component */
+  style?: string
 }
 
 export default function Image(props: ImageProps) {
   if (!props.alt) {
     throw new Error('Image requires a meaningful `alt` value.')
   }
-
   return (
-    <figure>
+    <figure className={props.style}>
       <img
         className={css`
           width: 100%;