update design example to all classes, add a class for small examples, apply it to inline header example

Author: anandamaryon1

app/stylesheets/design-example/_design-example.scss

@@ -43,6 +43,10 @@
   }
 }
 
+.app-design-example--small-screen .app-design-example__frame {
+  width: 400px;
+}
+
 .app-design-example__frame {
   display: block;
   position: relative;

app/views/design-system/components/header/index.njk

@@ -158,6 +158,7 @@
 
   {{ designExample({
     group: "components",
+    classes: "app-design-example--small-screen",
     item: "header",
     type: "account-inline"
   }) }}

app/views/macros/design-example/macro.njk

@@ -76,7 +76,11 @@
     {% set exampleId = (exampleTitle + " example") | slugify %}
   {% endif %}
 
-  <div class="app-design-example" data-module="app-design-example">
+  {% if params.classes %}
+    {% set classNames = classNames ~ " " ~ params.classes %}
+  {% endif %}
+
+  <div class="app-design-example{% if params.classes %} {{ params.classes }}{% endif %}" data-module="app-design-example">
 
     {% if showExample %}
       <a href="{{ standaloneURL }}" class="app-design-example__pop-out" target="_blank" rel="noopener noreferrer">