diff --git a/README.md b/README.md
index c386c1f..6aa3fb8 100755
--- a/README.md
+++ b/README.md
@@ -1,75 +1,67 @@
-# [Stanford Starter](https://github.com/SU-SWS/lbretransportation_subtheme)
-##### Version: 8.x-1.0-dev
-
-Changelog: [Changelog.txt](CHANGELOG.txt)
+# [LBRE Transportation](https://github.com/SU-SWS/lbretransportation_subtheme)
+##### Version: 9.x
 
 Description
 ---
 
-Stanford Starter is a Stanford sub-theme that works with the Stanford Basic theme.
+LBRE Transportation is a Drupal 9 and is sub theme of Stanford Basic theme that integrates with the [Decanter Project](https://github.com/SU-SWS/decanter).
 
-Documentation
----
-See subtheming guides and best practices here: 
-https://devguide.sites.stanford.edu/front-end/drupal/sub-themes 
+It incorporates redesign of the following components and paragraphs:
+
+    Global alerts (Modified colors to the new color scheme)
+    Banner paragraph (Additional variants: Banner with floating box, 50-50, In-page alert)
+    Quick links (Additional variant of the Text area component)
+    Lists component (Redesign of Card grid layout for News, two color variants - Dark grey, Light grey)
+    Utility links in header
+
+All variants are added using Paragraph behaviours.
 
 Installation
 ---
-1. Review the documentation link above for best practices, particularly the Do's and Don't's sections.
-2. Fork or download this theme repository. 
-3. Change all theme file names from including "lbretransportation_subtheme" to including the machine name of your theme.
-4. Run a search and replace throughout the theme files to replace "lbretransportation_subtheme" with the machine name of your theme.
-5. Add any specific brand colors you need (in addition to the decanter colors that are already available) to src/scss/utilities/variables/_colors.scss. 
-See all the colors already available through decanter: https://decanter.stanford.edu/page/brand-design-elements-color/ 
-6. If desired, add font settings if you need to override and use fonts other than decanter fonts ( https://decanter.stanford.edu/page/brand-design-elements-typography/ ) [link],
-by defining a font library in the themename.libraries.yml file.
-7. If desired, add button mixins in src/scss/utilities/mixins/_buttons.scss with your button styles and then reference them and use them in src/scss/theme/_button.scss.
-8. If desired, add cta and link mixins in src/scss/utilities/mixins/_cta.scss with your button styles and then reference them and use them in src/scss/theme/_cta.scss.
-9. If you want to skin or theme a component, like a paragraph, create a _mycomponent.scss file in src/scss/components folder. Consider using a subfolder like 'cards' or 'banners' if applicable.
+
+Install this theme like any other theme. [See Drupal Documentation](https://www.drupal.org/docs/8/extending-drupal-8/installing-themes)
+
+This theme depends on the [`Components`](https://www.drupal.org/project/components) module to register template
+namespaces. If downloading this theme via composer, the module is already downloaded and simply needs to be enabled
+before the theme can be enabled.
+
+If using this theme in conjunction with configuration management and doing site install, a patch is included in the
+composer.json. Ensure that your project's root composer.json has [patching enabled](https://github.com/cweagans/composer-patches#allowing-patches-to-be-applied-from-dependencies)
+or download and patch Drupal Core manually.
 
 Configuration
 ---
 
-Nothing special needed. Install, enable, and set as the default active theme.
+Nothing special needed. Install, enable, and set as the default active theme. Once you have the theme enabled, be sure to check out the appearance settings for additional configuration items.
+
+
+Troubleshooting
+---
+
+If you are experiencing issues with this theme try disabling and clear the cache first. If you are still experiencing issues try posting an issue on the GitHub issues page.
+
+This theme is not intended to be used as an administration theme. Please use something else for that.
 
 Developer
 ---
 
-If you wish to develop on this theme you will most likely need to compile some new css. Please use the sass structure provided and compile with the sass compiler packaged in this theme. To install:
+Development tools: To build and compile the CSS, Javascript, and Image assets required to make this theme great, you will need to have npm and nvm installed.
+Navigate to the root of the theme then.
 
+Run:
 ```
+nvm use
 npm install
 ```
-After you've made a change you want to see processed, you can run:
+
+This project uses webpack to assemble the assets for this theme. To compile sass, javascript and push all assets in to place:
+
+Run:
 ```
-npm run build/yarn build
+npm run build
 ```
-This will process scss, js, and asset files, preparing them from the src directory to the dist directory.
 
+Or for development you can watch for changes and compile automatically with:
 ```
-npm run watch/yarn watch
+npm run watch
 ```
-This will watch the scss files and compile them upon saving.
-
-GitPod
----
-1. Add your ssh key to [GitPod](https://gitpod.io/variables)
-   1. It is recommended to have a password-less ssh key for simplicity.
-      1. `ssh-keygen -b 4096`, press enter when asked for the password
-      2. Add this ssh public key to the necessary services: Acquia, Github, etc.
-   2. Get the base64 string of your ssh key files
-      1. `cat id_rsa | base64` for the private key
-      2. `cat id_rsa.pub | base64` for the public key.
-   3. In GitPod, add the variable named `SSH_PRIVATE_KEY` with the private key
-   4. In GitPod, add the variable named `SSH_PUBLIC_KEY` with the public key
-   5. In Gitpod, add the variable named `GITCONFIG` with the base64 of your git config: `cat ~/.gitconfig | base64`
-2. Recommended, but not required:
-   1. install the GitPod browser plugin
-   2. Configure your browser settings for an easier experience: https://www.gitpod.io/docs/configure/browser-settings
-3. Open a gitpod workspace with [these instructions](https://www.gitpod.io/docs/getting-started#start-your-first-workspace)
-
-
-Contribution / Collaboration
----
-
-You are welcome to contribute functionality, bug fixes, or documentation to this theme. If you would like to suggest a fix or new functionality you may add a new issue to the GitHub issue queue or you may fork this repository and submit a pull request. For more help please see [GitHub's article on fork, branch, and pull requests](https://help.github.com/articles/using-pull-requests)
diff --git a/dist/css/main.css b/dist/css/main.css
index 8fbe4b5..ef15ae8 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -1 +1 @@
-.su-alert__text a{color:inherit}.su-alert--plain{background-color:#2e2d29}.su-alert--success{background-color:#017e7c}.su-alert--info{background-color:#016895}.su-alert--warning{background-color:#7f2d48}.su-alert--error{background-color:#8c1515}.style--quick-links .su-wysiwyg-text{background-color:#f4f4f4;padding:2.4rem 2.4rem 0}.style--quick-links .su-wysiwyg-text h3{font-size:2rem;line-height:1.2;margin-bottom:1.6rem}.style--quick-links .su-wysiwyg-text ul{list-style:none;margin:0;padding:0}.style--quick-links .su-wysiwyg-text ul li{border-top:1px solid rgba(46,45,41,.3);color:#8c1515;font-size:1.8rem;line-height:1.25;margin:0;padding:1.6rem 0}.style--quick-links .su-wysiwyg-text ul a{color:#8c1515;display:block;padding-right:3.2rem;position:relative;text-decoration:none}.style--quick-links .su-wysiwyg-text ul a:active,.style--quick-links .su-wysiwyg-text ul a:focus,.style--quick-links .su-wysiwyg-text ul a:hover{text-decoration:underline}.style--quick-links .su-wysiwyg-text ul a:after{content:"\203A";font-size:3.2rem;line-height:1.8rem;margin-top:-1.35rem;position:absolute;right:0;top:50%}.style--quick-links.color--black .su-wysiwyg-text,.style--quick-links.color--brick .su-wysiwyg-text,.style--quick-links.color--cardinal-red .su-wysiwyg-text,.style--quick-links.color--palo-verde .su-wysiwyg-text,.style--quick-links.color--sky-blue .su-wysiwyg-text{color:#fff}.style--quick-links.color--black .su-wysiwyg-text ul li,.style--quick-links.color--brick .su-wysiwyg-text ul li,.style--quick-links.color--cardinal-red .su-wysiwyg-text ul li,.style--quick-links.color--palo-verde .su-wysiwyg-text ul li,.style--quick-links.color--sky-blue .su-wysiwyg-text ul li{border-top-color:hsla(0,0%,100%,.3)}.style--quick-links.color--black .su-wysiwyg-text a,.style--quick-links.color--brick .su-wysiwyg-text a,.style--quick-links.color--cardinal-red .su-wysiwyg-text a,.style--quick-links.color--palo-verde .su-wysiwyg-text a,.style--quick-links.color--sky-blue .su-wysiwyg-text a{color:#fff}.style--quick-links.color--black .su-wysiwyg-text{background-color:#2e2d29}.style--quick-links.color--cardinal-red .su-wysiwyg-text{background-color:#8c1515}.style--quick-links.color--sky-blue .su-wysiwyg-text{background-color:#016895}.style--quick-links.color--brick .su-wysiwyg-text{background-color:#7f2d48}.style--quick-links.color--palo-verde .su-wysiwyg-text{background-color:#017e7c}.su-hero .su-hero__card{border:none;box-shadow:none;color:#fff}.su-hero.color--black .su-hero__card{background-color:#2e2d29}.su-hero.color--cardinal-red .su-hero__card{background-color:#8c1515}.su-hero.color--sky-blue .su-hero__card{background-color:#016895}.su-hero.color--brick .su-hero__card{background-color:#7f2d48}.su-hero.color--palo-verde .su-hero__card{background-color:#017e7c}.su-hero .su-card__contents a{color:#fff}.layout--banner{display:block;min-height:0}.layout--banner .su-hero__media{height:300px;min-height:0;position:static}@media only screen and (min-width:992px){.layout--banner .su-hero__media{height:608px}}.layout--banner .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}@media (max-width:991px){.layout--banner .su-hero__card{margin-top:0!important}}@media only screen and (min-width:992px){.layout--banner .su-hero__card{left:10.2rem;max-width:650px}}.layout--banner .su-hero__card .su-card__button{margin-bottom:0;margin-top:1.6rem}.layout--banner .su-hero__card .su-button.su-link{background-color:#fff;border:1px solid #8c1515;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);color:#8c1515;font-size:1.6rem;line-height:1.5;padding:1.2rem 2.4rem;text-decoration:none}@media only screen and (min-width:768px){.layout--banner .su-hero__card .su-button.su-link{font-size:1.8rem;padding:1.4rem 3rem}}.layout--banner .su-hero__card .su-button.su-link:active,.layout--banner .su-hero__card .su-button.su-link:focus,.layout--banner .su-hero__card .su-button.su-link:hover{text-decoration:underline}.layout--banner .su-card__contents{padding:2.4rem}.layout--banner .su-card__contents>:first-child{margin-top:0}.layout--banner .su-card__contents>h2{font-size:2.2rem;line-height:1.5;margin-bottom:1.2rem}@media only screen and (min-width:768px){.layout--banner .su-card__contents>h2{font-size:2.4rem;line-height:1.2;margin-bottom:1.6rem}}.layout--banner .su-card__contents p{font-size:1.8rem;margin-bottom:2.4rem}@media only screen and (min-width:768px){.layout--banner .su-card__contents p{margin-bottom:1.6rem}}.layout--banner .su-card__contents>p{font-size:1.6rem;line-height:1.25}.layout--banner .su-card__contents ul{list-style-type:none;margin:2.4rem 0 0;padding:0}@media only screen and (min-width:768px){.layout--banner .su-card__contents ul{margin-top:1.6rem}}.layout--banner .su-card__contents ul li:last-child p{margin-bottom:0}.layout--banner .su-card__contents ul a{padding-right:1.8rem;position:relative;text-decoration:none}.layout--banner .su-card__contents ul a:active,.layout--banner .su-card__contents ul a:focus,.layout--banner .su-card__contents ul a:hover{text-decoration:underline}.layout--banner .su-card__contents ul a:after{content:"\203A";font-size:3.2rem;line-height:1.8rem;margin-left:.8rem;position:absolute}.overlay-right .layout--banner .su-hero__card{right:auto}@media only screen and (min-width:992px){.overlay-right .layout--banner .su-hero__card{right:10.2rem}}.layout--in-page-alert{display:block;margin-left:2.4rem;margin-right:2.4rem;min-height:0}@media only screen and (min-width:992px){.layout--in-page-alert{margin-left:10.2rem;margin-right:10.2rem}}.layout--in-page-alert .su-hero__media{display:none}.layout--in-page-alert .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}.layout--in-page-alert .su-hero__card .su-card__button{margin-bottom:0;margin-top:0}.layout--in-page-alert .su-hero__card .su-button.su-link{background:none;font-size:1.6rem;font-weight:600;line-height:1.25;padding:0;text-decoration:underline}@media only screen and (min-width:768px){.layout--in-page-alert .su-hero__card .su-button.su-link{font-size:1.8rem}}.layout--in-page-alert .su-hero__card .su-button.su-link:active,.layout--in-page-alert .su-hero__card .su-button.su-link:focus,.layout--in-page-alert .su-hero__card .su-button.su-link:hover{background-color:#fff;color:#2e2d29}.layout--in-page-alert .su-card__contents{padding:1.8rem}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents{align-items:center;display:flex}}.layout--in-page-alert .su-card__contents:before{content:"\f05a";display:inline-block;font-family:Font Awesome\ 5 Free;font-weight:600;margin-bottom:1em;margin-right:.5em}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents:before{margin-bottom:0;margin-right:2.6rem}}.layout--in-page-alert .su-card__contents>:first-child{margin-top:0}.layout--in-page-alert .su-card__contents>span{display:inline-block;font-size:1.7rem;font-weight:600;letter-spacing:.1em;line-height:100%;margin:0;text-transform:uppercase}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents>span{margin-left:calc(.5em - 2.6rem);margin-right:2.6rem}}.layout--in-page-alert .su-card__contents>span:after{content:":"}.layout--in-page-alert .su-card__inner>h2{font-size:1.5625em;letter-spacing:-.012em;margin-bottom:1rem}.layout--in-page-alert .su-card__inner p{line-height:1.4;margin-bottom:0}.layout--in-page-alert.color--black .su-card__contents:before{content:"\f0f3"}.layout--in-page-alert.color--cardinal-red .su-card__contents:before{content:"\f071"}.layout--in-page-alert.color--sky-blue .su-card__contents:before{content:"\f05a"}.layout--in-page-alert.color--brick .su-card__contents:before{content:"\f06a"}.layout--in-page-alert.color--palo-verde .su-card__contents:before{content:"\f058"}.overlay-right .layout--in-page-alert .su-hero__card{right:auto}.layout--fifty-fifty{display:block;margin-left:2.4rem;margin-right:2.4rem;min-height:0}@media only screen and (min-width:992px){.layout--fifty-fifty{display:flex;flex-direction:row-reverse;margin-left:8rem;margin-right:8rem}}.layout--fifty-fifty .su-hero__media{height:262px;min-height:0;position:static}@media only screen and (min-width:992px){.layout--fifty-fifty .su-hero__media{height:100%;left:50%;position:absolute;top:0;width:50%}}.layout--fifty-fifty .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}@media only screen and (min-width:992px){.layout--fifty-fifty .su-hero__card{flex-basis:50%;flex-grow:0;flex-shrink:0;margin-right:auto}}.layout--fifty-fifty .su-hero__card .su-card__button{margin-bottom:0;margin-top:1.6rem}.layout--fifty-fifty .su-hero__card .su-button.su-link{background-color:#fff;border:1px solid #8c1515;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);color:#8c1515;font-size:1.6rem;line-height:1.5;padding:1.2rem 2.4rem;text-decoration:none}@media only screen and (min-width:768px){.layout--fifty-fifty .su-hero__card .su-button.su-link{font-size:1.8rem;padding:1.4rem 3rem}}.layout--fifty-fifty .su-hero__card .su-button.su-link:active,.layout--fifty-fifty .su-hero__card .su-button.su-link:focus,.layout--fifty-fifty .su-hero__card .su-button.su-link:hover{text-decoration:underline}.layout--fifty-fifty .su-card__contents{padding:2.4rem}@media only screen and (min-width:992px){.layout--fifty-fifty .su-card__contents{padding:7.2rem}}.layout--fifty-fifty .su-card__contents>:first-child{margin-top:0}.layout--fifty-fifty .su-card__contents>span{font-size:1.5rem;margin-bottom:.8rem}@media only screen and (min-width:768px){.layout--fifty-fifty .su-card__contents>span{font-size:1.8rem}}.layout--fifty-fifty .su-card__contents>h2{font-size:2.5rem;margin-bottom:1.2rem}@media only screen and (min-width:768px){.layout--fifty-fifty .su-card__contents>h2{font-size:3.5rem;margin-bottom:.8rem}}.layout--fifty-fifty .su-card__contents p{line-height:1.5;margin-bottom:1.6rem}@media only screen and (min-width:992px){.overlay-right .layout--fifty-fifty{flex-direction:row}.overlay-right .layout--fifty-fifty .su-hero__media{left:0}}.overlay-right .layout--fifty-fifty .su-hero__card{margin-left:auto;margin-right:0;right:auto}@media only screen and (min-width:992px){.su-masthead>section:last-of-type{padding-top:2.4rem}}@media only screen and (min-width:1200px){.su-masthead>section:last-of-type{padding-top:1.6rem}}.utility-navigation{display:none;flex-direction:column;justify-content:flex-end;width:100%}@media only screen and (min-width:992px){.utility-navigation{display:flex;flex-direction:row;margin-bottom:2.4rem}}@media only screen and (min-width:1200px){.utility-navigation{margin-bottom:2.6rem}}.utility-navigation a{align-items:center;color:#2e2d29;display:flex;font-weight:600;margin-left:2.4rem;text-decoration:none}.utility-navigation a:focus,.utility-navigation a:hover{text-decoration:underline}.utility-navigation a:focus{outline:2px solid #0098db;outline-offset:3px}.utility-navigation a.external-link:before{color:#8c1515;content:"\f35d";font-family:Font Awesome\ 5 Free;font-size:1.3rem;font-style:normal;font-variant:normal;line-height:1;margin-left:1rem;order:1000;text-decoration:none;text-rendering:auto}.utility-navigation.utility-navigation-mobile{display:flex}@media only screen and (min-width:992px){.utility-navigation.utility-navigation-mobile{display:none}}.utility-navigation.utility-navigation-mobile a{color:#fff;margin-top:2.4rem}.su-mobile-site-utility{margin-bottom:.09rem}
\ No newline at end of file
+.su-alert__text a{color:inherit}.su-alert--plain{background-color:#2e2d29}.su-alert--success{background-color:#017e7c}.su-alert--info{background-color:#016895}.su-alert--warning{background-color:#7f2d48}.su-alert--error{background-color:#8c1515}.style--quick-links .su-wysiwyg-text{background-color:#f4f4f4;padding:2.4rem 2.4rem 0}.style--quick-links .su-wysiwyg-text h3{font-size:2rem;line-height:1.2;margin-bottom:1.6rem}.style--quick-links .su-wysiwyg-text ul{list-style:none;margin:0;padding:0}.style--quick-links .su-wysiwyg-text ul li{border-top:1px solid rgba(46,45,41,.3);color:#8c1515;font-size:1.8rem;line-height:1.25;margin:0;padding:1.6rem 0}.style--quick-links .su-wysiwyg-text ul a{color:#8c1515;display:block;padding-right:3.2rem;position:relative;text-decoration:none}.style--quick-links .su-wysiwyg-text ul a:active,.style--quick-links .su-wysiwyg-text ul a:focus,.style--quick-links .su-wysiwyg-text ul a:hover{text-decoration:underline}.style--quick-links .su-wysiwyg-text ul a:after{content:"\203A";font-size:3.2rem;line-height:1.8rem;margin-top:-1.35rem;position:absolute;right:0;top:50%}.style--quick-links.color--black .su-wysiwyg-text,.style--quick-links.color--brick .su-wysiwyg-text,.style--quick-links.color--cardinal-red .su-wysiwyg-text,.style--quick-links.color--palo-verde .su-wysiwyg-text,.style--quick-links.color--sky-blue .su-wysiwyg-text{color:#fff}.style--quick-links.color--black .su-wysiwyg-text ul li,.style--quick-links.color--brick .su-wysiwyg-text ul li,.style--quick-links.color--cardinal-red .su-wysiwyg-text ul li,.style--quick-links.color--palo-verde .su-wysiwyg-text ul li,.style--quick-links.color--sky-blue .su-wysiwyg-text ul li{border-top-color:hsla(0,0%,100%,.3)}.style--quick-links.color--black .su-wysiwyg-text a,.style--quick-links.color--brick .su-wysiwyg-text a,.style--quick-links.color--cardinal-red .su-wysiwyg-text a,.style--quick-links.color--palo-verde .su-wysiwyg-text a,.style--quick-links.color--sky-blue .su-wysiwyg-text a{color:#fff}.style--quick-links.color--black .su-wysiwyg-text{background-color:#2e2d29}.style--quick-links.color--cardinal-red .su-wysiwyg-text{background-color:#8c1515}.style--quick-links.color--sky-blue .su-wysiwyg-text{background-color:#016895}.style--quick-links.color--brick .su-wysiwyg-text{background-color:#7f2d48}.style--quick-links.color--palo-verde .su-wysiwyg-text{background-color:#017e7c}.su-hero .su-hero__card{border:none;box-shadow:none;color:#fff}.su-hero.color--black .su-hero__card{background-color:#2e2d29}.su-hero.color--cardinal-red .su-hero__card{background-color:#8c1515}.su-hero.color--sky-blue .su-hero__card{background-color:#016895}.su-hero.color--brick .su-hero__card{background-color:#7f2d48}.su-hero.color--palo-verde .su-hero__card{background-color:#017e7c}.su-hero .su-card__contents a{color:#fff}.layout--banner{display:block;min-height:0}.layout--banner .su-hero__media{height:300px;min-height:0;position:static}@media only screen and (min-width:992px){.layout--banner .su-hero__media{height:608px}}.layout--banner .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}@media only screen and (min-width:992px){.layout--banner .su-hero__card{left:10.2rem;max-width:650px}}.layout--banner .su-hero__card .su-card__button{margin-bottom:0;margin-top:1.6rem}.layout--banner .su-hero__card .su-button.su-link{background-color:#fff;border:1px solid #8c1515;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);color:#8c1515;font-size:1.6rem;line-height:1.5;padding:1.2rem 2.4rem;text-decoration:none}@media only screen and (min-width:768px){.layout--banner .su-hero__card .su-button.su-link{font-size:1.8rem;padding:1.4rem 3rem}}.layout--banner .su-hero__card .su-button.su-link:active,.layout--banner .su-hero__card .su-button.su-link:focus,.layout--banner .su-hero__card .su-button.su-link:hover{text-decoration:underline}.layout--banner .su-card__contents{padding:2.4rem}.layout--banner .su-card__contents>:first-child{margin-top:0}.layout--banner .su-card__contents>h2{font-size:2.2rem;line-height:1.5;margin-bottom:1.2rem}@media only screen and (min-width:768px){.layout--banner .su-card__contents>h2{font-size:2.4rem;line-height:1.2;margin-bottom:1.6rem}}.layout--banner .su-card__contents p{font-size:1.8rem;margin-bottom:2.4rem}@media only screen and (min-width:768px){.layout--banner .su-card__contents p{margin-bottom:1.6rem}}.layout--banner .su-card__contents>p{font-size:1.6rem;line-height:1.25}.layout--banner .su-card__contents ul{list-style-type:none;margin:2.4rem 0 0;padding:0}@media only screen and (min-width:768px){.layout--banner .su-card__contents ul{margin-top:1.6rem}}.layout--banner .su-card__contents ul li:last-child p{margin-bottom:0}.layout--banner .su-card__contents ul a{padding-right:1.8rem;position:relative;text-decoration:none}.layout--banner .su-card__contents ul a:active,.layout--banner .su-card__contents ul a:focus,.layout--banner .su-card__contents ul a:hover{text-decoration:underline}.layout--banner .su-card__contents ul a:after{content:"\203A";font-size:3.2rem;line-height:1.8rem;margin-left:.8rem;position:absolute}.overlay-right .layout--banner .su-hero__card{right:auto}@media only screen and (min-width:992px){.overlay-right .layout--banner .su-hero__card{right:10.2rem}}.layout--in-page-alert{display:block;margin-left:2.4rem;margin-right:2.4rem;min-height:0}@media only screen and (min-width:992px){.layout--in-page-alert{margin-left:10.2rem;margin-right:10.2rem}}.layout--in-page-alert .su-hero__media{display:none}.layout--in-page-alert .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}.layout--in-page-alert .su-hero__card .su-card__button{margin-bottom:0;margin-top:0}.layout--in-page-alert .su-hero__card .su-button.su-link{background:none;font-size:1.6rem;font-weight:600;line-height:1.25;padding:0;text-decoration:underline}@media only screen and (min-width:768px){.layout--in-page-alert .su-hero__card .su-button.su-link{font-size:1.8rem}}.layout--in-page-alert .su-hero__card .su-button.su-link:active,.layout--in-page-alert .su-hero__card .su-button.su-link:focus,.layout--in-page-alert .su-hero__card .su-button.su-link:hover{background-color:#fff;color:#2e2d29}.layout--in-page-alert .su-card__contents{padding:1.8rem}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents{align-items:center;display:flex}}.layout--in-page-alert .su-card__contents:before{content:"\f05a";display:inline-block;font-family:Font Awesome\ 5 Free;font-weight:600;margin-bottom:1em;margin-right:.5em}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents:before{margin-bottom:0;margin-right:2.6rem}}.layout--in-page-alert .su-card__contents>:first-child{margin-top:0}.layout--in-page-alert .su-card__contents>span{display:inline-block;font-size:1.7rem;font-weight:600;letter-spacing:.1em;line-height:100%;margin:0;text-transform:uppercase}@media only screen and (min-width:992px){.layout--in-page-alert .su-card__contents>span{margin-left:calc(.5em - 2.6rem);margin-right:2.6rem}}.layout--in-page-alert .su-card__contents>span:after{content:":"}.layout--in-page-alert .su-card__inner>h2{font-size:1.5625em;letter-spacing:-.012em;margin-bottom:1rem}.layout--in-page-alert .su-card__inner p{line-height:1.4;margin-bottom:0}.layout--in-page-alert.color--black .su-card__contents:before{content:"\f0f3"}.layout--in-page-alert.color--cardinal-red .su-card__contents:before{content:"\f071"}.layout--in-page-alert.color--sky-blue .su-card__contents:before{content:"\f05a"}.layout--in-page-alert.color--brick .su-card__contents:before{content:"\f06a"}.layout--in-page-alert.color--palo-verde .su-card__contents:before{content:"\f058"}.overlay-right .layout--in-page-alert .su-hero__card{right:auto}.layout--fifty-fifty{display:block;margin-left:2.4rem;margin-right:2.4rem;min-height:0}@media only screen and (min-width:992px){.layout--fifty-fifty{display:flex;flex-direction:row-reverse;margin-left:8rem;margin-right:8rem}}.layout--fifty-fifty .su-hero__media{height:262px;min-height:0;position:static}@media only screen and (min-width:992px){.layout--fifty-fifty .su-hero__media{height:100%;left:50%;position:absolute;top:0;width:50%}}.layout--fifty-fifty .su-hero__card{bottom:auto;left:auto;margin:0;max-width:none}@media only screen and (min-width:992px){.layout--fifty-fifty .su-hero__card{flex-basis:50%;flex-grow:0;flex-shrink:0;margin-right:auto}}.layout--fifty-fifty .su-hero__card .su-card__button{margin-bottom:0;margin-top:1.6rem}.layout--fifty-fifty .su-hero__card .su-button.su-link{background-color:#fff;border:1px solid #8c1515;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);color:#8c1515;font-size:1.6rem;line-height:1.5;padding:1.2rem 2.4rem;text-decoration:none}@media only screen and (min-width:768px){.layout--fifty-fifty .su-hero__card .su-button.su-link{font-size:1.8rem;padding:1.4rem 3rem}}.layout--fifty-fifty .su-hero__card .su-button.su-link:active,.layout--fifty-fifty .su-hero__card .su-button.su-link:focus,.layout--fifty-fifty .su-hero__card .su-button.su-link:hover{text-decoration:underline}.layout--fifty-fifty .su-card__contents{padding:2.4rem}@media only screen and (min-width:992px){.layout--fifty-fifty .su-card__contents{padding:7.2rem}}.layout--fifty-fifty .su-card__contents>:first-child{margin-top:0}.layout--fifty-fifty .su-card__contents>span{font-size:1.5rem;margin-bottom:.8rem}@media only screen and (min-width:768px){.layout--fifty-fifty .su-card__contents>span{font-size:1.8rem}}.layout--fifty-fifty .su-card__contents>h2{font-size:2.5rem;margin-bottom:1.2rem}@media only screen and (min-width:768px){.layout--fifty-fifty .su-card__contents>h2{font-size:3.5rem;margin-bottom:.8rem}}.layout--fifty-fifty .su-card__contents p{line-height:1.5;margin-bottom:1.6rem}@media only screen and (min-width:992px){.overlay-right .layout--fifty-fifty{flex-direction:row}.overlay-right .layout--fifty-fifty .su-hero__media{left:0}}.overlay-right .layout--fifty-fifty .su-hero__card{margin-left:auto;margin-right:0;right:auto}@media only screen and (min-width:992px){.su-masthead>section:last-of-type{padding-top:2.4rem}}@media only screen and (min-width:1200px){.su-masthead>section:last-of-type{padding-top:1.6rem}}.ds-entity--stanford-news,.ds-entity--stanford-news .su-news-vertical-teaser__link,.su-card.su-news-vertical-teaser,.su-card.su-news-vertical-teaser .su-news-vertical-teaser__link{height:100%;position:relative}.su-card.su-news-vertical-teaser{border:0;box-shadow:none;margin:0}.su-card.su-news-vertical-teaser .su-card__media{display:block;height:20.7rem;position:relative}.su-card.su-news-vertical-teaser .su-card__media div,.su-card.su-news-vertical-teaser .su-card__media img,.su-card.su-news-vertical-teaser .su-card__media picture,.su-card.su-news-vertical-teaser .su-card__media span{display:block;height:100%;margin:0;object-fit:cover}.su-card.su-news-vertical-teaser .su-news-header{display:block;padding:2.4rem}.su-card.su-news-vertical-teaser .teaser__footer{display:block}.su-card.su-news-vertical-teaser .su-news-vertical-teaser__link{background-color:#eff0f0;color:#4d4f53}.su-card.su-news-vertical-teaser .su-news-vertical-teaser__link .su-link:after{transform:none;transition:none}.su-card.su-news-vertical-teaser .su-link{font-size:2rem;line-height:2.9rem;margin:0}@media only screen and (min-width:992px){.su-card.su-news-vertical-teaser .su-link{line-height:2.6rem}}.su-card.su-news-vertical-teaser .su-card__contents,.su-card.su-news-vertical-teaser .su-link:after{display:none}.su-card.su-news-vertical-teaser.su-news-external .su-link:after{background-color:#2c5697;display:block;height:1.4rem;margin:1.6rem 0 0;-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill='%232C5697' d='M7.9.7a.9.9 0 1 0 0 1.8h2.327L4.564 8.164a.9.9 0 0 0 1.273 1.272L11.5 3.773V6.1a.9.9 0 1 0 1.8 0V1.6a.9.9 0 0 0-.9-.9H7.9Z'/%3E%3Cpath fill='%232C5697' d='M2.5 2.5A1.8 1.8 0 0 0 .7 4.3v7.2a1.8 1.8 0 0 0 1.8 1.8h7.2a1.8 1.8 0 0 0 1.8-1.8V8.8a.9.9 0 1 0-1.8 0v2.7H2.5V4.3h2.7a.9.9 0 0 0 0-1.8H2.5Z'/%3E%3C/svg%3E");mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill='%232C5697' d='M7.9.7a.9.9 0 1 0 0 1.8h2.327L4.564 8.164a.9.9 0 0 0 1.273 1.272L11.5 3.773V6.1a.9.9 0 1 0 1.8 0V1.6a.9.9 0 0 0-.9-.9H7.9Z'/%3E%3Cpath fill='%232C5697' d='M2.5 2.5A1.8 1.8 0 0 0 .7 4.3v7.2a1.8 1.8 0 0 0 1.8 1.8h7.2a1.8 1.8 0 0 0 1.8-1.8V8.8a.9.9 0 1 0-1.8 0v2.7H2.5V4.3h2.7a.9.9 0 0 0 0-1.8H2.5Z'/%3E%3C/svg%3E");width:1.4rem}.su-card.su-news-vertical-teaser .su-news__publish-date{display:block;font-size:1.4rem;font-weight:400;letter-spacing:.05em;line-height:1.2;margin-bottom:1.6rem;text-decoration:none;text-transform:uppercase}.cards-color--dark.paragraph--type--stanford-lists .su-card.su-news-vertical-teaser .su-news-vertical-teaser__link{background-color:#4d4f53}.cards-color--dark.paragraph--type--stanford-lists .su-card.su-news-vertical-teaser .su-news-vertical-teaser__link .su-link,.cards-color--dark.paragraph--type--stanford-lists .su-card.su-news-vertical-teaser .su-news-vertical-teaser__link .su-news__publish-date{color:#fff}.cards-color--dark.paragraph--type--stanford-lists .su-card.su-news-vertical-teaser .su-news-vertical-teaser__link .su-link:after{background-color:#fff}.utility-navigation{display:none;flex-direction:column;justify-content:flex-end;width:100%}@media only screen and (min-width:992px){.utility-navigation{display:flex;flex-direction:row;margin-bottom:2.4rem}}@media only screen and (min-width:1200px){.utility-navigation{margin-bottom:2.6rem}}.utility-navigation a{align-items:center;color:#2e2d29;display:flex;font-weight:600;margin-left:2.4rem;text-decoration:none}.utility-navigation a:focus,.utility-navigation a:hover{text-decoration:underline}.utility-navigation a:focus{outline:2px solid #0098db;outline-offset:3px}.utility-navigation a.external-link:before{content:"\f35d";font-family:Font Awesome\ 5 Free;font-size:1.3rem;font-style:normal;font-variant:normal;line-height:1;margin-left:1rem;order:1000;text-decoration:none;text-rendering:auto}@media only screen and (min-width:992px){.utility-navigation a.external-link:before{color:#8c1515}}.utility-navigation.utility-navigation-mobile{display:flex}@media only screen and (min-width:992px){.utility-navigation.utility-navigation-mobile{display:none}}.utility-navigation.utility-navigation-mobile a{color:#fff;margin-top:2.4rem}.su-mobile-site-utility{margin-bottom:.09rem}.su-global-footer{background-color:#181d1c}
\ No newline at end of file
diff --git a/js/hero.js b/js/hero.js
index 86702c2..9b49aa3 100644
--- a/js/hero.js
+++ b/js/hero.js
@@ -3,26 +3,34 @@
 
   Drupal.behaviors.heroCards = {
     attach: function (context) {
-      once("heroCards", "html").forEach(function () {
-        const centerCard = function () {
-          $(".layout--banner .su-hero__card", context).each(function () {
-            const marginOld = parseInt(
-              $(this).css("marginTop").replace("px", "")
-            );
-            const marginNew = -Math.round($(this).height() / 2);
+      // Center the text box vertically
+      const centerCard = function () {
+        const MEDIA_LG = 992;
+        const $heroCards = $(".layout--banner .su-hero__card", context);
 
-            if (marginOld !== marginNew) {
-              $(this).css("margin-top", marginNew);
-            }
-          });
-        };
+        $heroCards.each(function () {
+          const $this = $(this);
+          const marginOld = parseInt($this.css("margin-top").replace("px", ""));
+          const marginNew =
+            window.innerWidth >= MEDIA_LG ? -Math.round($this.height() / 2) : 0;
 
-        $(window).on("resize", function () {
-          centerCard();
+          if (marginOld !== marginNew) {
+            $this.css("margin-top", `${marginNew}px`);
+          }
         });
+      };
+
+      // Debounce the resize event to avoid excessive recalculations
+      const debounce = (callback, delay) => {
+        let timeoutId;
+        return () => {
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(callback, delay);
+        };
+      };
 
-        centerCard();
-      });
+      $(window, context).on("resize", debounce(centerCard, 250));
+      $(window, context).on("load", centerCard);
     },
   };
 })(jQuery);
diff --git a/lbretransportation_subtheme.info.yml b/lbretransportation_subtheme.info.yml
index 27e5a4e..8c06b9e 100755
--- a/lbretransportation_subtheme.info.yml
+++ b/lbretransportation_subtheme.info.yml
@@ -1,8 +1,8 @@
-name: Stanford Starter
+name: 'LBRE Transportation'
 type: theme
-description: 'Stanford Starter Theme.'
+description: 'LBRE Transportation Theme. Maintenance contact: Aaron Sato - aaron.sato@ffw.com'
 package: Stanford
-version: 8.x-1.0-dev
+version: 9.x-1.0-dev
 core_version_requirement: ^9 || ^10
 base theme: stanford_basic
 libraries:
diff --git a/lbretransportation_subtheme.react_behaviors.yml b/lbretransportation_subtheme.react_behaviors.yml
index f70be0c..473a987 100644
--- a/lbretransportation_subtheme.react_behaviors.yml
+++ b/lbretransportation_subtheme.react_behaviors.yml
@@ -13,7 +13,7 @@ banner_style:
       description: Select the layout to display.
       options:
         layout--default: Default Banner
-        layout--banner: Banner wih floating box
+        layout--banner: Banner with Floating Box
         layout--fifty-fifty: 50-50
         layout--in-page-alert: In page alert
       default_value: layout--default
diff --git a/lbretransportation_subtheme.theme b/lbretransportation_subtheme.theme
index 8e16067..5a5a6c8 100755
--- a/lbretransportation_subtheme.theme
+++ b/lbretransportation_subtheme.theme
@@ -11,7 +11,8 @@ use Drupal\ui_patterns\Element\PatternContext;
  * Prepares variables for the html.html.twig template.
  */
 function lbretransportation_subtheme_preprocess_html(&$variables) {
-  $variables['stanford_basic_path'] = \Drupal::service('extension.list.theme')->getPath('stanford_basic');
+  $variables['stanford_basic_path'] = \Drupal::service('extension.list.theme')
+    ->getPath('stanford_basic');
 }
 
 /**
@@ -31,13 +32,15 @@ function lbretransportation_subtheme_preprocess_pattern_hero(array &$variables):
   $context = &$variables['context'];
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $context->getProperty('entity');
-  $extra_classes = [
-    $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default'),
-    $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'color_scheme', 'color--cardinal-red'),
-  ];
-  /** @var \Drupal\Core\Template\Attribute $attributes */
-  $attributes = &$variables['attributes'];
-  $attributes->addClass($extra_classes);
+  if ($paragraph) {
+    $extra_classes = [
+      $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default'),
+      $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'color_scheme', 'color--cardinal-red'),
+    ];
+    /** @var \Drupal\Core\Template\Attribute $attributes */
+    $attributes = &$variables['attributes'];
+    $attributes->addClass($extra_classes);
+  }
 }
 
 /**
@@ -47,10 +50,13 @@ function lbretransportation_subtheme_preprocess_paragraph__stanford_lists(array
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = &$variables['paragraph'];
   $existing_classes = $variables['attributes']['class'] ?? [];
-  $extra_classes = [
-    $paragraph->getBehaviorSetting('react_paragraphs:lists_style', 'cards_color_scheme', 'cards-color--light'),
-  ];
-  $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+
+  if ($paragraph) {
+    $extra_classes = [
+      $paragraph->getBehaviorSetting('react_paragraphs:lists_style', 'cards_color', 'cards-color--light'),
+    ];
+    $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+  }
 }
 
 /**
@@ -72,6 +78,14 @@ function lbretransportation_subtheme_preprocess_paragraph__stanford_wysiwyg(arra
  */
 function lbretransportation_subtheme_ui_patterns_suggestions_alter(array &$suggestions, array $variables, PatternContext $context): void {
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
+
+  // Replace dash with underscore from the theme suggestions array in order for the templates to work properly.
+  foreach ($suggestions as &$value) {
+    $value = str_replace('-', '_', $value);
+  }
+  // Unset the reference to avoid potential side effects.
+  unset($value);
+
   $paragraph = $context->getProperty('entity');
   if ($paragraph && $paragraph->bundle() === "stanford_banner") {
     $layout = $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default');
@@ -84,3 +98,16 @@ function lbretransportation_subtheme_ui_patterns_suggestions_alter(array &$sugge
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function lbretransportation_subtheme_preprocess(&$variables, $hook) {
+  if ($hook == "pattern_news-vertical-teaser") {
+    $node = $variables["context"]->getProperty('entity');
+    // Add date to the card.
+    if ($node && !$node->get('su_news_publishing_date')->isEmpty()) {
+      $variables['news_publishing_date'] = $node->su_news_publishing_date->date->format('F d, Y');
+    }
+  }
+}
diff --git a/screenshot.png b/screenshot.png
index 0e85194..010fb8c 100755
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/src/scss/components/alert/_alert.scss b/src/scss/components/alert/_alert.scss
index b70076a..c8d583d 100644
--- a/src/scss/components/alert/_alert.scss
+++ b/src/scss/components/alert/_alert.scss
@@ -5,21 +5,21 @@
 }
 
 .su-alert--plain {
-  background-color: $st-color-black;
+  background-color: $su-color-black;
 }
 
 .su-alert--success {
-  background-color: $st-color-palo-verde;
+  background-color: $su-color-palo-verde-dark;
 }
 
 .su-alert--info {
-  background-color: $st-color-sky-blue;
+  background-color: $su-color-sky-dark;
 }
 
 .su-alert--warning {
-  background-color: $st-color-brick;
+  background-color: $su-color-brick-light;
 }
 
 .su-alert--error {
-  background-color: $st-color-cardinal-red;
+  background-color: $su-color-cardinal-red;
 }
diff --git a/src/scss/components/card/_card--news-vertical-teaser.scss b/src/scss/components/card/_card--news-vertical-teaser.scss
new file mode 100644
index 0000000..969a91b
--- /dev/null
+++ b/src/scss/components/card/_card--news-vertical-teaser.scss
@@ -0,0 +1,116 @@
+@charset "UTF-8";
+
+// Set height to 100% of the grid items.
+.su-card.su-news-vertical-teaser,
+.ds-entity--stanford-news {
+  &,
+  .su-news-vertical-teaser__link {
+    position: relative;
+    height: 100%;
+  }
+}
+
+.su-card.su-news-vertical-teaser {
+  margin: 0;
+  border: 0 none;
+  box-shadow: none;
+
+  .su-card__media {
+    display: block;
+    position: relative;
+    height: 20.7rem;
+
+    div,
+    span,
+    picture,
+    img {
+      display: block;
+      object-fit: cover;
+      margin: 0;
+      height: 100%;
+    }
+  }
+
+  .su-news-header {
+    padding: 2.4rem;
+    display: block;
+  }
+
+  .teaser__footer {
+    display: block;
+  }
+
+  .su-news-vertical-teaser__link {
+    background-color: $st-color-light-gray;
+    color: $st-color-dark-gray;
+
+    .su-link {
+      &:after {
+        transition: none;
+        transform: none;
+      }
+    }
+  }
+
+  .su-link {
+    margin: 0;
+    font-size: 2rem;
+    line-height: 2.9rem;
+
+    @include grid-media("lg") {
+      line-height: 2.6rem;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .su-card__contents {
+    display: none;
+  }
+
+  &.su-news-external {
+    .su-link {
+      &:after {
+        width: 1.4rem;
+        height: 1.4rem;
+        margin: 1.6rem 0 0;
+        display: block;
+        background-color: $st-color-blue;
+        -webkit-mask: url("data:image/svg+xml,%0A%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.9002 0.699951C7.40314 0.699951 7.0002 1.10289 7.0002 1.59995C7.0002 2.09701 7.40314 2.49995 7.9002 2.49995H10.2274L4.5638 8.16356C4.21233 8.51503 4.21233 9.08488 4.5638 9.43635C4.91527 9.78782 5.48512 9.78782 5.83659 9.43635L11.5002 3.77274V6.09995C11.5002 6.59701 11.9031 6.99995 12.4002 6.99995C12.8973 6.99995 13.3002 6.59701 13.3002 6.09995V1.59995C13.3002 1.10289 12.8973 0.699951 12.4002 0.699951H7.9002Z' fill='%232C5697'/%3E%3Cpath d='M2.5002 2.49995C1.50608 2.49995 0.700195 3.30584 0.700195 4.29995V11.5C0.700195 12.4941 1.50608 13.3 2.5002 13.3H9.7002C10.6943 13.3 11.5002 12.4941 11.5002 11.5V8.79995C11.5002 8.3029 11.0973 7.89995 10.6002 7.89995C10.1031 7.89995 9.7002 8.3029 9.7002 8.79995V11.5H2.5002V4.29995L5.2002 4.29995C5.69725 4.29995 6.1002 3.89701 6.1002 3.39995C6.1002 2.90289 5.69725 2.49995 5.2002 2.49995H2.5002Z' fill='%232C5697'/%3E%3C/svg%3E%0A");
+        mask: url("data:image/svg+xml,%0A%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.9002 0.699951C7.40314 0.699951 7.0002 1.10289 7.0002 1.59995C7.0002 2.09701 7.40314 2.49995 7.9002 2.49995H10.2274L4.5638 8.16356C4.21233 8.51503 4.21233 9.08488 4.5638 9.43635C4.91527 9.78782 5.48512 9.78782 5.83659 9.43635L11.5002 3.77274V6.09995C11.5002 6.59701 11.9031 6.99995 12.4002 6.99995C12.8973 6.99995 13.3002 6.59701 13.3002 6.09995V1.59995C13.3002 1.10289 12.8973 0.699951 12.4002 0.699951H7.9002Z' fill='%232C5697'/%3E%3Cpath d='M2.5002 2.49995C1.50608 2.49995 0.700195 3.30584 0.700195 4.29995V11.5C0.700195 12.4941 1.50608 13.3 2.5002 13.3H9.7002C10.6943 13.3 11.5002 12.4941 11.5002 11.5V8.79995C11.5002 8.3029 11.0973 7.89995 10.6002 7.89995C10.1031 7.89995 9.7002 8.3029 9.7002 8.79995V11.5H2.5002V4.29995L5.2002 4.29995C5.69725 4.29995 6.1002 3.89701 6.1002 3.39995C6.1002 2.90289 5.69725 2.49995 5.2002 2.49995H2.5002Z' fill='%232C5697'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+
+  .su-news__publish-date {
+    display: block;
+    margin-bottom: 1.6rem;
+    font-size: 1.4rem;
+    line-height: 1.2;
+    text-decoration: none;
+    font-weight: 400;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+}
+
+.cards-color--dark.paragraph--type--stanford-lists {
+  .su-card.su-news-vertical-teaser {
+    .su-news-vertical-teaser__link {
+      background-color: $st-color-dark-gray;
+
+      .su-news__publish-date,
+      .su-link {
+        color: $su-color-white;
+      }
+
+      .su-link {
+        &:after {
+          background-color: $su-color-white;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/components/card/index.scss b/src/scss/components/card/index.scss
new file mode 100644
index 0000000..302895c
--- /dev/null
+++ b/src/scss/components/card/index.scss
@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import "card--news-vertical-teaser";
diff --git a/src/scss/components/field/_style--quick-links.scss b/src/scss/components/field/_style--quick-links.scss
index 2fdf65b..929224b 100644
--- a/src/scss/components/field/_style--quick-links.scss
+++ b/src/scss/components/field/_style--quick-links.scss
@@ -3,7 +3,7 @@
 .style--quick-links {
   .su-wysiwyg-text {
     padding: 2.4rem 2.4rem 0;
-    background-color: $st-color-fog-light;
+    background-color: $su-color-foggy-light;
 
     h3 {
       margin-bottom: 1.6rem;
@@ -19,17 +19,17 @@
       li {
         margin: 0;
         padding: 1.6rem 0;
-        border-top: 1px solid rgba($st-color-black, 0.3);
+        border-top: 1px solid rgba($su-color-black, 0.3);
         font-size: 1.8rem;
         line-height: 1.25;
-        color: $st-color-cardinal-red;
+        color: $su-color-cardinal-red;
       }
 
       a {
         display: block;
         position: relative;
         padding-right: 3.2rem;
-        color: $st-color-cardinal-red;
+        color: $su-color-cardinal-red;
         text-decoration: none;
 
         &:hover,
@@ -72,22 +72,22 @@
   }
 
   &.color--black .su-wysiwyg-text {
-    background-color: $st-color-black;
+    background-color: $su-color-black;
   }
 
   &.color--cardinal-red .su-wysiwyg-text {
-    background-color: $st-color-cardinal-red;
+    background-color: $su-color-cardinal-red;
   }
 
   &.color--sky-blue .su-wysiwyg-text {
-    background-color: $st-color-sky-blue;
+    background-color: $su-color-sky-dark;
   }
 
   &.color--brick .su-wysiwyg-text {
-    background-color: $st-color-brick;
+    background-color: $su-color-brick-light;
   }
 
   &.color--palo-verde .su-wysiwyg-text {
-    background-color: $st-color-palo-verde;
+    background-color: $su-color-palo-verde-dark;
   }
 }
diff --git a/src/scss/components/hero/_hero.scss b/src/scss/components/hero/_hero.scss
index 0b6049a..aa37252 100644
--- a/src/scss/components/hero/_hero.scss
+++ b/src/scss/components/hero/_hero.scss
@@ -8,23 +8,23 @@
   }
 
   &.color--black .su-hero__card {
-    background-color: $st-color-black;
+    background-color: $su-color-black;
   }
 
   &.color--cardinal-red .su-hero__card {
-    background-color: $st-color-cardinal-red;
+    background-color: $su-color-cardinal-red;
   }
 
   &.color--sky-blue .su-hero__card {
-    background-color: $st-color-sky-blue;
+    background-color: $su-color-sky-dark;
   }
 
   &.color--brick .su-hero__card {
-    background-color: $st-color-brick;
+    background-color: $su-color-brick-light;
   }
 
   &.color--palo-verde .su-hero__card {
-    background-color: $st-color-palo-verde;
+    background-color: $su-color-palo-verde-dark;
   }
 
   .su-card__contents {
diff --git a/src/scss/components/hero/_layout--banner.scss b/src/scss/components/hero/_layout--banner.scss
index 4a7840e..cf62dc3 100644
--- a/src/scss/components/hero/_layout--banner.scss
+++ b/src/scss/components/hero/_layout--banner.scss
@@ -20,10 +20,6 @@
     margin: 0;
     max-width: none;
 
-    @include grid-media-max("md") {
-      margin-top: 0 !important;
-    }
-
     @include grid-media("lg") {
       left: 10.2rem;
       max-width: 650px;
@@ -37,11 +33,11 @@
     .su-button.su-link {
       padding: 1.2rem 2.4rem;
       background-color: $su-color-white;
-      border: 1px solid $st-color-cardinal-red;
+      border: 1px solid $su-color-cardinal-red;
       box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
       font-size: 1.6rem;
       line-height: 1.5;
-      color: $st-color-cardinal-red;
+      color: $su-color-cardinal-red;
       text-decoration: none;
 
       @include grid-media("md") {
diff --git a/src/scss/components/hero/_layout--fifty-fifty.scss b/src/scss/components/hero/_layout--fifty-fifty.scss
index 1abf457..a21cb6e 100644
--- a/src/scss/components/hero/_layout--fifty-fifty.scss
+++ b/src/scss/components/hero/_layout--fifty-fifty.scss
@@ -48,11 +48,11 @@
     .su-button.su-link {
       padding: 1.2rem 2.4rem;
       background-color: $su-color-white;
-      border: 1px solid $st-color-cardinal-red;
+      border: 1px solid $su-color-cardinal-red;
       box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
       font-size: 1.6rem;
       line-height: 1.5;
-      color: $st-color-cardinal-red;
+      color: $su-color-cardinal-red;
       text-decoration: none;
 
       @include grid-media("md") {
diff --git a/src/scss/components/hero/_layout--in-page-alert.scss b/src/scss/components/hero/_layout--in-page-alert.scss
index 33bed96..433b53f 100644
--- a/src/scss/components/hero/_layout--in-page-alert.scss
+++ b/src/scss/components/hero/_layout--in-page-alert.scss
@@ -42,7 +42,7 @@
       &:focus,
       &:active {
         background-color: $su-color-white;
-        color: $st-color-black;
+        color: $su-color-black;
       }
     }
   }
diff --git a/src/scss/components/index.scss b/src/scss/components/index.scss
index 65cea99..6d60243 100644
--- a/src/scss/components/index.scss
+++ b/src/scss/components/index.scss
@@ -26,3 +26,4 @@
 @import "field/index";
 @import "hero/index";
 @import "masthead/index";
+@import "card/index";
diff --git a/src/scss/layout/footer/_footer.scss b/src/scss/layout/footer/_footer.scss
new file mode 100644
index 0000000..4cca1a7
--- /dev/null
+++ b/src/scss/layout/footer/_footer.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+.su-global-footer {
+  background-color: $st-color-footer-background;
+}
diff --git a/src/scss/layout/footer/index.scss b/src/scss/layout/footer/index.scss
new file mode 100644
index 0000000..2414998
--- /dev/null
+++ b/src/scss/layout/footer/index.scss
@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import "footer";
diff --git a/src/scss/layout/index.scss b/src/scss/layout/index.scss
index 6191c51..9288f3c 100644
--- a/src/scss/layout/index.scss
+++ b/src/scss/layout/index.scss
@@ -20,3 +20,4 @@
 
 // Config and supporting scss.
 // @import 'directory/file';
+@import 'footer/index';
diff --git a/src/scss/navigation/_utility-navigation.scss b/src/scss/navigation/_utility-navigation.scss
index aa42d27..be34e99 100644
--- a/src/scss/navigation/_utility-navigation.scss
+++ b/src/scss/navigation/_utility-navigation.scss
@@ -20,7 +20,7 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-    color: $st-color-black;
+    color: $su-color-black;
     margin-left: 2.4rem;
     font-weight: 600;
 
@@ -38,7 +38,6 @@
       &:before {
         content: "\f35d";
         margin-left: 1rem;
-        color: $st-color-cardinal-red;
         font-family: "Font Awesome 5 Free";
         font-style: normal;
         font-variant: normal;
@@ -47,6 +46,10 @@
         line-height: 1;
         order: 1000;
         text-decoration: none;
+
+        @include grid-media("lg") {
+          color: $su-color-cardinal-red;
+        }
       }
     }
   }
diff --git a/src/scss/utilities/variables/_colors.scss b/src/scss/utilities/variables/_colors.scss
index b9a439f..123cc6b 100644
--- a/src/scss/utilities/variables/_colors.scss
+++ b/src/scss/utilities/variables/_colors.scss
@@ -5,10 +5,8 @@
 
 // define colors here in the format of:
 //$abbreviation-color-pink: #ff0099; // like $saa-color-pink
-$st-color-fog-light: #f4f4f4;
-$st-color-black: #2e2d29;
-$st-color-cardinal-red: #8c1515;
-$st-color-sky-blue: #016895;
-$st-color-brick: #7f2d48;
-$st-color-palo-verde: #017e7c;
+$st-color-blue: #2C5697;
 $st-color-outline-blue: #0098DB;
+$st-color-light-gray: #EFF0F0;
+$st-color-dark-gray: #4D4F53;
+$st-color-footer-background: #181d1c;
diff --git a/templates/components/pattern-news-vertical-teaser--layout--node--stanford-news--stanford-card.html.twig b/templates/components/pattern-news-vertical-teaser--layout--node--stanford-news--stanford-card.html.twig
new file mode 100644
index 0000000..03e93e1
--- /dev/null
+++ b/templates/components/pattern-news-vertical-teaser--layout--node--stanford-news--stanford-card.html.twig
@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * News Vertical Teaser.
+ *
+ * Vertical Teaser for News
+ *
+ * Available variables:
+ * - attributes: For additional HTML attributes not already provided.
+ * - news_vertical_teaser_image: Hero image for card
+ * - news_list_publishing_date: This is the published date.
+ * - news_vertical_teaser_headline: Title of card
+ * - news_publishing_date: Publishing date
+ * - news_topics: Topic selected. Dynamically altered vi news-banner.js
+ * - news_source: The source field.
+ * - news_url: A url to wrap the image and heading with
+ */
+#}
+{%- set classes = [
+  'su-card',
+  'su-news-vertical-teaser',
+  modifier_class
+] -%}
+{%- set news_url_link_type = "su-link--action" -%}
+
+{# If the news source url is set go there instead of the default. #}
+{%- if news_source|render|striptags("<drupal-render-placeholder>")|trim is not empty -%}
+  {%- set news_url = news_source -%}
+  {%- set classes = classes|merge(['su-news-external']) -%}
+  {%- set news_url_link_type = "su-link--external" -%}
+{%- endif %}
+
+{%- if news_url_attributes is empty -%}
+  {% set news_url_attributes = create_attribute() -%}
+{%- endif -%}
+
+{% set news_url = news_url|render|striptags("<drupal-render-placeholder>")|trim %}
+
+<article{{ attributes.addClass(classes) }}>
+  {%- if news_url is not empty -%}
+  <a {{ news_url_attributes.addClass('su-news-vertical-teaser__link') }} href="{{ news_url }}">
+    {%- endif -%}
+    <figure class="su-media su-media--image su-card__media">
+      <span class="su-media__wrapper">
+        {{- news_vertical_teaser_image -}}
+      </span>
+    </figure>
+    <span class="su-news-header">
+      {% if news_publishing_date %}
+        <span class="su-news__publish-date">
+          {{ news_publishing_date }}
+        </span>
+      {% endif %}
+      <h2 class="su-link su-card__link {{ news_url_link_type }}">
+        {{- news_vertical_teaser_headline -}}
+      </h2>
+    </span>
+    {%- if news_url is not empty -%}
+  </a>
+  {%- endif -%}
+  {%- if news_footer is not empty -%}
+    <span class="news-vertical-teaser__footer">{{ news_footer }}</span>
+  {%- endif -%}
+</article>
diff --git a/templates/page.html.twig b/templates/page.html.twig
index 86085a9..58881b6 100755
--- a/templates/page.html.twig
+++ b/templates/page.html.twig
@@ -66,7 +66,7 @@
 {%- block block_footer -%}
   <footer id="footer">
     {{ page.footer }}
-    {%- include template_global_footer with { modifier_class: 'su-global-footer--dark' } -%}
+    {%- include template_global_footer -%}
   </footer>
 {%- endblock -%}