Document hero macro

[jmuzina]

Done

• Adds documentation of the hero macro to the hero page.
• Adds some markup comments to the major blocks in the hero macro to make each element of the pattern more distinct in the HTML code snippets.
• Minor hero macro API changes per naming convention discussions

Note: this PR does not show the hero macro call. #5321 introduces the ability to view the Jinja macro call in the docs page.

Fixes WD-14522

QA

• Open hero docs
• Review the macro documentation and verify you have a clear idea of how to use the macro.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• [x] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [ ] Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• [ ] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

The only thing this doesn't really cover is how to import/include this specific macro. I need to see how that will line up with @pastelcyborg 's work on adding the macros to NPM and the general macros docs

[jmuzina]

Import instructions were added, with namespaced macro (following convention from #5329)

[jmuzina]

Added link to the macro installation page, assuming merge of #5330 as-is