Docs(web): Add Heading demo #DS-899

Heading demo in web is now same as demo in web-react and web-twig

packages/web/src/scss/components/Heading/README.md

@@ -0,0 +1,22 @@
+# Heading
+
+The Heading component provides helper classes to render headings.
+
+Basic example usage:
+
+```
+<div class="typography-heading-medium-text">Heading</div>
+<h2 class="typography-heading-medium-text">Heading H2</h2>
+```
+
+## Sizes
+
+You can use different sizes of headings.
+
+```
+<div class="typography-heading-xsmall-text">Heading xsmall</div>
+<div class="typography-heading-small-text">Heading small</div>
+<div class="typography-heading-medium-text">Heading medium</div>
+<div class="typography-heading-large-text">Heading large</div>
+<div class="typography-heading-xlarge-text">Heading xlarge</div>
+```

packages/web/src/scss/components/Heading/index.html

@@ -0,0 +1,32 @@
+{{#> layout/plain }}
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Default</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="typography-heading-medium-text">Heading</div>
+    <h2 class="typography-heading-medium-text">Heading H2</h2>
+
+  </div>
+
+</section>
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Sizes</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="typography-heading-xsmall-text">Heading xsmall</div>
+    <div class="typography-heading-small-text">Heading small</div>
+    <div class="typography-heading-medium-text">Heading medium</div>
+    <div class="typography-heading-large-text">Heading large</div>
+    <div class="typography-heading-xlarge-text">Heading xlarge</div>
+
+  </div>
+
+</section>
+
+{{/layout/plain }}