@ebay/skin 18.1.0 → 18.2.0

package/src/modules/icon-button.marko

@@ -0,0 +1,363 @@
+<div id="icon-button">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>Use the <span class="highlight">icon-btn</span> class (for buttons) or the <span class="highlight">icon-link</span> class (for links) and any of the available <a href="#icon">icons</a> for a borderless, actionable icon style.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn" type="button" aria-label="Menu">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="menu-24" />
+                </svg>
+            </button>
+            <a class="icon-link" href="https://www.ebay.com" aria-label="Settings">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="settings-24" />
+                </svg>
+            </a>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn" type="button" aria-label="Menu">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-menu-24"></use>
+    </svg>
+</button>
+<a class="icon-link" href="https://www.ebay.com" aria-label="Settings">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-settings-24"></use>
+    </svg>
+</a>
+    </highlight-code>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+            <button class="icon-btn" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-save-24"></use>
+    </svg>
+</button>
+    </highlight-code>
+
+    <p>To remove the background colour and hover states, apply the <span class="highlight">icon-btn--transparent</span> modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--transparent" type="button" aria-label="Confirmation">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="confirmation-filled-24" />
+                </svg>
+            </button>
+            <a class="icon-link icon-link--transparent" href="https://www.ebay.com" aria-label="Attention">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="attention-filled-24" />
+                </svg>
+            </a>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--transparent" type="button" aria-label="Confirmation">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-confirmation-filled-24"></use>
+    </svg>
+</button>
+<a class="icon-link icon-link--transparent" href="https://www.ebay.com" aria-label="Attention">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="icons.svg#icon-attention-filled-24"></use>
+    </svg>
+</a>
+    </highlight-code>
+
+    <h3 id="icon-button-badged">Badged Icon Button</h3>
+    <p>An icon button can be badged using the <a href="#badge">badge</a> module.</p>
+    <p>The button or anchor element requires an additional <span class="highlight">icon-btn--badged</span> or <span class="highlight">icon-link--badged</span> modifier, respectively.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button aria-label="Watchlist (4 notifications)" class="icon-btn icon-btn--badged" type="button">
+                <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+                <span aria-hidden="true" class="badge">4</span>
+            </button>
+            <a aria-label="Inbox (4 notifications)" class="icon-link icon-link--badged" href="https://www.ebay.com">
+                <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
+                    <icon-symbol name="notification-24" />
+                </svg>
+                <span aria-hidden="true" class="badge">99+</span>
+            </a>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<button aria-label="Watchlist (4 notifications)" class="icon-btn icon-btn--badged" type="button">
+    <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+    <span aria-hidden="true" class="badge">4</span>
+</button>
+<a aria-label="Inbox (4 notifications)" class="icon-link icon-link--badged" href="https://www.ebay.com">
+    <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
+        <use href="#icon-notification-24"></use>
+    </svg>
+    <span aria-hidden="true" class="badge">99+</span>
+</a>
+    </highlight-code>
+
+    <h3 id="icon-button-primary">Primary Icon Button</h3>
+    <p>Use the <span class="highlight">primary</span> modifier to create a primary icon button variant.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+                <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-20" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+                <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-16" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+    </highlight-code>
+
+    <h3 id="icon-button-secondary">Secondary Icon Button</h3>
+    <p>Use the <span class="highlight">secondary</span> modifier to create a secondary icon button variant.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
+                <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-20" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
+                <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-16" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+    </highlight-code>
+
+    <h3 id="icon-button-tertiary">Tertiary Icon Button</h3>
+    <p>Use the <span class="highlight">tertiary</span> modifier to create a tertiary icon button variant.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
+                <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-20" />
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
+                <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-16" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+    </highlight-code>
+
+    <h3 id="icon-button-progress">Using with a Progress Spinner</h3>
+    <p>You may use a progress spinner inside the icon button.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+                <span class="progress-spinner progress-spinner--large">
+                    <svg aria-hidden="true" class="icon icon--30" height="30" width="30">
+                        <icon-symbol name="spinner-30" />
+                    </svg>
+                </span>
+            </button>
+            <button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+                <span class="progress-spinner">
+                    <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
+                        <icon-symbol name="spinner-24" />
+                    </svg>
+                </span>
+            </button>
+            <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+                <span class="progress-spinner progress-spinner--small">
+                    <svg aria-hidden="true" class="icon icon--20" height="20" width="20">
+                        <icon-symbol name="spinner-20" />
+                    </svg>
+                </span>
+            </button>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+    <span class="progress-spinner progress-spinner--large">
+        <svg aria-hidden="true" class="icon icon--30" height="30" width="30">
+            <use href="#icon-spinner-30"></use>
+        </svg>
+    </span>
+</button>
+<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+    <span class="progress-spinner">
+        <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
+            <use href="#icon-spinner-24"></use>
+        </svg>
+    </span>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+    <span class="progress-spinner progress-spinner--small">
+        <svg aria-hidden="true" class="icon icon--20" height="20" width="20">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</button>
+    </highlight-code>
+
+
+    <h3 id="icon-button-link">Using a Link</h3>
+    <p>You may use an <span class="highlight">&lt;a&gt;</span> to create a link icon button as well.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
+                <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-24" />
+                </svg>
+            </a>
+            <a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
+                <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-20" />
+                </svg>
+            </a>
+            <a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
+                <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+                    <icon-symbol name="save-16" />
+                </svg>
+            </a>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+    </highlight-code>
+
+</div>
+export const metadata = {
+    "ds-component": {
+        "name": "icon-button",
+        "version": 1.6
+    },
+    "submodules": ["icon"]
+
+};

