docs(health-index): add overview

elements/rh-health-index/docs/00-overview.md

@@ -0,0 +1,20 @@
+## Overview
+{{ tagName | getElementDescription }}
+
+{% repoStatusList %}
+
+## Sample element
+<rh-health-index grade="A">A</rh-health-index>
+
+
+## Demos
+  View a live version of this component and see how it can be customized.
+  {% playground tagName=tagName %}{% endplayground %}
+  {% cta href="./demo/", target="_blank" %}
+    View the `<rh-health-index>` demo in a new tab
+  {% endcta %}
+
+## When to use
+- When you need to displays a health grade (A–F) for a particular item or package.
+
+{% repoStatusChecklist %}