• 2 versions of a Hero component with various photo overlay (70%/45% photo overlays)
• 2 version of a Hero component with solid background (light/dark)
• 2 versions of a Hero Slider (autoplay, no autoplay)

I have included some descriptions of the settings used on the different versions of the components in the optional body text fields, and used the header and alias fields to make telling the different component versions apart easier when in the CMS and looking at the content widgets section

Please review the components on various browser types and different desktop sizes, tablet sizes, and mobile sizes when testing and when populating your content.

• There are buttons included on some versions of the hero component, and not on others. 
  • Buttons can be easily added or removed once you have pasted a component onto the desired page and are editing your content.
  • The button size and style can also be edited if desired.
  • If you plan to use buttons on every hero component through the entire site, I recommend adding buttons to the versions of the blocks that don't contain them in the color or style that you would like to see, prior to copy/pasting onto other pages.

• There are some variations on text alignment to show different options for testing and review purposes. 
  • If you plan to use the same text alignment on every hero component through the entire site, I recommend updating these block settings to all use the same text alignment and vertical text alignment settings, prior to copy/pasting onto other pages.
  • If not otherwise noted, the blocks use the default settings of Left Text Alignment and Top Vertical Text Alignment

• If you want to have additional versions of these blocks with slight changes in button, text alignment, or other settings, you can add additional versions of the Hero component onto this page: 
  • Copy and paste the version of the component you want to edit onto this Component Library page (or onto a new page, if organizing the component library further is preferred)
    • I recommend choosing the block that is closest to the desired end result each time you repeat this process to minimize content edits needed
  • Make your desired tweaks to that block, such as:
    • add or remove buttons, change button size or style, change the text alignment, change the vertical text alignment, change the animation setting, change the overlay % setting, change the page height setting %, etc
  • Update the header title and optional body text area to include the correct description of the new version of the block
  • Save your block settings
  • Save and publish the page to review the new Hero component on the page
  • Repeat for additional versions of blocks as desired