package/src/modules/icon.marko

@@ -0,0 +1,185 @@
+<div id="icon">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>The icon module is a bundle that provides full access to the entire range of eBay iconography via the <span class="highlight">&lt;svg&gt;</span> and <span class="highlight">&lt;use&gt;</span> tags.</p>
+
+    <h3>Base Icons Only</h3>
+
+    Only base icons should be used. No state-based icons, such as disabled icons or even possibly an icon relaying an error state (likely red), should be used. Those state modifications on icons should be handled downstream using <span class="highlight">css</span> modifiers to allow for those variations.
+
+    <h3>General Markup Approach</h3>
+    <p>To avoid gigantic icons when in a non-CSS state, we use the SVG width and height attributes to override the
+        browser's default 300x150 size.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="Icon example" class="icon icon--24" height="24" width="24"
+                role="img">
+                <icon-symbol name="information-24" />
+            </svg>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<svg class="icon icon--24" height="24" width="24">
+    <use href="#icon-information-24"></use>
+</svg>
+    </highlight-code>
+
+    <p><strong>NOTE:</strong> Skin removes all pointer events on icons (via <span class="highlight">pointer-events:
+            none</span>) due to a bug in IE. To add events to these icons you should wrap them in another element and
+        attach your events there.</p>
+
+    <h3>Including an Icon</h3>
+    <p>An icon <a href="https://raw.githubusercontent.com/eBay/skin/master/src/svg/icons.svg">symbol</a> declaration can
+        be referenced from the same file or an <a href="#svg">external SVG</a> file. If in the same file, the symbol
+        must be stamped on the page inside of an SVG block.</p>
+    <p>We also provide individual icons as SVGs located in this <a href="https://github.com/eBay/skin/tree/master/src/svg/icon">directory</a>.
+        You can include these on your page as raw SVGs as needed.</p>
+
+    <highlight-code type="html" >
+<div hidden>
+    <svg>
+        <symbol id="icon-information-24" viewBox="0 0 24 24">
+            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10Zm-1-11a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6Zm1-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+        </symbol>
+    </svg>
+</div>
+    </highlight-code>
+
+    <p><strong>NOTE:</strong> the SVG tag does not support the <span class="highlight">hidden</span> attribute, hence a
+        hidden wrapper element is needed.</p>
+
+    <h3>Presentational Icons</h3>
+    <p>A presentational icon provides no additional content, context or affordance to a page, section or widget.</p>
+    <p>Presentational icons require <span class="highlight">aria-hidden="true"</span>, in order to hide them from
+        assistive technology.</p>
+
+    <highlight-code type="html" >
+<svg class="icon icon--24" height="24" width="24" aria-hidden="true">
+    <use href="#icon-information-24"></use>
+</svg>
+    </highlight-code>
+
+    <h3>Non-Presentational Icons</h3>
+    <p>A non-presentational icon provides essential content, context or affordance to a page, section or widget.</p>
+
+    <p>Non-presentational icons require both <span class="highlight">role="img"</span> and an <span
+            class="highlight">aria-label</span> for assistive technology.</p>
+
+    <highlight-code type="html" >
+<svg class="icon icon--24" height="24" width="24" role="img" aria-label="Information">
+    <use href="#icon-information-24"></use>
+</svg>
+    </highlight-code>
+
+    <h3>Icon Classes</h3>
+    <p>Each icon can have a class that corresponds to its width. For example, <span class="highlight">icon--24</span>
+        corresponds to the 24px width icon. These correspond with the size associated with each icon.</p>
+    <p>For colored icons use <span class="highlight">icon--24-colored</span>
+        These will set the height, and the width will align with the aspect ratio</p>
+
+    <p>Icons have a name postfix that corresponds to the width of the icon. For example, "icon-information-24" corresponds to the information icon of the 24px width. Heights may differ depending on the icon.</p>
+    <icon-list icons=$global.meta.icons list=$global.meta.icons.list/>
+
+    <h3 id="icon-disabled">Disabled Icons</h3>
+    <p>Most icons can be given a disabled appearance by adding the <span class="highlight">icon--disabled</span>
+        modifier.</p>
+
+    <h4>Simple Icons</h4>
+    <p>Icons that are simple and have only a stroke/fill of a single color simply inherit <span class="highlight">color</span> and are disabled by inheriting that color as the stroke/fill.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="Disabled icon example" class="icon icon--24 icon--disabled"
+                height="24" width="24" role="img">
+                <icon-symbol name="chevron-right-24" />
+            </svg>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<svg class="icon icon--24 icon--disabled" height="24" width="24">
+    <use href="#icon-chevron-right-24"></use>
+</svg>
+    </highlight-code>
+
+    <h4>Filled Icons</h4>
+    <p>There are certain filled icons that show up black by default. In order to color these icons, apply the <span class="highlight">icon--{name}-filled</span> modifier.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--confirmation-filled"
+                height="16" width="16" role="img">
+                <icon-symbol name="confirmation-filled-16" />
+            </svg>
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--attention-filled"
+                height="16" width="16" role="img">
+                <icon-symbol name="attention-filled-16" />
+            </svg>
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--information-filled"
+                height="16" width="16" role="img">
+                <icon-symbol name="information-filled-16" />
+            </svg>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16">
+    <use href="#icon-confirmation-filled-16"></use>
+</svg>
+<svg class="icon icon--16 icon--attention-filled" height="16" width="16">
+    <use href="#icon-attention-filled-16"></use>
+</svg>
+<svg class="icon icon--16 icon--information-filled" height="16" width="16">
+    <use href="#icon-information-filled-16"></use>
+</svg>
+    </highlight-code>
+
+
+    <h4>Complex Icons</h4>
+    <p>Icons that are more complex and have multiple colors with a suffix of <span class="highlight">-colored</span> are grayscaled with an opacity.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="Disabled icon example" class="icon icon--24-colored icon--disabled" height="24" width="24" role="img">
+                <icon-symbol name="mastercard-24-colored" />
+            </svg>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<svg class="icon icon--24-colored icon--disabled" height="24" width="24">
+    <use href="#icon-mastercard-24-colored"></use>
+</svg>
+    </highlight-code>
+    $ const deprecatedIcons = $global.meta.icons.deprecated || [];
+
+    <if(deprecatedIcons.length > 0)>
+        <h3>Deprecated Icons</h3>
+
+        <p>These deprecated icons have either been removed or renamed. We keep deprecated icon files around to allow some time for transitioning to new icons. Deprecated icon files and mentions in docs, however, get removed with the following major Skin versions.</p>
+
+        <section class="section-notice section-notice--attention" role="region" aria-label="Attention" aria-roledescription="Notice">
+            <div class="section-notice__header" id="section-notice-attention">
+                <svg class="icon icon--16" height="16" width="16" aria-label="Attention">
+                    <icon-symbol name="attention-filled-16" />
+                </svg>
+            </div>
+            <div class="section-notice__main">
+                <h3 class="section-notice__title">Do NOT Use These!</h3>
+                <p>The following icons have been deprecated. They will be deleted in the next major Skin version. To transition usage to the new icons, please refer to the icons above and/or refer to the icon transition spreadsheet.</p>
+            </div>
+        </section>
+
+        <icon-list icons=$global.meta.icons list=deprecatedIcons/>
+    </if>
+
+
+</div>
+export const metadata = {
+    "ds-component": {
+        "name": "icon",
+        "version": 1.3
+    }
+};

