The hero is made up of two reusable components:

• Btn
• Video

This component also has multiple variations. Here's how someone would go about adding or removing a variation.

1. Create a new SCSS stylesheet. (You can copy hero-blue.scss and use that as a starting point.)
2. Add a modifier that references the stylesheet to the hero.scss KSS modifiers list.
3. In your new stylesheet reference use hero-[whatever color name you picked] as the selector.
4. If you are adding a new layout option use hero-box-[whatever layout name you picked] instead.
5. At this point you should be able to modify your new color stylesheet and see it working in the style guide.

Now time to tie it into Drupal.

1. Create a new library for your variant stylesheet. (Take a look at hero-blue for an example.)
2. Make sure that library depends on h4h_theme/hero. This ensures the base css is added.
3. Update the hero and hero with video paragraph style or layout field to add in your new option.

Deleting a unused style.

1. Delete the SCSS stylesheet.
2. Delete the Drupal library.
3. Delete the value from the style or layout field on the paragraph.