package/src/modules/image-placeholder.marko

@@ -0,0 +1,64 @@
+<div id="image-placeholder">
+    <h2><span class="secondary-text">@ebay/skin/</span>image-placeholder</h2>
+    <p>Image placeholder should be used when an image is not present. By default this is 300x300px, but can be resized
+        to it a container.</p>
+    <p>This asset can be found either in <span class="highlight">dist/svg/icons/image-placeholder.svg</span> or in the
+        icons bundle</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="image not found" class="image-placeholder" role="img">
+                <icon-symbol name="placeholder" prefix="image" />
+            </svg>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+    <svg aria-label="image not found" class="image-placeholder">
+        <use href="#image-placeholder"></use>
+    </svg>
+    </highlight-code>
+
+    <h3>Variable widths with borders</h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div style="border: 1px solid var(--color-stroke-information); height: 50px; width: 50px">
+                <svg aria-label="image not found" class="image-placeholder" role="img">
+                    <icon-symbol name="placeholder" prefix="image" />
+                </svg>
+            </div>
+            <div>
+                <svg aria-label="image not found" class="image-placeholder"
+                    style="border: 1px solid var(--color-stroke-attention); height: 150px; width: 150px" role="img">
+                    <icon-symbol name="placeholder" prefix="image" />
+                </svg>
+            </div>
+            <div>
+                <svg aria-label="image not found" class="image-placeholder"
+                    style="border: 1px dotted var(--color-stroke-attention); height: 250px; width: 250px" role="img">
+                    <icon-symbol name="placeholder" prefix="image" />
+                </svg>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+    <div style="border: 1px solid var(--color-stroke-information); height: 50px; width: 50px">
+        <svg aria-label="image not found" class="image-placeholder" role="img">
+            <use href="#image-placeholder"></use>
+        </svg>
+    </div>
+    <svg aria-label="image not found" class="image-placeholder"
+        style="border: 1px solid var(--color-stroke-attention); height: 150px; width: 10px" role="img">
+        <use href="#image-placeholder"></use>
+    </svg>
+    <svg aria-label="image not found" class="image-placeholder"
+        style="border: 1px dotted var(--color-stroke-attention); height: 250px; width: 250px" role="img">
+        <use href="#image-placeholder"></use>
+    </svg>
+    </highlight-code>
+</div>
+
+export const metadata = {
+
+};