Menu Use the links below & the back button to navigate

About

Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:

Accessible
Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup.
Declarative
Skin follows the BEM methodology of "Block, Element and Modifier" to ensure our HTML class name and structure is human readable and understandable.
Decoupled
Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework.
Evergreen
As the eBay design system evolves, so too does Skin, meaning apps only need to keep their Skin package updated to ensure the latest look and feel.

Skin is a pure CSS framework and is bundled with zero JavaScript. This website uses makeup-js to add interactivity to examples where needed.

Install

Skin is distributed via NPM under the @ebay/skin package name.

To use Skin, the package should be added as a dependency in your project's package.json file.

{
    "dependencies": {
      "@ebay/skin": "^17"
    }
}
    

Bundling

Skin supports Webpack and Lasso.js.

Webpack

Add @ebay/skin and @ebay/browserslist-config as dependencies to package.json.

The Skin webpack modules will import CSS so make sure to also have css-loader and style-loader as dev dependencies.

{
    "dependencies": {
        "@ebay/browserslist-config": "^1",
        "@ebay/skin": "^17",
    },
    "devDependencies": {
        "css-loader": "^3",
        "style-loader": "^1"
    }
}
    

Webpack configuration:

module.exports = {
    module: {
        rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ],
        },
        ],
    },
};
    

Usage:

import "@ebay/skin/button";
    

Lasso.js

Add the @ebay/skin module as a browser.json dependency to include the entire set of Skin modules.

{
    "dependencies": [
        "@ebay/skin"
    ]
}
    

Or, alternatively, by specifying modules on a per-need basis.

{
    "dependencies": [
        "@ebay/skin/tokens",
        "@ebay/skin/global",
        "@ebay/skin/button",
        "@ebay/skin/icon"
    ]
}
    

Token System

As of v14, Skin's token-based design system leverages CSS Custom Properties (previously it used LESS).

Tokens are grouped into three distinct sets, that cascade in the following order:

  1. Core tokens
  2. Semantic tokens for light mode
  3. Semantic tokens for dark mode

In order for Skin to render correctly, values for core tokens and light tokens are required.

The easiest way to satisfy this requirement is to include one of the following bundles:

It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.

Themes

CSS Custom Properties allow various aspects of the design system language to be dynamically "themed". Typically these aspects are colors, font, border-radius, spacing and grids.

Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.

Animation

This section provides information on CSS animations/transitions that are common across one or more modules.

Dialog Transitions

Skin currently supports two types of dialog transition: fade and slide. Because CSS cannot transition an element to and from hidden (i.e. "display:none"), transitions are acheived using two classes applied during different stages of the animation. Before applying an animation class to the dialog component you must first apply the primer class which will be $name-init where $name is the base class. The dialog component has two different animation base classes dialog--show and dialog--hide.

Firstly the -init postfix must be applied to dialog component to prime animation. One animation frame later the -init postfix must be removed and the base class applied to start the animation. Finally once the animation has completed remove the base class.

An example implementation is shown below.

const dialogEl = document.querySelector(".dialog");
const windowEl = dialogEl.querySelector(".dialog__window");
const openBtnEl = document.querySelector("#dialog-open");
const closeBtnEl = dialogEl.querySelector(".dialog__close");

// Trigger dialog show animation.
openBtnEl.addEventListener("click", () => {
dialogEl.classList.add("dialog--show-init");
dialogEl.removeAttribute("hidden");

requestAnimationFrame(() => requestAnimationFrame(() => {
    // Two RAFS to ensure this happens on the next animation frame.
    dialogEl.classList.remove("dialog--show-init");
    dialogEl.classList.add("dialog--show");

    windowEl.addEventListener("transitionend", () => {
        /**
         * The window animation is the longest, so we wait for it to
         * finish before removing the classes.
         */
        dialogEl.classList.remove("dialog--show");
    }, { once: true });
}));
});

// Trigger dialog hide animation. (In the real world the dialog mask) should also be handled.
closeBtnEl.addEventListener("click", () => {
dialogEl.classList.add("dialog--hide-init");
dialogEl.setAttribute("hidden", "");

requestAnimationFrame(() => requestAnimationFrame(() => {
    // Two RAFS to ensure this happens on the next animation frame.
    dialogEl.classList.remove("dialog--hide-init");
    dialogEl.classList.add("dialog--hide");

    windowEl.addEventListener("transitionend", () => {
        /**
         * The window animation is the longest, so we wait for it to
         * finish before removing the classes.
         */
        dialogEl.classList.remove("dialog--hide");
    }, { once: true });
}));
});

@ebay/skin/alert-dialog

DS v2.1

An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.

The markup requirements are very strictly: a heading, description and button.

<div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" hidden role="alertdialog">
    <div class="alert-dialog__window alert-dialog__window--fade">
        <div class="alert-dialog__header">
            <h2 id="alert-dialog-title" class="alert-dialog__title">Alert!</h2>
        </div>
        <div class="alert-dialog__main">
            <p id="alert-description-0">You must acknowledge this alert to continue.</p>
        </div>
        <div class="alert-dialog__footer">
            <button class="btn btn--primary alert-dialog__acknowledge" aria-describedby="alert-description-0">OK</button>
        </div>
    </div>
</div>
    

@ebay/skin/avatar

DS v1.0

Avatars are graphical assets that represent users’ identities across products.

Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.

NOTE: Avatars can be considered as decorative or informative depending on their context and surroundings. Typically, an avatar is displayed adjacent to the user's name, or a sign-in link, therefore making it decorative.

Default Avatar

The default avatar displays the first letter of the user's name.

<div class="avatar" role="img" aria-label="Profile picture - E">
    <span>E</span>
</div>
    

The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.

<div class="avatar avatar--teal" role="img" aria-label="Profile picture - A">
    <span>A</span>
</div>
<div class="avatar avatar--light-teal" role="img" aria-label="Profile picture - B">
    <span>B</span>
</div>
<div class="avatar avatar--green" role="img" aria-label="Profile picture - C">
    <span>C</span>
</div>
<div class="avatar avatar--lime" role="img" aria-label="Profile picture - D">
    <span>D</span>
</div>
<div class="avatar avatar--yellow" role="img" aria-label="Profile picture - E">
    <span>E</span>
</div>
<div class="avatar avatar--orange" role="img" aria-label="Profile picture - F">
    <span>F</span>
</div>
<div class="avatar avatar--magenta" role="img" aria-label="Profile picture - G">
    <span>G</span>
</div>
<div class="avatar avatar--pink" role="img" aria-label="Profile picture - G">
    <span>H</span>
</div>

    

Custom Avatar

Avatars can be customized with an image.

NOTE: Sighted users can visually distinguish an avatar based on the image; for non-sighted users the equivalent experience is the name of the user (not a description of the image contents, e.g. "dog in car"!).

<div class="avatar" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
    

Signed-Out Avatar

The avatar-signed-out icon is used to a represent a user that is not signed in.

<div class="avatar" role="img" aria-label="Profile picture - Signed out">
    <svg class="icon" aria-hidden="true">
        <use href="#icon-avatar-signed-out"></use>
    </svg>
</div>
    

Avatar Sizes

Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.

<div class="avatar avatar--32" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--40" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--48" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--56" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--64" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--96" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--128" role="img" aria-label="Profile picture - Elizabeth">
    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
    

@ebay/skin/badge

DS v1.2

A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.

The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the icon button and menu modules.

2 24 99+
<span class="badge" role="img" aria-label="2 notifications">2</span>
<span class="badge" role="img" aria-label="24 notifications">24</span>
<span class="badge" role="img" aria-label="99+ notifications">99+</span>
    

@ebay/skin/button

DS v1.6

A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.

A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.

Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.

Default Button

Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.

Link
<button class="btn">Button</button>
<a class="fake-btn" href="https://www.ebay.com">Link</a>
    

Use the large modifier to increase the size of the button.

Large Link
<button class="btn btn--large">Button</button>
<a class="fake-btn fake-btn--large" href="https://www.ebay.com">Large Link</a>
    

Use the small modifier to decrease the size of the button.

Small Link
<button class="btn btn--small">Button</button>
<a class="fake-btn fake-btn--small" href="https://www.ebay.com">Small Link</a>
    

Primary Button

Use the primary modifier to create a primary button style.

Link
<button class="btn btn--primary">Button</button>
<a class="fake-btn fake-btn--primary" href="https://www.ebay.com">Link</a>
    

Secondary Button

Use the secondary modifier to create a secondary button style.

Link
<button class="btn btn--secondary">Button</button>
<a class="fake-btn fake-btn--secondary" href="https://www.ebay.com">Link</a>
    

Tertiary Button

Use the tertiary modifier to create a tertiary button style.

Link
<button class="btn btn--tertiary">Button</button>
<a class="fake-btn fake-btn--tertiary" href="https://www.ebay.com">Link</a>
    

Disabled Button

The disabled attribute is required to fully disable a button tag.

<button class="btn btn--primary" type="button" disabled>Primary Button</button>
<button class="btn btn--secondary" type="button" disabled>Secondary Button</button>
<button class="btn btn--tertiary" type="button" disabled>Tertiary Button</button>
    

Remove the href attribute to fully disable an anchor tag.

<a class="fake-btn fake-btn--primary">Primary Link</a>
<a class="fake-btn fake-btn--secondary">Secondary Link</a>
<a class="fake-btn fake-btn--tertiary">Tertiary Link</a>
    

Partially Disabled Button

Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.

<button aria-disabled="true" class="btn btn--primary" type="button">Prev</button>
<button aria-disabled="true" class="btn btn--primary" type="button">Next</button>
    

Destructive Button

Use the destructive modifier to create a destructive button style used for removing data.

Primary Destructive Button

Primary Link
<button class="btn btn--destructive">Destructive Button</button>
<a class="fake-btn fake-btn--primary fake-btn--destructive" href="https://www.ebay.com">Destructive Link</a>
    

Secondary Destructive Button

Secondary Link
<button class="btn btn--secondary btn--destructive">Secondary Button</button>
<a class="fake-btn fake-btn--secondary fake-btn--destructive" href="https://www.ebay.com">Secondary Link</a>
    

Tertiary Destructive Button

Tertiary Link
<button class="btn btn--tertiary btn--destructive">Tertiary Button</button>
<a class="fake-btn fake-btn--tertiary fake-btn--destructive" href="https://www.ebay.com">Tertiary Link</a>
    

Adjacent Icon Button

Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.

<button class="btn btn--primary">
    <span class="btn__cell">
        <svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
            <use href="#icon-menu-24"></use>
        </svg>
        <span>Button</span>
    </span>
</button>
<button class="btn btn--primary">
    <span class="btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
            <use href="#icon-menu-24"></use>
        </svg>
    </span>
</button>
    

Busy State for Button

Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

<button class="btn btn--primary" aria-label="Busy...">
    <span class="btn__cell">
        <span class="progress-spinner">
            <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
                <use href="#icon-spinner-24"></use>
            </svg>
        </span>
    </span>
</button>
        

Click the button below for an interactive example.

NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

Flexible Button

Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

<button class="btn btn--primary btn--fluid" type="button" style="padding-left: 16px; padding-right: 16px;">
    <span class="btn__cell" style="justify-content: space-between">
        <span>Select</span>
        <span style="display: inline-flex;">
            <span>Any</span>
            <svg aria-hidden="true" class="icon icon--chevron-down-16" width="8" height="8">
                <use href="#icon-chevron-down-16"></use>
            </svg>
        </span>
    </span>
</button>
    

Fixed Height Button

To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height.

<span class="textbox">
    <input aria-label="Email Address" class="textbox__control" type="text" placeholder="textbox" />
</span>
<button class="btn btn--primary btn--fixed-height">
    Button
</button>
    

Fixed Width Button

Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.

<button class="btn btn--primary" style="width: 200px;">
    Button with a lot of text that will wrap
</button>
    

Fixed Width and Height Button

Of course, with a constrained width and a fixed height, the text will begin to overflow.

<button class="btn btn--primary btn--fixed-height" style="width: 200px;">
    Button with a lot of text that will wrap
</button>
    

The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.

<button class="btn btn--primary btn--fixed-height btn--truncated" style="width: 200px;">
    Button with a lot of text that will wrap
</button>
    

Expandable Buttons

Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.

<button class="btn btn--primary" aria-expanded="false" type="button">
    <span class="btn__cell">
        <span class="btn__text">Button</span>
        <svg class="icon icon--chevron-down-16" height="10" width="14" aria-hidden="true">
            <use href="#icon-chevron-down-16"></use>
        </svg>
    </span>
</button>
    

Use the borderless modifier to remove the border from the expandable button.

<button class="btn btn--borderless" type="button">
    <span class="btn__cell">
        <span class="btn__text">Button</span>
        <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
            <use href="#icon-chevron-down-12"></use>
        </svg>
    </span>
</button>
    

Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).

<button class="btn btn--form" aria-expanded="false" type="button">
    <span class="btn__cell">
        <span class="btn__text">Button</span>
        <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
            <use href="#icon-chevron-down-12"></use>
        </svg>
    </span>
</button>
    

Use the btn--slim modifier, in conjunction with btn--form, if displaying an icon only.

<button class="btn btn--form btn--slim" type="button" aria-expanded="false" aria-label="Expand/Collapse">
    <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
        <use href="#icon-chevron-down-12"></use>
    </svg>
</button>
    

For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.

<button class="btn btn--form btn--floating-label" style="min-width: 150px;">
    <span class="btn__cell">
        <span class="btn__floating-label">Color</span>
        <span class="btn__text">Blue</span>
        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
            <use href="#icon-chevron-down-12"></use>
        </svg>
    </span>
</button>
    

In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript

<button class="btn btn--form btn--floating-label" style="min-width: 150px;">
    <span class="btn__cell">
        <span class="btn__floating-label btn__floating-label--inline">Color</span>
        <span class="btn__text"></span>
        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
            <use href="#icon-chevron-down-12"></use>
        </svg>
    </span>
</button>
    

@ebay/skin/calendar

DS v1.0

The calendar module offers readonly and interactive calendar capabilities.

Both types of calendar are structured as data tables; each column representing a day of the week.

Readonly Calendar

A readonly calendar has cells containing static text or hypertext.

The current date is conveyed using calendar__cell--current and clipped text.

August 2023
SuMoTuWeThFrSa
1 2 3 4 5
6 7 8 9 10 11 12
13 14 - today 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
<div class="calendar">
    <div class="calendar__body">
        <div class="calendar__month">
            <table>
                <caption>August 2019</caption>
                <thead>
                    <tr>
                        <th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2"></td>
                        <td><span>1</span></td>
                        <td><span>2</span></td>
                        <td><span>3</span></td>
                        <td><span>4</span></td>
                        <td><span>5</span></td>
                    </tr>
                    <tr>
                        <td><span>6</span></td>
                        <td><span>7</span></td>
                        <td><span>8</span></td>
                        <td><span>9</span></td>
                        <td><span>10</span></td>
                        <td><span>11</span></td>
                        <td><span>12</span></td>
                    </tr>
                    <tr>
                        <td><span>13</span></td>
                        <td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
                        <td><span>15</span></td>
                        <td><span>16</span></td>
                        <td><span>17</span></td>
                        <td><span>18</span></td>
                        <td><span>19</span></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.ebay.com">20</a></td>
                        <td><span>21</span></td>
                        <td><span>22</span></td>
                        <td><span>23</span></td>
                        <td><span>24</span></td>
                        <td><span>25</span></td>
                        <td><span>26</span></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.ebay.com">27</a></td>
                        <td><span>28</span></td>
                        <td><a href="https://www.ebay.com">29</a></td>
                        <td><span>30</span></td>
                        <td><span>31</span></td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    

NOTE: for the eagle-eyed BEM afionados, we are saying each span has an implicit class of calendar__cell.

Read-Only Calendar with Inactive Dates

Inactive/unavailable dates are conveyed using calendar__cell--disabled and offscreen text.

August 2023
SuMoTuWeThFrSa
1 - inactive 2 - inactive 3 - inactive 4 - inactive 5 - inactive
6 - inactive 7 - inactive 8 - inactive 9 - inactive 10 - inactive 11 - inactive 12 - inactive
13 - inactive 14 - today 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
<div class="calendar">
    <div class="calendar__body">
        <div class="calendar__month">
            <table>
                <caption>August 2023</caption>
                <thead>
                    <tr>
                        <th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2"></td>
                        <td><span class="calendar__cell--disabled">1<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">2<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">3<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">4<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">5<span class="clipped"> - inactive</span></span></td>
                    </tr>
                    <tr>
                        <td><span class="calendar__cell--disabled">6<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">7<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">8<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">9<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">10<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">11<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">12<span class="clipped"> - inactive</span></span></td>
                    </tr>
                    <tr>
                        <td><span class="calendar__cell--disabled">13<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
                        <td><span>15</span></td>
                        <td><span>16</span></td>
                        <td><span>17</span></td>
                        <td><span>18</span></td>
                        <td><span>19</span></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.ebay.com">20</a></td>
                        <td><span>21</span></td>
                        <td><span>22</span></td>
                        <td><span>23</span></td>
                        <td><span>24</span></td>
                        <td><span>25</span></td>
                        <td><span>26</span></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.ebay.com">27</a></td>
                        <td><span>28</span></td>
                        <td><a href="https://www.ebay.com">29</a></td>
                        <td><span>30</span></td>
                        <td><span>31</span></td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    

Read-Only Calendar with Date Range

Date ranges are conveyed using calendar__cell--selected, calendar__range, calendar__range--start, calendar__range-end and clipped text.

August 2023
SuMoTuWeThFrSa
1 - inactive 2 - inactive 3 - inactive 4 - inactive 5 - inactive
6 - inactive 7 - inactive 8 - inactive 9 - inactive 10 - inactive 11 - inactive 12 - inactive
13 - inactive 14 - today 15 16 17 - start of range 18 - in range 19 - in range
20 - in range 21 - in range 22 - in range 23 - in range 24 - in range 25 - end of range 26
27 28 29 30 31
<div class="calendar">
    <div class="calendar__body">
        <div class="calendar__month">
            <table>
                <caption>August 2023</caption>
                <thead>
                    <tr>
                        <th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2"></td>
                        <td><span class="calendar__cell--disabled">1<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">2<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">3<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">4<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">5<span class="clipped"> - inactive</span></span></td>
                    </tr>
                    <tr>
                        <td><span class="calendar__cell--disabled">6<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">7<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">8<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">9<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">10<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">11<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--disabled">12<span class="clipped"> - inactive</span></span></td>
                    </tr>
                    <tr>
                        <td><span class="calendar__cell--disabled">13<span class="clipped"> - inactive</span></span></td>
                        <td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
                        <td><span>15</span></td>
                        <td><span>16</span></td>
                        <td class="calendar__cell--selected calendar__range calendar__range--start">
                            <span>17<span class="clipped"> - selected - start of range</span></span>
                        </td>
                        <td class="calendar__range">
                            <span>18<span class="clipped"> - in range</span></span>
                        </td>
                        <td class="calendar__range">
                            <span>19<span class="clipped"> - in range</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="calendar__range">
                            <a href="#">20<span class="clipped"> - in range</span></a>
                        </td>
                        <td class="calendar__range">
                            <span>21<span class="clipped"> - in range</span></span>
                        </td>
                        <td class="calendar__range">
                            <span>22<span class="clipped"> - in range</span></span>
                        </td>
                        <td class="calendar__range">
                            <span>23<span class="clipped"> - in range</span></span>
                        </td>
                        <td class="calendar__range">
                            <span>24<span class="clipped"> - in range</span></span>
                        </td>
                        <td class="calendar__cell--selected calendar__range calendar__range--end">
                            <span>25<span class="clipped"> - selected - end of range</span></span>
                        </td>
                        <td><span>26</span></td>
                    </tr>
                    <tr>
                        <td><a href="https://www.ebay.com">27</a></td>
                        <td><span>28</span></td>
                        <td><a href="https://www.ebay.com">29</a></td>
                        <td><span>30</span></td>
                        <td><span>31</span></td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    

Interactive Calendar

An interactive calendar uses toggle buttons to allow the input of single dates or date ranges.

NOTE: a fully functional and accessible interactive calendar requires JavaScript and is outside the scope of a CSS library such as eBay Skin. The examples below are NOT fully functional and serve to demonstrate the necessary HTML semantics and styling hooks only.

Interactive Calendar With Single Date Selection

A single date selection is conveyed using aria-pressed.

NOTE: in comparison to the readonly calendar, with buttons we can now leverage the disabled property and aria-current instead of clipped text.

August 2023
SuMoTuWeThFrSa
<div class="calendar">
    <div class="calendar__body">
        <div class="calendar__month">
            <table>
                <caption>August 2023</caption>
                <thead>
                    <tr>
                        <th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2"></td>
                        <td><button disabled>1</button></td>
                        <td><button disabled>2</button></td>
                        <td><button disabled>3</button></td>
                        <td><button disabled>4</button></td>
                        <td><button disabled>5</button></td>
                    </tr>
                    <tr>
                        <td><button disabled>6</button></td>
                        <td><button disabled>7</button></td>
                        <td><button disabled>8</button></td>
                        <td><button disabled>9</button></td>
                        <td><button disabled>10</button></td>
                        <td><button disabled>11</button></td>
                        <td><button disabled>12</button></td>
                    </tr>
                    <tr>
                        <td><button disabled>13</button></td>
                        <td><button aria-current="date">14</button></td>
                        <td><button>15</button></td>
                        <td><button>16</button></td>
                        <td class="calendar__cell--selected">
                            <button aria-pressed="true">17</button>
                        </td>
                        <td><button>18</button></td>
                        <td><button>19</button></td>
                    </tr>
                    <tr>
                        <td><button>20</button></td>
                        <td><button>21</button></td>
                        <td><button>22</button></td>
                        <td><button>23</button></td>
                        <td><button>24</button></td>
                        <td><button>25</button></td>
                        <td><button>26</button></td>
                    </tr>
                    <tr>
                        <td><button>27</button></td>
                        <td><button>28</button></td>
                        <td><button>29</button></td>
                        <td><button>30</button></td>
                        <td><button>31</button></td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    

Interactive Calendar With Date Range Selection

Date ranges are bookended by two buttons with the aria-pressed property. All buttons in between these dates leverage clipped text for assistive technology.

August 2023
SuMoTuWeThFrSa
<div class="calendar">
    <div class="calendar__body">
        <div class="calendar__month">
            <table>
                <caption>August 2023</caption>
                <thead>
                    <tr>
                        <th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2"></td>
                        <td><button disabled>1</button></td>
                        <td><button disabled>2</button></td>
                        <td><button disabled>3</button></td>
                        <td><button disabled>4</button></td>
                        <td><button disabled>5</button></td>
                    </tr>
                    <tr>
                        <td><button disabled>6</button></td>
                        <td><button disabled>7</button></td>
                        <td><button disabled>8</button></td>
                        <td><button disabled>9</button></td>
                        <td><button disabled>10</button></td>
                        <td><button disabled>11</button></td>
                        <td><button disabled>12</button></td>
                    </tr>
                    <tr>
                        <td><button disabled>13</button></td>
                        <td><button aria-current="date">14</button></td>
                        <td><button>15</button></td>
                        <td><button>16</button></td>
                        <td class="calendar__cell--selected calendar__range calendar__range--start">
                            <button aria-label="17 - start of range" aria-pressed="true">17</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="18 - in range">18</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="19 - in range">19</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="calendar__range">
                            <button aria-label="20 - in range">20</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="21 - in range">21</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="22 - in range">22</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="23 - in range">23</button>
                        </td>
                        <td class="calendar__range">
                            <button aria-label="24 - in range">24</button>
                        </td>
                        <td class="calendar__cell--selected calendar__range calendar__range--end">
                            <button aria-label="25 - end of range" aria-pressed="true">25</span>
                        </td>
                        <td><button>26</button></td>
                    </tr>
                    <tr>
                        <td><button>27</button></td>
                        <td><button>28</button></td>
                        <td><button>29</button></td>
                        <td><button>30</button></td>
                        <td><button>31</button></td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    

Calendar With Header Pagination

The calendar module allows an optional header section for pagination between months.

August 2023

August 2023
SuMoTuWeThFrSa
1 2 3 4 5
6 7 8 9 10 11 12
13 14 - today 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
<div class="calendar">
    <div class="calendar__header">
        <div class="calendar__header--inner">
            <button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Previous Month - July 2023">
                <svg aria-hidden="true" class="icon icon--chevron-left-24">
                    <use href="#icon-chevron-left-24"></use>
                </svg>
            </button>
            <h3>August 2023</h3>
            <button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Next Month - September 2023">
                <svg aria-hidden="true" class="icon icon--chevron-right-24">
                    <use href="#icon-chevron-right-24"></use>
                </svg>
            </button>
        </div>
    </div>
    <div class="calendar__body">
        <div class="calendar__month">
            <!-- readonly or interactive table goes here -->
        </div>
    </div>
</div>
    

Multi-month Calendar with Header Pagination

Multiple instances of calendar__month can be rendered inside of the calendar__body.

July 2023

August 2023

September 2023

July 2023
SuMoTuWeThFrSa
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
August 2023
SuMoTuWeThFrSa
1 2 3 4 5
6 7 8 9 10 11 12
13 14 - today 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
September 2023
SuMoTuWeThFrSa
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
<div class="calendar">
    <div class="calendar__header">
        <div class="calendar__header--inner">
            <button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Previous Month - July 2019">
                <svg aria-hidden="true" class="icon icon--chevron-left-24">
                    <use href="#icon-chevron-left-24"></use>
                </svg>
            </button>
            <h3>July 2023</h3>
            <h3>August 2023</h3>
            <h3>September 2023</h3>
            <button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Next Month - November 2019">
                <svg aria-hidden="true" class="icon icon--chevron-right-24">
                    <use href="#icon-chevron-right-24"></use>
                </svg>
            </button>
        </div>
    </div>
    <div class="calendar__body">
        <div class="calendar__month">
            <!-- readonly or interactive table goes here -->
        </div>
        <div class="calendar__month">
            <!-- readonly or interactive table goes here -->
        </div>
        <div class="calendar__month">
            <!-- readonly or interactive table goes here -->
        </div>
    </div>
</div>
    

@ebay/skin/checkbox

DS v2.0

A checkbox is a form control that allows multiple selections from a group of choices.

The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.

The checkbox is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

Default Checkbox

Use the checkbox base class to create a checkbox.

NOTE: Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state.

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" checked />
    <span class="checkbox__icon" hidden>
        <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-unchecked-18"></use>
        </svg>
        <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-checked-18"></use>
        </svg>
    </span>
</span>
    

Mixed Checkbox

For a mixed checkbox, that is partially checked, or indeterminate, apply the aria-checked="mixed" state and use icon-checkbox-mixed-18.

NOTE: JavaScript is required to toggle the aria-checked state.

<span class="checkbox">
    <input aria-checked="mixed" class="checkbox__control" type="checkbox" checked />
    <span class="checkbox__icon" hidden>
        <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-unchecked-18"></use>
        </svg>
        <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-mixed-18"></use>
        </svg>
    </span>
</span>
    

Large Checkbox

For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-24, #icon-checkbox-checked-24 and #icon-checkbox-unchecked-24 icons.

<span class="checkbox checkbox--large">
    <input class="checkbox__control" type="checkbox" checked />
    <span class="checkbox__icon" hidden>
        <svg class="checkbox__unchecked" height="24" width="24" aria-hidden="true">
            <use href="#icon-checkbox-unchecked-24"></use>
        </svg>
        <svg class="checkbox__checked" height="24" width="24" aria-hidden="true">
            <use href="#icon-checkbox-checked-24"></use>
        </svg>
    </span>
</span>
    

Disabled Checkbox

Use the disabled attribute to disable any checkbox input.

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" checked disabled />
    <span class="checkbox__icon" hidden>
        <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-unchecked-18"></use>
        </svg>
        <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-checkbox-checked-18"></use>
        </svg>
    </span>
</span>
    

Grouped Checkboxes

A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of checkbox fields and labels.

Choose an Option
<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" checked />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-1">Option 1</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-2">Option 2</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-3">Option 3</label>
    </span>
</fieldset>
    

TIP: For large checkboxes, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

Choose an Option
<fieldset>
    <legend>Choose an Option</legend>
    <div class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-4" type="checkbox" value="1" name="checkbox-group" checked />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-4">Option 1</label>
    </div>
    <div class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-5" type="checkbox" value="2" name="checkbox-group" />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-5">Option 2</label>
    </div>
    <div class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-6" type="checkbox" value="3" name="checkbox-group" />
            <span class="checkbox__icon" hidden>
                <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-unchecked-18"></use>
                </svg>
                <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
                    <use href="#icon-checkbox-checked-18"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-6">Option 3</label>
    </div>
</fieldset>
    

@ebay/skin/chip

DS v1.0.0

A chip represents a descrete highlighted value.

Static Chip

A static chip simply for informational purposes.

Football
<span class="chip">
    <span class="chip__text">Football</span>
</span>
    

Interactive Chip

An interactive chip has a delete button inside for chip removal.

Football
<span class="chip">
    <span id="chip-interactive-1-text" class="chip__text">Football</span>
    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
            <use href="icons.svg#icon-close-12"></use>
        </svg>
    </button>
</span>
    

Chip Containers

When chips appear next to each other in a set, spacing and positioning adjustments should be made on the container, and if necessary, margins adjusted as such. Please review design documentation and follow the guidance here for appropriate specifications.

Note on Chips in Containers

Chips have a display of inline-flex so they will naturally inherit some native inline attributes. One of those is the implied white space between each one. Bear this mind when creating your container.

Here is an example of a container constrained to 300px (for vertical spacing demo reasons) that uses flex with wrapping to remove the whitespace and provide a clean set of chips (whitespace-free) within a container using the appropriate spacing conventions.

Football Basketball Baseball Hockey Cricket Swimming Rugby

@ebay/skin/chips-combobox

DS v1.0.0

Chips Combobox are creators and managers of chip components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.

Empty Chips Combobox

This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.

NOTE: For empty Chips Combobox implementations, to avoid layout issues, make sure .chips-combobox__items does NOT have any whitespace.

    Soccer
    Hockey
    Tennis
    <span class="chips-combobox">
        <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
        <span class="combobox combobox--js chips-combobox__combobox">
            <span class="combobox__control chips-combobox_combobox__control">
                <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
                <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
                    <use href="#icon-chevron-down-16"></use>
                </svg>
            </span>
            <div class="combobox__listbox">
                <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                    <div class="combobox__option" role="option">
                        <span>Soccer</span>
                    </div>
                    <div class="combobox__option" role="option">
                        <span>Hockey</span>
                    </div>
                    <div class="combobox__option" role="option">
                        <span>Tennis</span>
                    </div>
                </div>
            </div>
        </span>
    </span>
        

    Fluid Chips Combobox

    Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.

      Soccer
      Hockey
      Tennis
      <span class="chips-combobox chips-combobox--fluid">
          <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
          <span class="combobox combobox--js chips-combobox__combobox">
              <span class="combobox__control chips-combobox_combobox__control">
                  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
                  <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
                      <use href="#icon-chevron-down-16"></use>
                  </svg>
              </span>
              <div class="combobox__listbox">
                  <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                      <div class="combobox__option" role="option">
                          <span>Soccer</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Hockey</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Tennis</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Prefilled Chips Combobox

      This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox">
          <ul class="chips-combobox__items" aria-label="Selected sports">
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
          </ul>
          <span class="combobox combobox--js chips-combobox__combobox">
              <span class="combobox__control chips-combobox_combobox__control">
                  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
                  <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
                      <use href="#icon-chevron-down-16"></use>
                  </svg>
              </span>
              <div class="combobox__listbox">
                  <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                      <div class="combobox__option" role="option">
                          <span>Soccer</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Hockey</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Tennis</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Chips Combobox in Disabled State

      When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.

      To turn on this state, add aria-disabled="true" to the outer element of the module. Additonally, you'll need to add the disabled attribute to all the buttons inside as well as the input element for combobox.

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox" aria-disabled="true">
          <ul class="chips-combobox__items" aria-label="Selected sports">
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
          </ul>
          <span class="combobox combobox--js chips-combobox__combobox">
              <span class="combobox__control chips-combobox_combobox__control">
                  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
                  <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
                      <use href="#icon-chevron-down-16"></use>
                  </svg>
              </span>
              <div class="combobox__listbox">
                  <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                      <div class="combobox__option" role="option">
                          <span>Soccer</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Hockey</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Tennis</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Chips Combobox in Error State

      When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.

      To turn on the error state, add a class of chips-combobox--error to the outer element of the module. To turn off the error state, remove the class.

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox chips-combobox--error">
          <ul class="chips-combobox__items" aria-label="Selected sports">
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
              <li>
                  <span class="chip">
                      <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                      <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
                          <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                              <use href="#icon-close-12"></use>
                          </svg>
                      </button>
                  </span>
              </li>
          </ul>
          <span class="combobox combobox--js chips-combobox__combobox">
              <span class="combobox__control chips-combobox_combobox__control">
                  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
                  <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
                      <use href="#icon-chevron-down-16"></use>
                  </svg>
              </span>
              <div class="combobox__listbox">
                  <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                      <div class="combobox__option" role="option">
                          <span>Soccer</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Hockey</span>
                      </div>
                      <div class="combobox__option" role="option">
                          <span>Tennis</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      @ebay/skin/combobox

      DS v2.2

      A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal, or via selection from the listbox options, or a combination of both.

      TIP: A combobox can be further enhanced with autocomplete behaviour.

      Default Combobox

      Selecting an option should simply fill the textbox with that value. Options may not have state or any other kind of secondary behaviour.

      Option 1
      Option 2
      Option 3
      <span class="combobox">
          <span class="combobox__control">
              <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-1" />
              <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                  <use href="#icon-chevron-down-12"></use>
              </svg>
          </span>
          <div class="combobox__listbox">
              <div id="listbox-1" class="combobox__options" role="listbox">
                  <div class="combobox__option" role="option">
                      <span>Option 1</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 2</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 3</span>
                  </div>
              </div>
          </div>
      </span>
          

      Disabled Combobox

      Apply the disabled property to disable the combobox.

      Option 1
      Option 2
      Option 3
      <span class="combobox">
          <span class="combobox__control">
              <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-2" disabled />
              <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                  <use href="#icon-chevron-down-12"></use>
              </svg>
          </span>
          <div class="combobox__listbox">
              <div id="listbox-2" class="combobox__options" role="listbox">
                  <div class="combobox__option" role="option">
                      <span>Option 1</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 2</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 3</span>
                  </div>
              </div>
          </div>
      </span>
          

      @ebay/skin/confirm-dialog

      DS v2.1

      A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action.

      The markup requirements are very strictly: a heading, description and two buttons.

      <div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade" hidden role="dialog">
          <div class="confirm-dialog__window confirm-dialog__window--fade">
              <div class="confirm-dialog__header">
                  <h2 id="confirm-dialog-title" class="confirm-dialog__title">Delete Address?</h2>
              </div>
              <div class="confirm-dialog__main">
              <p id="confirm-dialog__description">You will permanently lose this address.</p>
              </div>
              <div class="confirm-dialog__footer">
                  <button class="btn confirm-dialog__reject">Cancel</button>
                  <button class="btn btn--primary confirm-dialog__confirm" aria-describedby="confirm-dialog__description">Delete</button>
              </div>
          </div>
      </div>
          

      @ebay/skin/cta-button

      DS v1.2

      An action button takes users to another URL destination (i.e. it is always a hyperlink).

      <a class="cta-btn" href="https://www.ebay.com">
          <span class="cta-btn__cell">
              <span>Link</span>
              <svg aria-hidden="true" class="icon icon--arrow-right-24" height="8" width="8">
                  <use href="#icon-arrow-right-24"></use>
              </svg>
          </span>
      </a>
          

      @ebay/skin/date-textbox

      DS v1.0

      The date textbox offers a calendar based "date picker" as an alternative to manual text entry.

      Single Select Date Textbox

      The single select date textbox consists of a textbox plus icon button. The icon button launches an interactive calendar inside of a flyout.

      The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify.

      NOTE: a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version.

        <span class="date-textbox">
          <span class="textbox textbox--icon-end">
            <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
            <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
              <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
                <use href="#icon-calendar-24"></use>
              </svg>
            </button>
          </span>
          <div class="date-textbox__popover">
            <div class="calendar">
              <!-- see calendar module -->
            </div>
          </div>
        </span>
        

      Date Range Textbox

      Selecting a date range requires two textboxes; one for the start date and one for the end date.

        <span class="date-textbox">
          <span class="textbox">
            <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
          </span>
          <span class="textbox textbox--icon-end">
            <input class="textbox__control" type="text" />
            <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
              <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
                <use href="#icon-calendar-24"></use>
              </svg>
            </button>
          </span>
          <div class="date-textbox__popover">
            <div class="calendar">
              <!-- see calendar module -->
            </div>
          </div>
        </span>
        

      @ebay/skin/details

      DS v1.2

      A details element is an interactive control used to expand and collapse content.

      NOTE: The details-element-polyfill is required to polyfill older browsers.

      Default Details

      Details

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <details class="details">
          <summary class="details__summary">
              <span class="details__label">Details</span>
              <span class="details__icon" hidden>
                  <svg class="icon icon--chevron-down-12" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </summary>
          <p>Sample content</p>
      </details>
          

      Opened Details

      Apply the open attribute to change the state.

      Details

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <details class="details" open>
          <summary class="details__summary">
              <span class="details__label">Details</span>
              <span class="details__icon" hidden>
                  <svg class="icon icon--chevron-down-12" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </summary>
          <p>Sample content</p>
      </details>
          

      Centered Details

      Apply the details__summary--center class to center the summary.

      Details

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <details class="details">
          <summary class="details__summary details__summary--center">
              <span class="details__label">Details</span>
              <span class="details__icon" hidden>
                  <svg class="icon icon--chevron-down-12" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </summary>
          <p>Sample content</p>
      </details>
          

      Small Details

      Apply the details__summary--small class to use the smaller version of summary.

      Details

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <details class="details">
          <summary class="details__summary details__summary--small">
              <span class="details__label">Details</span>
              <span class="details__icon" hidden>
                  <svg class="icon icon--chevron-down-12" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </summary>
          <p>Sample content</p>
      </details>
          

      RTL Details

      Works with right-to-left languages.

      Details

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <details class="details" dir="rtl">
          <summary class="details__summary">
              <span class="details__label">Details</span>
              <span class="details__icon" hidden>
                  <svg class="icon icon--chevron-down-12" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </summary>
          <p>Sample content</p>
      </details>
          

      @ebay/skin/drawer-dialog

      DS v2.0

      ** DEPRECATED ** Use lightbox-dialog instead

      The drawer is a modal dialog that opens and slides out from the bottom of the screen. It is intended for small, mobile screens.

      When opened, a drawer will slide out only as far as its content, up to a maximum screen height of 50%.

      An opened drawer can be expanded beyond 50%, all the way to 95% screen height, by applying the .drawer-dialog__window--expanded modifier class. This class should be added with JavaScript when scrolling the content or clicking the handle button.

      <div class="drawer-dialog drawer-dialog--mask-fade" role="dialog" aria-labelledby="drawer-dialog-title" aria-modal="true" hidden>
          <div class="drawer-dialog__window">
              <div class="drawer-dialog__window drawer-dialog__window--slide">
                  <button aria-label="Expand Dialog" class="drawer-dialog__handle" type="button"></button>
                  <div class="drawer-dialog__header">
                      <h2 id="drawer-dialog-title" class="large-text-1 bold-text">Heading</h2>
                      <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
                          <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                  </div>
                  <div class="drawer-dialog__main">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      </p>
                      <!-- content removed for brevity -->
                  </div>
              </div>
          </div>
      </div>
          

      Drawer with text close button

      <div class="drawer-dialog drawer-dialog--mask-fade" role="dialog" aria-labelledby="drawer-dialog-title" aria-modal="true" hidden>
          <div class="drawer-dialog__window">
              <div class="drawer-dialog__window drawer-dialog__window--slide">
                  <button aria-label="Expand Dialog" class="drawer-dialog__handle" type="button"></button>
                  <div class="drawer-dialog__header">
                      <h2 id="drawer-dialog-title" class="large-text-1 bold-text">Heading</h2>
                      <button class="fake-link">Done</button>
                  </div>
                  <div class="drawer-dialog__main">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      </p>
                      <!-- content removed for brevity -->
                  </div>
              </div>
          </div>
      </div>
          

      @ebay/skin/fullscreen-dialog

      DS v2.1

      A fullscreen dialog is a child window that takes up the entire viewport. Typically used on small screens.

      The dialog must remain in a hidden state for all users and devices until opened.

      <div class="fullscreen-dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true" hidden>
          <div class="fullscreen-dialog__window">
              <div id="dialog-title-fade-1" class="fullscreen-dialog__header">
                  <h2 class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="fullscreen-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
          

      Fullscreen Dialog with footer

      <div class="fullscreen-dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true" hidden>
          <div class="fullscreen-dialog__window">
              <div id="dialog-title-fade-1" class="fullscreen-dialog__header">
                  <h2 class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="fullscreen-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
              <div class="fullscreen-dialog__footer">
                  <button class="btn btn--primary">Submit</button>
                  <button class="btn">Cancel</button>
              </div>
          </div>
      </div>
          

      Sliding Fullscreen Dialog

      The fullscreen dialog should slide in and out, using the fullscreen-dialog__window--slide modifier.

      You can use fullscreen-dialog__window--slide-end modifier, to slide in from the right side of the screen.

      <div class="fullscreen-dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true" hidden>
          <div class="fullscreen-dialog__window dialog__window--slide">
              <div class="fullscreen-dialog__header">
                  <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="fullscreen-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
      
      <div class="fullscreen-dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true" hidden>
          <div class="fullscreen-dialog__window dialog__window--slide-end">
              <div class="fullscreen-dialog__header">
                  <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="fullscreen-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
          

      @ebay/skin/eek

      DS v1.1

      EEKs have two parts, a range, and a rating. The following ranges are available:

      EEK MIN EEK MAX ICON
      D A+++ A+++ D
      E A+++ A+++ E
      G A+++ A+++ G
      E A++ A++ E
      G A++ A++ G
      F A+ A+ F
      E A+ A+ E
      G A A G

      And for each range, making sure each rating exists within that given range, the EEK can have the following ratings:

      Then each rating needs to have a different color. This depends on the distance it is from the upper range

      EEK RATING NAME A+++ D A+++ E A+++ G A++ E
      A+++ .eek--rating-1 .eek--rating-1 .eek--rating-1
      A++ .eek--rating-2 .eek--rating-2 .eek--rating-2 .eek--rating-1
      A+ .eek--rating-3 .eek--rating-3 .eek--rating-3 .eek--rating-2
      A .eek--rating-4 .eek--rating-4 .eek--rating-4 .eek--rating-3
      B .eek--rating-5 .eek--rating-5 .eek--rating-5 .eek--rating-4
      C .eek--rating-6 .eek--rating-6 .eek--rating-6 .eek--rating-5
      D .eek--rating-7 .eek--rating-7 .eek--rating-7 .eek--rating-6
      E .eek--rating-7 .eek--rating-7 .eek--rating-7
      F .eek--rating-7
      G
      EEK RATING NAME A++ G A+ F A+ E A G
      A+++
      A++ .eek--rating-1
      A+ .eek--rating-2 .eek--rating-1 .eek--rating-1
      A .eek--rating-3 .eek--rating-2 .eek--rating-2 .eek--rating-1
      B .eek--rating-4 .eek--rating-3 .eek--rating-3 .eek--rating-2
      C .eek--rating-5 .eek--rating-4 .eek--rating-4 .eek--rating-3
      D .eek--rating-6 .eek--rating-5 .eek--rating-5 .eek--rating-4
      E .eek--rating-7 .eek--rating-6 .eek--rating-6 .eek--rating-5
      F .eek--rating-7 .eek--rating-7 .eek--rating-7 .eek--rating-6
      G .eek--rating-7 .eek--rating-7 .eek--rating-7
          <div class="eek eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
              <div class="eek__container">
                  <span class="eek__rating-range">
                      <span aria-hidden="true">A+++</span>
                      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
                          <use href="#icon-eek-range-arrow"></use>
                      </svg>
                      <span aria-hidden="true">D</span>
                  </span>
                  <span class="eek__rating" aria-hidden="true">
                      A+++
                  </span>
              </div>
              <svg class="icon icon--eek-arrow" aria-hidden="true">
                  <use href="#icon-eek-arrow"></use>
              </svg>
          </div>
          <div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
              <div class="eek__container">
                  <span class="eek__rating-range">
                      <span aria-hidden="true">A++</span>
                      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
                          <use href="#icon-eek-range-arrow"></use>
                      </svg>
                      <span aria-hidden="true">E</span>
                  </span>
                  <span class="eek__rating" aria-hidden="true">
                      B
                  </span>
              </div>
              <svg class="icon icon--eek-arrow" aria-hidden="true">
                  <use href="#icon-eek-arrow"></use>
              </svg>
          </div>
          <div class="eek eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
              <div class="eek__container">
                  <span class="eek__rating-range">
                      <span aria-hidden="true">A+</span>
                      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
                          <use href="#icon-eek-range-arrow"></use>
                      </svg>
                      <span aria-hidden="true">E</span>
                  </span>
                  <span class="eek__rating" aria-hidden="true">
                      G
                  </span>
              </div>
              <svg class="icon icon--eek-arrow" aria-hidden="true">
                  <use href="#icon-eek-arrow"></use>
              </svg>
          </div>
          

      @ebay/skin/field

      The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).

      Unstacked Field

      The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.

      Multiple fields can be laid out inline by using the span tag with field class, as per the example below.

      <span class="field">
          <label class="field__label" for="field1">Field 1</label>
          <span class="field__control textbox">
              <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
          </span>
      </span>
      <span class="field">
          <label class="field__label" for="field2">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
      <span class="field">
          <label class="field__label" for="field3">Field 3</label>
          <span class="field__control switch">
              <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
              <span class="switch__button"></span>
          </span>
      </span>
          

      Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.

      <div class="field">
          <label class="field__label" for="field1">Field 1</label>
          <span class="field__control textbox">
              <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
          </span>
      </div>
      <div class="field">
          <label class="field__label" for="field2">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </div>
      <div class="field">
          <label class="field__label" for="field3">Field 3</label>
          <span class="field__control switch">
              <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
              <span class="switch__button"></span>
          </span>
      </div>
          

      For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.

      <span class="field field--align-top">
          <label class="field__label" for="field-textarea-1">Field 1</label>
          <span class="field__control textbox">
              <textarea class="textbox__control" id="field-textarea-1"></textarea>
          </span>
      </span>

      Stacked Field

      For a label stacked above the control, use the field__label--stacked element modifier.

      Again, multiple fields can be laid out inline by using a span tag, as per the example below.

      <span class="field">
          <label class="field__label field__label--stacked" for="field1">Field 1</label>
          <span class="textbox">
              <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
          </span>
      </span>
      <span class="field">
          <label class="field__label field__label--stacked" for="field2">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
      <span class="field">
          <label class="field__label field__label--stacked">Field 3</label>
          <span class="field__control switch">
              <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
              <span class="switch__button"></span>
          </span>
      </span>
          

      Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.

      <div class="field">
          <label class="field__label field__label--stacked" for="field1">Field 1</label>
          <span class="textbox">
              <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
          </span>
      </div>
      <div class="field">
          <label class="field__label field__label--stacked" for="field2">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </div>
      <span class="field">
          <label class="field__label field__label--stacked">Field 3</label>
          <span class="field__control switch">
              <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
              <span class="switch__button"></span>
          </span>
      </div>
          

      Field Font-Size

      The field label will honour any font-size cascade. Wrap the label and control in a field__group element to maintain vertical alignment.

      NOTE: form controls do not inherit the font-size cascade. This is default browser behaviour.

      <span class="field" style="font-size: 18px;">
          <span class="field__group">
              <label class="field__label" for="email">Field 1</label>
              <span class="field__control textbox">
                  <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
              </span>
          </span>
      </span>
      <span class="field" style="font-size: 18px;">
          <span class="field__group">
              <label class="field__label" for="size">Field 2</label>
              <span class="field__control">
                  <span class="select">
                      <select name="size" id="size">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                      </select>
                      <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                          <use href="#icon-chevron-down-12"></use>
                      </svg>
                  </span>
              </span>
          </span>
      </span>
      <span class="field" style="font-size: 18px;">
          <span class="field__group">
              <label class="field__label" for="field3">Field 3</label>
              <span class="field__control switch">
                  <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
                  <span class="switch__button"></span>
              </span>
          </span>
      </span>
          

      Disabled Field

      The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.

      <span class="field">
          <label class="field__label field__label--disabled" for="email">Field 1</label>
          <span class="field__control textbox">
              <input class="textbox__control" id="field1" type="text" value="placeholder text" disabled />
          </span>
      </span>
      <span class="field">
          <label class="field__label field__label--disabled" for="size">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2" disabled>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
      <span class="field">
          <label class="field__label field__label--disabled" for="field3">Field 3</label>
          <span class="field__control switch">
              <input disabled aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
              <span class="switch__button"></span>
          </span>
      </span>
          

      TIP: Disabled controls are exempt from WCAG colour contrast requirements.

      Readonly Field

      A readonly control is conveyed using the readonly attribute. The value of a readonly control is passed to the server.

      <span class="field">
          <label class="field__label" for="email">Field 1</label>
          <span class="field__control textbox">
              <input class="textbox__control" id="field1" type="text" value="placeholder text" readonly />
          </span>
      </span>
      <span class="field">
          <label class="field__label" for="size">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select name="field2" id="field2" readonly>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
          

      Required Field

      A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.

      <span class="field">
          <label class="field__label" for="email">Field 1 <sup>*</sup></label>
          <span class="field__control textbox">
              <input aria-required="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text">
          </span>
      </div>
      <span class="field">
          <label class="field__label" for="size">Field 2 <sup>*</sup></label>
          <span class="field__control">
              <span class="select">
                  <select aria-required="true" id="field2">
                      <option value="0" disabled selected>-select-</option>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
          

      Invalid Field

      An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.

      IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.

      <span class="field">
          <label class="field__label" for="email">Field 1</label>
          <span class="field__control textbox">
              <input aria-invalid="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text">
          </span>
      </span>
      <span class="field">
          <label class="field__label" for="size">Field 2</label>
          <span class="field__control">
              <span class="select">
                  <select aria-invalid="true" id="field2">
                      <option value="0" disabled selected>-select-</option>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                  </select>
                  <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </span>
      </span>
          

      Field Description

      A field may have nearby text to describe additional instructions, status or validation error of the control.

      The field__description element defines some minimal styling, but does not dictate location or layout. This element has modifiers for confirmation, information and attention, depending on the type of descriptive text (or icon).

      TIP: The description element can be designated as an ARIA live-region if client-side updates occur.

      Text on Side of Field

      A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.

      Field description or error
      <span class="field">
          <label class="field__label" for="field1">Field 1</label>
          <span class="field__control textbox">
              <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
          </span>
          <span class="field__description" id="field1-description">
              <span>Field description or error</span>
          </span>
      </span>
          

      To change the type of decription you would use field__description--confirmation, field__description--information, or field__description--attention.

      Field description - default
      Field description - confirmation
      Field description - information
      Field description - error (attention)

      Text Below Stacked Field

      A description can be placed underneath a stacked field simply by using a block-level tag, such as div.

      Field description or error
      <span class="field">
          <label class="field__label field__label--stacked" for="field1">Field 1</label>
          <div class="field__control textbox">
              <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
          </div>
          <div class="field__description" id="field1-description">
              <span>Field description or error</span>
          </div>
      </span>
          

      Text Above or Below Unstacked Field

      A description can be added directly above and/or below the control by utlising CSS table-layout via the field--table modifier and field__row elements.

      Field description or error
      <span class="field field--table">
          <div class="field__row">
              <span><!-- empty cell--></span>
              <span class="field__description" id="field1-description">
                  <span>Field description or error</span>
              </span>
          </div>
          <div class="field__row">
              <label class="field__label" for="field1">Field Label</label>
              <span class="textbox">
                  <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
              </span>
          </div>
      </span>
          

      Text Below Floating label

      When you use a floating label, you can have the description text below

      Field description or error
      <span class="field floating-label">
          <label class="floating-label__label" for="field1">Field 1</label>
          <div class="field__control textbox">
              <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
          </div>
          <div class="field__description" id="field1-description">
              <span>Field description or error</span>
          </div>
      </span>
          

      Listbox Button with Label in Error State

      You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.

      Red
      Blue
      Yellow
      Green
      There was an error
      <span class="field">
          <label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button 1</label>
          <div class="field__control textbox">
              <span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
                  <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
                      <span class="btn__cell">
                          <span class="btn__label">Color: </span>
                          <span class="btn__text">-</span>
                          <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                              <use href="#icon-chevron-down-12"></use>
                          </svg>
                      </span>
                  </button>
                  <div class="listbox-button__listbox">
                      <div class="listbox-button__options" role="listbox">
                          <div class="listbox-button__option" role="option">
                              <span class="listbox-button__value">Red</span>
                              <svg class="icon icon--tick-16" height="10" width="14">
                                  <use href="#icon-tick-16"></use>
                              </svg>
                          </div>
                          <div class="listbox-button__option" role="option">
                              <span class="listbox-button__value">Blue</span>
                              <svg class="icon icon--tick-16" height="10" width="14">
                                  <use href="#icon-tick-16"></use>
                              </svg>
                          </div>
                          <div class="listbox-button__option" role="option" aria-disabled="true">
                              <span class="listbox-button__value">Yellow</span>
                              <svg class="icon icon--tick-16" height="10" width="14">
                                  <use href="#icon-tick-16"></use>
                              </svg>
                          </div>
                          <div class="listbox-button__option" role="option">
                              <span class="listbox-button__value">Green</span>
                              <svg class="icon icon--tick-16" height="10" width="14">
                                  <use href="#icon-tick-16"></use>
                              </svg>
                          </div>
                      </div>
                  </div>
                  <select id="field-listbox-button-1" hidden="" class="listbox__native">
                      <option value="1"></option>
                      <option value="2"></option>
                      <option value="3"></option>
                      <option value="4"></option>
                  </select>
              </span>
          </div>
          <div class="field__description field__description--attention" id="field-listbox-button-1-description">
              <svg class="icon icon--attention-filled-16" height="10" width="14" aria-hidden="true">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
              <span>There was an error</span>
          </div>
      </span>
          

      Textbox in Error State

      You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

      There was an error

      Textbox in Error State

      You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

      <span class="field">
          <label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
          <div class="field__control textbox">
              <input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
          </div>
          <div class="field__description field__description--attention" id="field-textbox-1-description">
              <svg class="icon icon--attention-filled-16" height="10" width="14" aria-hidden="true">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
              <span>There was an error</span>
          </div>
      </span>
          

      Fluid Field

      Form control elements (such as select and input) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.

      For a stacked field the control must be set to 100% width (using the fluid utility class) to fill all available space.

      <div class="field-group">
          <span class="field fluid">
              <label class="field__label field__label--stacked" for="field1">Field 1</label>
              <div class="field__control textbox">
                  <input class="textbox__control fluid" id="field1" name="field1" type="text" placeholder="placeholder text" />
              </div>
          </span>
          <span class="field fluid">
              <label class="field__label field__label--stacked" for="field2">Field 2</label>
              <div class="field__control fluid">
                  <div class="select select--fluid">
                      <select name="field2" id="field2">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                      </select>
                      <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                          <use href="#icon-chevron-down-12"></use>
                      </svg>
                  </div>
              </div>
          </span>
      </div>
          

      The above example shows the fields in a flexbox layout. This layout is created using the field-group helper class. Notice that each field is also set to fluid, in order to fill all available flexbox space (flexbox layout takes care of dividing the space evenly between fluid fields).

      If we set the form control width to 100% in an unstacked field, the control would flow to a new line below the label (effectively behaving like a stacked label). This behaviour can be avoided by adding an additional field__group element to create flex layout inside of the field.

      <div class="field-group">
          <span class="field fluid">
              <span class="field__group fluid">
                  <label class="field__label no-wrap" for="field1">Field 1</label>
                  <span class="field__control fluid textbox">
                      <input class="textbox__control fluid" id="field1" type="text" placeholder="placeholder text" />
                  </span>
              </span>
          </span>
          <span class="field fluid">
              <span class="field__group fluid">
                  <label class="field__label no-wrap" for="field2">Field 2</label>
                  <span class="field__control fluid">
                      <span class="select select--fluid">
                          <select name="field2" id="field2">
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                          </select>
                          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                              <use href="#icon-chevron-down-12"></use>
                          </svg>
                      </span>
                  </span>
              </span>
          </span>
      </div>
          

      TIP: You may want to experiment with sizes other than 100%, and also the flexbox justify-content property.

      For a fluid control and description, those elements can be wrapped in a field__group container to create flex layout.

      Field description or error
      Field description or error
      <div class="field-group">
          <span class="field fluid">
              <label class="field__label field__label--stacked" for="field1-fluid-block-1">Field 1</label>
              <div class="field__group">
                  <span class="field__control textbox fluid">
                      <input class="textbox__control fluid" id="field1" type="text" placeholder="placeholder text" />
                  </span>
                  <span class="field__description">
                      <span>Field description or error</span>
                  </span>
              </div>
          </span>
          <span class="field fluid">
              <label class="field__label field__label--stacked" for="field2">Field 2</label>
              <div class="field__group">
                  <div class="field__control fluid">
                      <div class="select select--fluid">
                          <select name="field-fluid-block-2" id="field2">
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                          </select>
                          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                              <use href="#icon-chevron-down-12"></use>
                          </svg>
                      </div>
                  </div>
                  <span class="field__description">
                      <span>Field description or error</span>
                  </span>
              </div>
          </span>
      </div>
              

      Field Character Count

      A field may have a character count section typically under the input and aligned to the right.

      This variant adds a top-level container that houses both the field description and the character count, though field description or error is not necessary.

      In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, aria-live should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.

      Field with Character Count Only

      Character character can be added by utlising CSS grid via the field__description--group modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right

      0 of 140 charaters
      <span class="field">
          <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
          <span class="field__control textbox">
              <input type="text" aria-describedby="field-character-2" class="textbox__control" id="field-character-2-input" aria-live="off" />
          </span>
          <div class="field__description field__description--group">
              <span id="field-character-2">
                  0 of 140
                  <span class="clipped"> charaters</span>
              </span>
          </span>
      </span>

      Field Description and Character Count

      A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.

      Field description or error 0 of 140 charaters
      <span class="field">
          <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
          <span class="field__control textbox">
              <input type="text" aria-describedby="field-describe-3 field-character-3" class="textbox__control" aria-live="off"/>
          </span>
          <div class="field__description field__description--group">
              <span id="field-describe-3">Field description or error</span>
              <span id="field-character-3">
                  0 of 140
                  <span class="clipped"> charaters</span>
              </span>
          </div>
      </span>
          

      Field Description and Character Count with Text area

      A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.

      Field description or error 0 of 140 charaters
      <span class="field">
          <label class="field__label field__label--stacked" for="field-textarea-2">Field 2</label>
          <span class="field__control textbox">
              <textarea class="textbox__control" id="field-textarea-2" aria-describedby="field-describe-4 field-character-4" aria-live="off"></textarea>
          </span>
          <div class="field__description field__description--group">
              <span id="field-describe-4">Field description or error</span>
              <span id="field-character-4">
                  0 of 140
                  <span class="clipped"> charaters</span>
              </span>
          </div>
      </span>
          

      @ebay/skin/filter-button

      DS v2.0

      Use the filter-button or filter-link classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a filter-group container.

      Unselected Filter Button

      By default, a filter button is in a non-selected state.

      Link
      <div class="filter-group">
          <button type="button" class="filter-button">
              <span class="filter-button__cell">Button</span>
          </button>
          <a href="https://www.ebay.com" class="filter-link">
              <span class="filter-link__cell">Link</span>
          </a>
      </div>
          

      Selected Filter Button

      Apply the aria-pressed state to a button, or filter-link--selected modifier to a link.

      <div class="filter-group">
          <button type="button" class="filter-button" aria-pressed="true">
              <span class="filter-button__cell">Button</span>
          </button>
          <a href="https://www.ebay.com" class="filter-link filter-link--selected">
              <span class="filter-link__cell">Link<span class="clipped"> - Selected</span></span>
          </a>
      </div>
          

      Disabled Filter Button

      Apply the disabled property or remove the href attribute to disable a button or link, respectively.

      <div class="filter-group">
          <button type="button" class="filter-button" aria-pressed="false" disabled>
              <span class="filter-button__cell">Button</span>
          </button>
          <a class="filter-link">
              <span class="filter-link__cell">Link<span class="clipped"> - Selected</span></span>
          </a>
      </div>
          

      Truncated Filter Button

      Long text will automatically become truncated when it reaches the maximum width.

      Link with lots of text that will become truncated
      <div class="filter-group">
          <button type="button" class="filter-button">
              <span class="filter-button__cell">Button with lots of text that will become truncated</span>
          </button>
          <a href="https://www.ebay.com" class="filter-link">
              <span class="filter-link__cell">Link with lots of text that will become truncated</span>
          </a>
      </div>
          

      @ebay/skin/filter-menu

      DS v2.0

      A filter menu forms the basis of the filter-menu-button module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).

      Multi-Select Filter Menu

      <span class="filter-menu">
          <div class="filter-menu__items" role="menu">
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 1</span>
              </div>
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 2</span>
              </div>
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 3</span>
              </div>
          </div>
      </span>
          

      Single-Select Filter Menu

      <div class="filter-menu">
          <div class="filter-menu__items" role="menu">
              <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
                  <span class="filter-menu__radio">
                      <svg class="icon icon--radio-unchecked-18" height="18" width="18">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--radio-checked-18" height="18" width="18">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 1</span>
              </div>
              <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
                  <span class="filter-menu__radio">
                      <svg class="icon icon--radio-unchecked-18" height="18" width="18">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--radio-checked-18" height="18" width="18">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 2</span>
              </div>
              <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
                  <span class="filter-menu__radio">
                      <svg class="icon icon--radio-unchecked-18" height="18" width="18">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--radio-checked-18" height="18" width="18">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 3</span>
              </div>
          </div>
      </div>
          

      Filter Menu with Disabled Options

      <span class="filter-menu">
          <div class="filter-menu__items" role="menu">
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 1</span>
              </div>
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 2</span>
              </div>
              <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
                  <span class="filter-menu__checkbox">
                      <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                          <use href="#icon-checkbox-unchecked-18"></use>
                      </svg>
                      <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                          <use href="#icon-checkbox-checked-18"></use>
                      </svg>
                  </span>
                  <span class="filter-menu__text">Item 3</span>
              </div>
          </div>
      </span>
          

      Filter Menu as Form

      A form version is also available. It uses the checkbox and radio modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.

      <div class="filter-menu-form">
          <form name="filter-menu-form-1" action="https://www.ebay.com">
              <div class="filter-menu-form__items">
                  <label for="filter-menu-form-checkbox-item-1" class="filter-menu-form__item">
                      <span class="checkbox">
                          <input aria-label="Item 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
                          <span class="checkbox__icon" hidden>
                              <svg class="checkbox__unchecked" height="18" width="18">
                                  <use href="#icon-checkbox-unchecked-18"></use>
                              </svg>
                              <svg class="checkbox__checked" height="18" width="18">
                                  <use href="#icon-checkbox-checked-18"></use>
                              </svg>
                          </span>
                      </span>
                      <span class="filter-menu-form__text">Item 1</span>
                  </label>
                  <label for="filter-menu-form-checkbox-item-2" class="filter-menu-form__item">
                      <span class="checkbox">
                          <input aria-label="Item 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
                          <span class="checkbox__icon" hidden>
                              <svg class="checkbox__unchecked" height="18" width="18">
                                  <use href="#icon-checkbox-unchecked-18"></use>
                              </svg>
                              <svg class="checkbox__checked" height="18" width="18">
                                  <use href="#icon-checkbox-checked-18"></use>
                              </svg>
                          </span>
                      </span>
                      <span class="filter-menu-form__text">Item 2</span>
                  </label>
                  <label for="filter-menu-form-checkbox-item-3" class="filter-menu-form__item">
                      <span class="checkbox">
                          <input aria-label="Item 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
                          <span class="checkbox__icon" hidden>
                              <svg class="checkbox__unchecked" height="18" width="18">
                                  <use href="#icon-checkbox-unchecked-18"></use>
                              </svg>
                              <svg class="checkbox__checked" height="18" width="18">
                                  <use href="#icon-checkbox-checked-18"></use>
                              </svg>
                          </span>
                      </span>
                      <span class="filter-menu-form__text">Item 3</span>
                  </label>
              </div>
              <button type="submit" class="filter-menu-form__footer">Apply</button>
          </form>
      </div>
          

      @ebay/skin/filter-menu-button

      DS v2.0

      A filter menu button opens a menu of options by which to filter a result set.

      Non-Active Filter Menu Button

      With no filters active, a filter menu button should be in a non-active state. Set the aria-pressed property to false.

      <span class="filter-menu-button">
          <button type="button" class="filter-menu-button__button" aria-pressed="false">
              <span class="filter-menu-button__button-cell">
                  <span class="filter-menu-button__button-text">Color</span>
                  <svg class="icon icon--chevron-down-12" height="12" width="12">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="filter-menu-button__menu">
              <div class="filter-menu-button__items" role="menu">
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Red</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Blue</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Yellow</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Green</span>
                  </div>
              </div>
          </div>
      </span>
          

      Active Filter Menu Button

      With one or more filters active, set the button's aria-pressed property to true.

      <span class="filter-menu-button">
          <button type="button" class="filter-menu-button__button" aria-pressed="true">
              <span class="filter-menu-button__button-cell">
                  <span class="filter-menu-button__button-text">Color</span>
                  <svg class="icon icon--chevron-down-12" height="12" width="12">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="filter-menu-button__menu">
              <div class="filter-menu-button__items" role="menu">
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Red</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="true">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Blue</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Yellow</span>
                  </div>
                  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="true">
                      <span class="filter-menu-button__checkbox">
                          <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                              <use href="#icon-checkbox-unchecked-18"></use>
                          </svg>
                          <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                              <use href="#icon-checkbox-checked-18"></use>
                          </svg>
                      </span>
                      <span class="filter-menu-button__text">Green</span>
                  </div>
              </div>
          </div>
      </span>
          

      Disabled Filter Menu Button

      The button can be disabled using the disabled property.

      Filter Menu Button with a Form

      When a native form is required, wrap the menu items with a form and use the appropriate checkbox markup.

      <span class="filter-menu-button">
          <button type="button" class="filter-menu-button__button" aria-pressed="false">
              <span class="filter-menu-button__button-cell">
                  <span class="filter-menu-button__button-text">Color</span>
                  <svg class="icon icon--chevron-down-12" height="12" width="12">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <span class="filter-menu-button__menu">
              <form name="filter-menu-button-form-1" action="https://www.ebay.com">
                  <div class="filter-menu-button__items">
                      <label for="filter-menu-button-checkbox-item-1" class="filter-menu-button__item">
                          <span class="checkbox">
                              <input aria-label="Red" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-button-checkbox-item-1" />
                              <span class="checkbox__icon" hidden>
                                  <svg class="checkbox__unchecked" height="18" width="18">
                                      <use href="#icon-checkbox-unchecked-18"></use>
                                  </svg>
                                  <svg class="checkbox__checked" height="18" width="18">
                                      <use href="#icon-checkbox-checked-18"></use>
                                  </svg>
                              </span>
                          </span>
                          <span class="filter-menu-button__text">Red</span>
                      </label>
                      <label for="filter-menu-button-checkbox-item-2" class="filter-menu-button__item">
                          <span class="checkbox">
                              <input aria-label="Blue" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-button-checkbox-item-2" />
                              <span class="checkbox__icon" hidden>
                                  <svg class="checkbox__unchecked" height="18" width="18">
                                      <use href="#icon-checkbox-unchecked-18"></use>
                                  </svg>
                                  <svg class="checkbox__checked" height="18" width="18">
                                      <use href="#icon-checkbox-checked-18"></use>
                                  </svg>
                              </span>
                          </span>
                          <span class="filter-menu-button__text">Blue</span>
                      </label>
                      <label for="filter-menu-button-checkbox-item-1" class="filter-menu-button__item">
                          <span class="checkbox">
                              <input aria-label="Yellow" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-button-checkbox-item-3" />
                              <span class="checkbox__icon" hidden>
                                  <svg class="checkbox__unchecked" height="18" width="18">
                                      <use href="#icon-checkbox-unchecked-18"></use>
                                  </svg>
                                  <svg class="checkbox__checked" height="18" width="18">
                                      <use href="#icon-checkbox-checked-18"></use>
                                  </svg>
                              </span>
                          </span>
                          <span class="filter-menu-button__text">Yellow</span>
                      </label>
                      <label for="filter-menu-button-checkbox-item-2" class="filter-menu-button__item">
                          <span class="checkbox">
                              <input aria-label="Green" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-4" id="filter-menu-button-checkbox-item-4" />
                              <span class="checkbox__icon" hidden>
                                  <svg class="checkbox__unchecked" height="18" width="18">
                                      <use href="#icon-checkbox-unchecked-18"></use>
                                  </svg>
                                  <svg class="checkbox__checked" height="18" width="18">
                                      <use href="#icon-checkbox-checked-18"></use>
                                  </svg>
                              </span>
                          </span>
                          <span class="filter-menu-button__text">Green</span>
                      </label>
                  </div>
                  <button type="submit" class="filter-menu__footer">Apply</button>
              </form>
          </span>
      </span>
          

      @ebay/skin/flag

      DS v1.0

      The flag module is a bundle that provides full access to all the country flags via the <svg> and <use> tags.

        <svg class="flag flag--us" height="48" width="64">
          <use href="#flag-us"></use>
        </svg>
        

      Including an Flag

      A flag can be referenced from the flags svg file. We also provide individual flags as SVGs located in this directory. You can include these on your page as raw SVGs as needed.

        <div hidden>
          <svg class="flag flag--us" height="48" width="64">
            <use href="#flag-us"></use>
          </svg>
        </div>
        

      NOTE: the SVG tag does not support the hidden attribute, hence a hidden wrapper element is needed.

      • af Afghanistan
      • ax Aland Islands
      • al Albania
      • dz Algeria
      • as American Samoa
      • ad Andorra
      • ao Angola
      • ai Anguilla
      • aq Antarctica
      • ag Antigua and Barbuda
      • ar Argentina
      • am Armenia
      • aw Aruba
      • ac Ascension Island
      • au Australia
      • at Austria
      • az Azerbaijan
      • bs Bahamas
      • bh Bahrain
      • bd Bangladesh
      • bb Barbados
      • es-pv Basque Country
      • by Belarus
      • be Belgium
      • bz Belize
      • bj Benin
      • bm Bermuda
      • bt Bhutan
      • bo Bolivia
      • bq Bonaire, Sint Eustatius and Saba
      • ba Bosnia and Herzegovina
      • bw Botswana
      • bv Bouvet Island
      • br Brazil
      • io British Indian Ocean Territory
      • bn Brunei Darussalam
      • bg Bulgaria
      • bf Burkina Faso
      • bi Burundi
      • cv Cabo Verde
      • kh Cambodia
      • cm Cameroon
      • ca Canada
      • ic Canary Islands
      • es-ct Catalonia
      • ky Cayman Islands
      • cf Central African Republic
      • cefta Central European Free Trade Agreement
      • td Chad
      • cl Chile
      • cn China
      • cx Christmas Island
      • cp Clipperton Island
      • cc Cocos (Keeling) Islands
      • co Colombia
      • km Comoros
      • ck Cook Islands
      • cr Costa Rica
      • hr Croatia
      • cu Cuba
      • cw Curaçao
      • cy Cyprus
      • cz Czech Republic
      • ci Côte d'Ivoire
      • cd Democratic Republic of the Congo
      • dk Denmark
      • dg Diego Garcia
      • dj Djibouti
      • dm Dominica
      • do Dominican Republic
      • ec Ecuador
      • eg Egypt
      • sv El Salvador
      • gb-eng England
      • gq Equatorial Guinea
      • er Eritrea
      • ee Estonia
      • sz Eswatini
      • et Ethiopia
      • eu Europe
      • fk Falkland Islands
      • fo Faroe Islands
      • fm Federated States of Micronesia
      • fj Fiji
      • fi Finland
      • fr France
      • gf French Guiana
      • pf French Polynesia
      • tf French Southern Territories
      • ga Gabon
      • es-ga Galicia
      • gm Gambia
      • ge Georgia
      • de Germany
      • gh Ghana
      • gi Gibraltar
      • gr Greece
      • gl Greenland
      • gd Grenada
      • gp Guadeloupe
      • gu Guam
      • gt Guatemala
      • gg Guernsey
      • gn Guinea
      • gw Guinea-Bissau
      • gy Guyana
      • ht Haiti
      • hm Heard Island and McDonald Islands
      • va Holy See
      • hn Honduras
      • hk Hong Kong
      • hu Hungary
      • is Iceland
      • in India
      • id Indonesia
      • ir Iran
      • iq Iraq
      • ie Ireland
      • im Isle of Man
      • il Israel
      • it Italy
      • jm Jamaica
      • jp Japan
      • je Jersey
      • jo Jordan
      • kz Kazakhstan
      • ke Kenya
      • ki Kiribati
      • xk Kosovo
      • kw Kuwait
      • kg Kyrgyzstan
      • la Laos
      • lv Latvia
      • lb Lebanon
      • ls Lesotho
      • lr Liberia
      • ly Libya
      • li Liechtenstein
      • lt Lithuania
      • lu Luxembourg
      • mo Macau
      • mg Madagascar
      • mw Malawi
      • my Malaysia
      • mv Maldives
      • ml Mali
      • mt Malta
      • mh Marshall Islands
      • mq Martinique
      • mr Mauritania
      • mu Mauritius
      • yt Mayotte
      • mx Mexico
      • md Moldova
      • mc Monaco
      • mn Mongolia
      • me Montenegro
      • ms Montserrat
      • ma Morocco
      • mz Mozambique
      • mm Myanmar
      • na Namibia
      • nr Nauru
      • np Nepal
      • nl Netherlands
      • nc New Caledonia
      • nz New Zealand
      • ni Nicaragua
      • ne Niger
      • ng Nigeria
      • nu Niue
      • nf Norfolk Island
      • kp North Korea
      • mk North Macedonia
      • gb-nir Northern Ireland
      • mp Northern Mariana Islands
      • no Norway
      • om Oman
      • pk Pakistan
      • pw Palau
      • pa Panama
      • pg Papua New Guinea
      • py Paraguay
      • pe Peru
      • ph Philippines
      • pn Pitcairn
      • pl Poland
      • pt Portugal
      • pr Puerto Rico
      • qa Qatar
      • cg Republic of the Congo
      • ro Romania
      • ru Russia
      • rw Rwanda
      • re Réunion
      • bl Saint Barthélemy
      • sh Saint Helena, Ascension and Tristan da Cunha
      • kn Saint Kitts and Nevis
      • lc Saint Lucia
      • mf Saint Martin
      • pm Saint Pierre and Miquelon
      • vc Saint Vincent and the Grenadines
      • ws Samoa
      • sm San Marino
      • st Sao Tome and Principe
      • sa Saudi Arabia
      • gb-sct Scotland
      • sn Senegal
      • rs Serbia
      • sc Seychelles
      • sl Sierra Leone
      • sg Singapore
      • sx Sint Maarten
      • sk Slovakia
      • si Slovenia
      • sb Solomon Islands
      • so Somalia
      • za South Africa
      • gs South Georgia and the South Sandwich Islands
      • kr South Korea
      • ss South Sudan
      • es Spain
      • lk Sri Lanka
      • ps State of Palestine
      • sd Sudan
      • sr Suriname
      • sj Svalbard and Jan Mayen
      • se Sweden
      • ch Switzerland
      • sy Syria
      • tw Taiwan
      • tj Tajikistan
      • tz Tanzania
      • th Thailand
      • tl Timor-Leste
      • tg Togo
      • tk Tokelau
      • to Tonga
      • tt Trinidad and Tobago
      • ta Tristan da Cunha
      • tn Tunisia
      • tm Turkmenistan
      • tc Turks and Caicos Islands
      • tv Tuvalu
      • tr Türkiye
      • ug Uganda
      • ua Ukraine
      • ae United Arab Emirates
      • gb United Kingdom
      • un United Nations
      • um United States Minor Outlying Islands
      • us United States of America
      • xx Unknown
      • uy Uruguay
      • uz Uzbekistan
      • vu Vanuatu
      • ve Venezuela
      • vn Vietnam
      • vg Virgin Islands (British)
      • vi Virgin Islands (U.S.)
      • gb-wls Wales
      • wf Wallis and Futuna
      • eh Western Sahara
      • ye Yemen
      • zm Zambia
      • zw Zimbabwe

      @ebay/skin/floating-label

      DS v2.2

      Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.

      Floating Label with no Value

      If the textbox has no value, the label can be positioned inside the textbox.

      <span class="floating-label">
          <label class="floating-label__label" for="first-name">First Name</label>
          <span class="textbox">
              <input class="textbox__control" id="first-name" type="text" />
          </span>
      </span>
          

      Floating Label with Value

      If the textbox has a value, the label must be positioned above the textbox.

      <span class="floating-label">
          <label class="floating-label__label" for="last-name">Last Name</label>
          <span class="textbox">
              <input class="textbox__control" id="last-name" type="text" value="Smith" />
          </span>
      </span>
          

      Large floating label

      <span class="floating-label floating-label--large">
          <label class="floating-label__label" for="dob">Date Of Birth</label>
          <span class="textbox">
              <input class="textbox__control" id="dob" type="text" />
          </span>
      </span>
          

      Floating Label with Disabled Textbox

      Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.

      <span class="floating-label">
          <label class="floating-label__label floating-label__label--disabled" for="first-name">First Name</label>
          <span class="textbox">
              <input class="textbox__control" id="first-name" type="text" disabled />
          </span>
      </span>
          

      Floating Label with Placeholder

      The placeholder should only be shown when the textbox is focused and there is no text

      <span class="floating-label">
          <label class="floating-label__label" for="first-name">First Name</label>
          <span class="textbox">
              <input class="textbox__control" id="first-name" type="text" placeholder="No spaces or numbers allowed"/>
          </span>
      </span>
          

      Floating Label with Invalid Textbox

      Set the aria-invalid property to true and add floating-label__label--invalid to the label to semantically and visually highlight the invalid state.

      <span class="floating-label">
          <label class="floating-label__label floating-label__label--invalid" for="first-name">First Name</label>
          <span class="textbox">
              <input class="textbox__control" id="first-name" type="text" aria-invalid="true" />
          </span>
      </span>
          

      Floating Label with Textarea

      Use the textarea tag for a multi-line textbox.

      A multi-line textbox allows line breaks and has a minimum height of 200px.

      In order to prevent overlap for floating label, use .floating-label--opaque class

      <span class="floating-label floating-label--opaque">
          <label class="floating-label__label" for="first-name">Enter list of users</label>
          <span class="textbox">
              <textarea aria-label="Textbox demo" class="textbox__control"></textarea>
          </span>
      </span>
          

      Floating label with Combobox

      Use the textarea tag for a multi-line textbox.

      A multi-line textbox allows line breaks and has a minimum height of 200px.

      Option 1
      Option 2
      Option 3
      <span class="combobox floating-label">
          <label class="floating-label__label" for="first-name">Enter list of users</label>
          <span class="combobox__control">
              <input name="combobox-default" id="first-name" role="combobox" type="text" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox1" />
              <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                  <use href="#icon-chevron-down-12"></use>
              </svg>
          </span>
          <div class="combobox__listbox">
              <div id="listbox1" class="combobox__options" role="listbox">
                  <div class="combobox__option" role="option">
                      <span>Option 1</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 2</span>
                  </div>
                  <div class="combobox__option" role="option">
                      <span>Option 3</span>
                  </div>
              </div>
          </div>
      </span>
          

      Floating Label with long text

      This example shows how the floating label will truncate with long text

      <span class="floating-label">
          <label class="floating-label__label" for="first-name">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>
          <span class="textbox">
              <input class="textbox__control" id="first-name" type="text" />
          </span>
      </span>
          

      Floating Label with select

      <span class="floating-label">
          <label class="floating-label__label">Select Option</label>
          <span class="select">
              <select name="options">
                  <option value="">Choose an option</option>
                  <option value="item1">Pick Option 1 (default)</option>
                  <option value="item2">Pick Option 2</option>
                  <option value="item3">Pick Option 3</option>
              </select>
              <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                  <use href="#icon-chevron-down-12"></use>
              </svg>
          </span>
      </span>
          

      Floating Label with large select

      <span class="floating-label floating-label--large">
          <label class="floating-label__label">Select Option</label>
          <span class="select select--large">
              <select name="options">
                  <option value="">Choose an option</option>
                  <option value="item1">Pick Option 1</option>
                  <option value="item2">Pick Option 2</option>
                  <option value="item3">Pick Option 3</option>
              </select>
              <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                  <use href="#icon-chevron-down-12"></use>
              </svg>
          </span>
      </span>
          

      Floating Label Transitions

      By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.

      When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.

      You will also need to add the floating-label__label--focus class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.

      To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.

      The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.

      @ebay/skin/global

      The global module defines the styles of any common page aspects, such as font family, font size, background color, text color and link states.

      @ebay/skin/icon

      DS v1.3

      The icon module is a bundle that provides full access to the entire range of eBay iconography via the <svg> and <use> tags.

      Base Icons Only

      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 css modifiers to allow for those variations.

      General Markup Approach

      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.

          <svg class="icon icon--information-24" height="24" width="24">
              <use href="#icon-information-24"></use>
          </svg>
          

      NOTE: Skin removes all pointer events on icons (via pointer-events: none) due to a bug in IE. To add events to these icons you should wrap them in another element and attach your events there.

      Including an Icon

      An icon symbol declaration can be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of an SVG block.

      We also provide individual icons as SVGs located in this directory. You can include these on your page as raw SVGs as needed.

          <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>
          

      NOTE: the SVG tag does not support the hidden attribute, hence a hidden wrapper element is needed.

      Presentational Icons

      A presentational icon provides no additional content, context or affordance to a page, section or widget.

      Presentational icons require aria-hidden="true", in order to hide them from assistive technology.

          <svg class="icon icon--information-24" height="24" width="24" aria-hidden="true">
              <use href="#icon-information-24"></use>
          </svg>
          

      Non-Presentational Icons

      A non-presentational icon provides essential content, context or affordance to a page, section or widget.

      Non-presentational icons require both role="img" and an aria-label for assistive technology.

          <svg class="icon icon--information-24" height="24" width="24" role="img" aria-label="Information">
              <use href="#icon-information-24"></use>
          </svg>
          

      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.

      • add-16
      • add-24
      • add-image-24
      • afterpay-12-colored
      • afterpay-18-colored
      • afterpay-24-colored
      • afterpay-32-colored
      • ai-16
      • ai-20
      • ai-24
      • ai-filled-16
      • ai-filled-20
      • ai-filled-24
      • ai-spectrum-16-colored
      • ai-spectrum-20-colored
      • ai-spectrum-24-colored
      • ai-spectrum-filled-16-colored
      • ai-spectrum-filled-20-colored
      • ai-spectrum-filled-24-colored
      • ai-spectrum-thin-16-colored
      • ai-thin-16
      • amex-12-colored
      • amex-18-colored
      • amex-24-colored
      • amex-32-colored
      • apple-pay-12-colored
      • apple-pay-18-colored
      • apple-pay-24-colored
      • apple-pay-32-colored
      • archive-16
      • archive-24
      • arrow-left-12
      • arrow-left-16
      • arrow-left-20
      • arrow-left-24
      • arrow-right-12
      • arrow-right-16
      • arrow-right-20
      • arrow-right-24
      • arrows-3d-16
      • arrows-3d-24
      • arrows-3d-filled-64-colored
      • arrows-expand-16
      • arrows-expand-24
      • article-16
      • article-24
      • attention-16
      • attention-24
      • attention-64
      • attention-filled-16
      • attention-filled-24
      • atv-16
      • atv-24
      • audio-high-16
      • audio-low-16
      • audio-off-16
      • authenticity-guarantee-16
      • authenticity-guarantee-24
      • auto-adjust-24
      • background-removal-24
      • bank-24
      • bank-64
      • bank-account-12-colored
      • bank-account-18-colored
      • bank-account-24-colored
      • bank-account-32-colored
      • bids-24
      • bids-64
      • boat-16
      • boat-24
      • book-16
      • book-24
      • bookmark-16
      • bookmark-24
      • brand-authorized-seller-16
      • brand-authorized-seller-24
      • brightness-16
      • brightness-20
      • brightness-24
      • calendar-16
      • calendar-24
      • calendar-64
      • camera-16
      • camera-24
      • camera-64
      • car-16
      • car-24
      • car-brake-16
      • car-brake-24
      • carryon-24
      • cart-16
      • cart-20
      • cart-24
      • cart-64
      • categories-16
      • categories-24
      • cb-12-colored
      • cb-18-colored
      • cb-24-colored
      • cb-32-colored
      • certified-recycled-16
      • certified-recycled-24
      • chair-16
      • chair-24
      • chat-16
      • chat-24
      • chat-64
      • check-in-24
      • checkbox-mixed-24
      • checkmark-24
      • chevron-down-12
      • chevron-down-16
      • chevron-down-24
      • chevron-left-12
      • chevron-left-16
      • chevron-left-20
      • chevron-left-24
      • chevron-right-12
      • chevron-right-16
      • chevron-right-24
      • chevron-up-12
      • chevron-up-16
      • chevron-up-20
      • chevron-up-24
      • chinese-coin-16
      • chinese-coin-24
      • clear-16
      • clear-24
      • click-to-call-16
      • click-to-call-24
      • clock-16
      • clock-24
      • close-12
      • close-16
      • close-20
      • close-24
      • closed-caption-16
      • closed-caption-filled-16
      • coin-24
      • collections-16
      • collections-24
      • condensed-grid-24
      • condensed-grid-filled-24
      • confirmation-16
      • confirmation-24
      • confirmation-64
      • confirmation-filled-16
      • confirmation-filled-24
      • contract-16
      • contrast-24
      • copy-16
      • copy-24
      • credit-card-16
      • credit-card-24
      • credit-card-64
      • crop-24
      • customize-16
      • customize-24
      • delete-16
      • delete-20
      • delete-24
      • diamond-16
      • diamond-24
      • diners-12-colored
      • diners-18-colored
      • diners-24-colored
      • diners-32-colored
      • direct-debit-12-colored
      • direct-debit-18-colored
      • direct-debit-24-colored
      • direct-debit-32-colored
      • direct-from-brand-16
      • direct-from-brand-24
      • discord-24
      • discount-16
      • discount-24
      • discover-12-colored
      • discover-18-colored
      • discover-24-colored
      • discover-32-colored
      • dollar-16
      • dollar-24
      • download-16
      • download-24
      • ebay-balance-12-colored
      • ebay-balance-18-colored
      • ebay-balance-24-colored
      • ebay-balance-32-colored
      • ebay-bucks-logo-16-colored
      • ebay-for-charity-16
      • ebay-for-charity-24
      • ebay-international-shipping-16
      • ebay-international-shipping-24
      • ebay-live-16
      • ebay-live-24
      • ebay-mastercard-12-colored
      • ebay-mastercard-18-colored
      • ebay-mastercard-24-colored
      • ebay-mastercard-32-colored
      • ebay-money-back-guarantee-logo-16-colored
      • ebay-plus-16
      • ebay-plus-24
      • ebay-plus-logo-16-colored
      • ebay-preloved-16
      • ebay-preloved-24
      • ebay-refurbished-16
      • ebay-refurbished-24
      • escrow-16
      • escrow-24
      • escrow-card-12-colored
      • escrow-card-18-colored
      • escrow-card-24-colored
      • escrow-card-32-colored
      • euro-16
      • euro-24
      • expand-16
      • external-link-16
      • external-link-20
      • external-link-24
      • face-happiest-24
      • face-happy-16
      • face-happy-24
      • face-neutral-24
      • face-sad-24
      • face-saddest-24
      • facebook-24
      • facebook-messenger-24
      • fast-and-free-16
      • fast-and-free-24
      • feedback-16
      • feedback-20
      • feedback-24
      • file-16
      • file-24
      • filter-16
      • filter-24
      • fingerprint-24
      • fingerprint-64
      • flag-16
      • flag-24
      • flag-filled-16
      • flag-filled-24
      • flash-24
      • flash-auto-24
      • flash-off-24
      • folder-16
      • folder-24
      • franc-16
      • franc-24
      • free-warranty-16
      • free-warranty-24
      • full-view-16
      • full-view-24
      • full-view-filled-16
      • full-view-filled-24
      • gallery-16
      • gallery-24
      • general-card-12-colored
      • general-card-18-colored
      • general-card-24-colored
      • general-card-32-colored
      • generic-card-12-colored
      • generic-card-18-colored
      • generic-card-24-colored
      • generic-card-32-colored
      • gift-16
      • gift-24
      • gift-64
      • gift-card-12-colored
      • gift-card-18-colored
      • gift-card-24-colored
      • gift-card-32-colored
      • glasses-24
      • glasses-64
      • google-pay-12-colored
      • google-pay-18-colored
      • google-pay-24-colored
      • google-pay-32-colored
      • graph-16
      • graph-24
      • grid-view-16
      • grid-view-24
      • grid-view-filled-16
      • grid-view-filled-24
      • handbag-16
      • handbag-24
      • hanger-16
      • hanger-24
      • headlight-16
      • headlight-24
      • headphone-16
      • headphone-24
      • help-16
      • help-20
      • help-24
      • help-outline-16
      • help-outline-20
      • help-outline-24
      • hide-16
      • hide-24
      • history-24
      • history-64
      • home-24
      • home-filled-24
      • image-16
      • image-24
      • image-64
      • inbox-16
      • inbox-24
      • information-16
      • information-24
      • information-filled-16
      • information-filled-24
      • inspect-16
      • inspect-24
      • instagram-24
      • jcb-12-colored
      • jcb-18-colored
      • jcb-24-colored
      • jcb-32-colored
      • jet-ski-16
      • jet-ski-24
      • key-16
      • key-24
      • keyboard-16
      • keyboard-24
      • klarna-black-12-colored
      • klarna-black-18-colored
      • klarna-black-24-colored
      • klarna-black-32-colored
      • klarna-pink-12-colored
      • klarna-pink-18-colored
      • klarna-pink-24-colored
      • klarna-pink-32-colored
      • klarna-white-12-colored
      • klarna-white-18-colored
      • klarna-white-24-colored
      • klarna-white-32-colored
      • krona-16
      • krona-24
      • lamp-16
      • lamp-24
      • large-box-16
      • large-box-24
      • legacy-authenticity-guarantee-48-colored
      • legacy-click-to-call-48-colored
      • legacy-escrow-48-colored
      • legacy-free-warranty-48-colored
      • legacy-money-back-guarantee-chf-48-colored
      • legacy-money-back-guarantee-eu-48-colored
      • legacy-money-back-guarantee-uk-48-colored
      • legacy-money-back-guarantee-us-48-colored
      • legacy-money-back-guarantee-zl-48-colored
      • legacy-top-rated-seller-48-colored
      • lightbulb-16
      • lightbulb-24
      • lightning-bolt-16
      • lightning-bolt-24
      • link-24
      • linkedin-24
      • list-view-16
      • list-view-24
      • list-view-filled-16
      • list-view-filled-24
      • live-eye-16
      • live-eye-24
      • location-16
      • location-24
      • location-64
      • locked-16
      • locked-20
      • locked-24
      • maestro-12-colored
      • maestro-18-colored
      • maestro-24-colored
      • maestro-32-colored
      • mail-16
      • mail-20
      • mail-24
      • mail-64
      • mail-move-16
      • mail-move-24
      • mail-open-16
      • mail-open-24
      • mail-unread-16
      • mail-unread-24
      • map-16
      • map-20
      • map-24
      • masonry-view-24
      • masonry-view-filled-24
      • mastercard-12-colored
      • mastercard-18-colored
      • mastercard-24-colored
      • mastercard-32-colored
      • medium-box-16
      • medium-box-24
      • menu-20
      • menu-24
      • microphone-16
      • microphone-24
      • mobile-24
      • mobile-signal-24
      • money-back-guarantee-16
      • money-back-guarantee-24
      • moon-16
      • moon-20
      • moon-24
      • motorcycle-16
      • motorcycle-24
      • move-16
      • move-24
      • nectar-logo-24-colored
      • negative-filled-16
      • negative-filled-24
      • neutral-16
      • neutral-24
      • notification-16
      • notification-20
      • notification-24
      • notification-64
      • notification-filled-24
      • on-the-way-16
      • on-the-way-24
      • overflow-horizontal-16
      • overflow-horizontal-20
      • overflow-horizontal-24
      • overflow-vertical-16
      • overflow-vertical-20
      • overflow-vertical-24
      • package-16
      • package-24
      • package-64
      • passkey-16
      • passkey-24
      • passkey-64
      • pause-16
      • pause-24
      • pause-filled-64-colored
      • payoneer-12-colored
      • payoneer-18-colored
      • payoneer-24-colored
      • payoneer-32-colored
      • paypal-12-colored
      • paypal-18-colored
      • paypal-24-colored
      • paypal-32-colored
      • paypal-credit-12-colored
      • paypal-credit-18-colored
      • paypal-credit-24-colored
      • paypal-credit-32-colored
      • paypal-disabled-12-colored
      • paypal-disabled-18-colored
      • paypal-disabled-24-colored
      • paypal-disabled-32-colored
      • pencil-16
      • pencil-20
      • pencil-24
      • peso-16
      • peso-24
      • phone-16
      • phone-24
      • pin-24
      • pin-filled-24
      • pinterest-24
      • play-16
      • play-24
      • play-filled-16-colored
      • play-filled-24-colored
      • play-filled-64-colored
      • postepay-12-colored
      • postepay-18-colored
      • postepay-24-colored
      • postepay-32-colored
      • pound-16
      • pound-24
      • print-24
      • profile-20
      • profile-24
      • profile-filled-24
      • progress-current-24
      • progress-upcoming-24
      • promotion-16
      • promotion-24
      • qr-code-16
      • qr-code-24
      • recovery-code-16
      • recovery-code-24
      • reddit-24
      • refresh-16
      • refresh-24
      • relaxed-grid-24
      • relaxed-grid-filled-24
      • remove-16
      • remove-24
      • reply-16
      • reply-24
      • return-16
      • return-24
      • ribbon-16
      • ribbon-24
      • rim-16
      • rim-24
      • ringgit-16
      • ringgit-24
      • rotate-24
      • rotate-landscape-left-24
      • rotate-landscape-right-24
      • rotate-portrait-left-24
      • rotate-portrait-right-24
      • rupee-16
      • rupee-24
      • satchel-16
      • satchel-24
      • save-16
      • save-20
      • save-24
      • save-filled-16
      • save-filled-20
      • save-filled-24
      • scan-16
      • scan-24
      • search-16
      • search-20
      • search-24
      • search-64
      • search-filled-24
      • search-similar-16
      • search-similar-20
      • search-similar-24
      • security-key-24
      • select-all-24
      • selling-16
      • selling-20
      • selling-24
      • selling-filled-24
      • send-24
      • settings-16
      • settings-20
      • settings-24
      • share-android-16
      • share-android-20
      • share-android-24
      • share-ios-16
      • share-ios-20
      • share-ios-24
      • sharpen-24
      • shoe-box-24
      • show-16
      • show-24
      • small-box-16
      • small-box-24
      • small-letter-24
      • sneaker-16
      • sneaker-24
      • snowflake-16
      • snowflake-24
      • snowmobile-16
      • snowmobile-24
      • sort-12
      • sort-16
      • sort-24
      • sort-down-12
      • sort-up-12
      • sparkline-down-16
      • sparkline-down-20
      • sparkline-down-24
      • sparkline-up-16
      • sparkline-up-20
      • sparkline-up-24
      • sparkline-up-filled-24
      • split-payment-16
      • split-payment-24
      • split-view-24
      • split-view-filled-24
      • star-empty-16
      • star-empty-24
      • star-filled-16
      • star-filled-24
      • star-half-16-colored
      • star-half-24-colored
      • star-half-dark-16-colored
      • star-half-dark-24-colored
      • stepper-attention-24
      • stepper-confirmation-24
      • stepper-current-24
      • stepper-upcoming-24
      • store-16
      • store-24
      • store-64
      • store-filled-24
      • suitcase-24
      • support-24
      • swap-24
      • switch-camera-24
      • text-messaging-16
      • text-messaging-20
      • text-messaging-24
      • text-messaging-64
      • the-ebay-vault-16
      • the-ebay-vault-24
      • thumb-down-16
      • thumb-down-24
      • thumb-down-filled-16
      • thumb-down-filled-24
      • thumb-up-16
      • thumb-up-24
      • thumb-up-64
      • thumb-up-filled-16
      • thumb-up-filled-24
      • tick-16
      • tick-24
      • tiktok-24
      • toggle-mode-bottom-24
      • toggle-mode-top-24
      • top-rated-seller-16
      • top-rated-seller-24
      • top-service-16
      • top-service-24
      • trading-card-16
      • trading-card-24
      • transaction-24
      • trend-down-16-fit
      • trend-up-16-fit
      • trophy-16
      • trophy-24
      • twitter-24
      • undo-16
      • undo-24
      • unionpay-12-colored
      • unionpay-18-colored
      • unionpay-24-colored
      • unionpay-32-colored
      • unlocked-16
      • unlocked-24
      • unselect-all-24
      • upload-16
      • upload-24
      • venmo-12-colored
      • venmo-18-colored
      • venmo-24-colored
      • venmo-32-colored
      • verified-condition-16
      • verified-condition-24
      • video-24
      • visa-12-colored
      • visa-18-colored
      • visa-24-colored
      • visa-32-colored
      • wallet-24
      • wallet-64
      • wallet-balance-12-colored
      • wallet-balance-18-colored
      • wallet-balance-24-colored
      • wallet-balance-32-colored
      • watch-16
      • watch-24
      • whatsapp-24
      • won-16
      • won-24
      • wrench-16
      • wrench-24
      • youtube-24
      • yuan-16
      • yuan-24
      • zloty-16
      • zloty-24
      • zoom-in-16
      • zoom-in-24
      • zoom-out-16
      • zoom-out-24

      Disabled Icons

      Most icons can be given a disabled appearance by adding the icon--disabled modifier.

      Simple Icons

      Icons that are simple and have only a stroke/fill of a single color simply inherit color and are disabled by inheriting that color as the stroke/fill.

      <svg class="icon icon--chevron-right-24 icon--disabled" height="24" width="24">
          <use href="#icon-chevron-right-24"></use>
      </svg>
          

      Complex Icons

      Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.

      <svg class="icon icon--mastercard-24-colored icon--disabled" height="24" width="24">
          <use href="#icon-mastercard-24-colored"></use>
      </svg>
          

      @ebay/skin/icon-button

      DS v1.6

      Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

      <button class="icon-btn" type="button" aria-label="Menu">
          <svg class="icon icon--menu-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--settings-24" width="16" height="16" aria-hidden="true">
              <use href="icons.svg#icon-settings-24"></use>
          </svg>
      </a>
          
      <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
          <svg class="icon icon--save-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--save-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--save-24" width="16" height="16" aria-hidden="true">
              <use href="icons.svg#icon-save-24"></use>
          </svg>
      </button>
          

      To remove the background colour and hover states, apply the icon-btn--transparent 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).

      <button class="icon-btn icon-btn--transparent" type="button" aria-label="Confirmation">
          <svg class="icon icon--confirmation-filled-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--attention-filled-24" width="16" height="16" aria-hidden="true">
              <use href="icons.svg#icon-attention-filled-24"></use>
          </svg>
      </a>
          

      Badged Icon Button

      An icon button can be badged using the badge module.

      The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

      <button aria-label="Watchlist (4 notifications)" class="icon-btn icon-btn--badged" type="button">
          <svg class="icon icon--save-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--notification-24" width="24" height="24" aria-hidden="true">
              <use href="#icon-notification-24"></use>
          </svg>
          <span aria-hidden="true" class="badge">99+</span>
      </a>
          

      @ebay/skin/image-placeholder

      Image placeholder should be used when an image is not present. By default this is 300x300px, but can be resized to it a container.

      This asset can be found either in dist/svg/icons/image-placeholder.svg or in the icons bundle

          <svg aria-label="image not found" class="image-placeholder">
              <use href="#image-placeholder"></use>
          </svg>
          

      Variable widths with borders

          <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>
          

      @ebay/skin/infotip

      DS v2.0

      An infotip is a button which can be clicked to display information about another element or area on the page.

      Toggle the aria-expanded state of the button to expand or collapse the infotip.

      Infotip

      Here's a tip to help you be successful at your task.

      <span class="infotip">
          <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
              <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                  <use href="#icon-information-16"></use>
              </svg>
          </button>
          <div class="infotip__overlay" style="top: 30px; left: -6px">
              <span class="infotip__pointer infotip__pointer--top-left"></span>
              <div class="infotip__mask">
                  <div class="infotip__cell">
                      <span class="infotip__content">
                          <h3 class="infotip__heading">Infotip</h3>
                          <p>Here's a tip to help you be successful at your task.</p>
                      </span>
                      <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
                          <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                  </div>
              </div>
          </div>
      </span>
          

      By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

      In order to get this to work with floating-ui, you need to remove pointer position infotip__pointer--top-left and remove any style positioning

      Infotip

      Here's a tip to help you be successful at your task.

      <span class="infotip">
          <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
              <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                  <use href="#icon-information-16"></use>
              </svg>
          </button>
          <div class="infotip__overlay">
              <span class="infotip__pointer"></span>
              <div class="infotip__mask">
                  <div class="infotip__cell">
                      <span class="infotip__content">
                          <h3 class="infotip__heading">Infotip</h3>
                          <p>Here's a tip to help you be successful at your task.</p>
                      </span>
                      <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
                          <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                  </div>
              </div>
          </div>
      </span>
          

      If nesting an infotip inside of a paragraph element, make sure that there are no block level elements, such as div, h1-6, or p elements.

      Inside paragraph Infotip Here's a tip to help you be successful at your task.

      <p>
          Inside paragraph
          <span class="infotip">
              <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
                  <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                      <use href="#icon-information-16"></use>
                  </svg>
              </button>
              <span class="infotip__overlay">
                  <span class="infotip__pointer"></span>
                  <span class="infotip__mask">
                      <span class="infotip__cell">
                          <span class="infotip__content">
                              <span class="infotip__heading" role="heading" aria-level=5>Infotip</span>
                              <span>Here's a tip to help you be successful at your task.</span>
                          </span>
                          <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
                              <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                                  <use href="#icon-close-16"></use>
                              </svg>
                          </button>
                      </span>
                  </span>
              </span>
          </span>
      </p>
          

      Modal Infotip

      On small screens, the infotip should launch a modal lightbox-dialog.

      <span class="infotip">
          <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
              <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                  <use href="#icon-information-16"></use>
              </svg>
          </button>
      </span>
      <div aria-labelledby="lightbox-dialog-title" aria-modal="true" hidden class="lightbox-dialog" role="dialog">
          <div class="lightbox-dialog__window">
              <button class="lightbox-dialog__handle" type="button"></button>
              <div class="lightbox-dialog__header">
                  <h2>Info</h2>
                  <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="lightbox-dialog__main" id="lightbox-dialog-title">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
          </div>
      </div>
          

      @ebay/skin/inline-notice

      DS v2.2

      The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.

      An inline-level notice provides tips, guidance and feedback on individual elements and form controls.

      An inline-level notice may have a status of general (default), confirmation, information or attention.

      Your price has been updated.

      Your price has been updated.

      Send offers to interested buyers.

      Add required aspects to keep item alive.

      <div class="inline-notice">
          <span class="inline-notice__main">
              <p>Your price has been updated. <button class="fake-link" type="button">Dismiss</button></p>
          </span>
      </div>
      
      <div class="inline-notice inline-notice--confirmation">
          <span class="inline-notice__header">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </span>
          <span class="inline-notice__main">
              <p>Your price has been updated.</p>
          </span>
      </div>
      
      <div class="inline-notice inline-notice--information">
          <span class="inline-notice__header">
              <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
                  <use href="#icon-information-filled-16"></use>
              </svg>
          </span>
          <span class="inline-notice__main">
              <p><a href="https://www.ebay.com">Send offers</a> to interested buyers.</p>
          </span>
      </div>
      
      <div class="inline-notice inline-notice--attention">
          <span class="inline-notice__header">
              <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
          </span>
          <span class="inline-notice__main">
              <p><a href="https://www.ebay.com">Add required aspects</a> to keep item alive.</p>
          </span>
      </div>
          

      @ebay/skin/less

      DS v1.0

      In comparison to past versions, Skin now offers a very minimal public LESS API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system.

      Also, our Less module is not intended as a general-purpose library of utility mixins and variables such as LessHat.

      NOTE: Lasso requires the additional lasso-less plugin dependency in your app package.json.

      {
          "dependencies": {
            "lasso": "^3",
            "lasso-less": "^3",
            "@ebay/skin": "^17"
          }
      }
          

      Spacing Tokens (deprecated)

      Skin uses a proportional spacing system anchored around a base value of 8px.

      NOTE: Spacing variables in LESS are deprecated. In a future release, they will become part of the new CSS Custom Property API.

      Spacing Tokens
      NAME SIZE
      spacing-25 spacing-100 * 0.25
      spacing-50 spacing-100 * 0.50
      spacing-100 8
      spacing-200 spacing-100 * 2
      spacing-400 spacing-100 * 4
      spacing-600 spacing-100 * 6
      spacing-800 spacing-100 * 8

      Typography Mixins

      • .typography-giant-3();
      • .typography-giant-2();
      • .typography-giant-1();
      • .typography-large-2();
      • .typography-large-2-secondary();
      • .typography-large-1();
      • .typography-large-1-secondary();
      • .typography-medium-bold();
      • .typography-medium();
      • .typography-medium-secondary();
      • .typography-regular-bold();
      • .typography-regular();
      • .typography-regular-secondary();
      • .typography-small-bold();
      • .typography-small();
      • .typography-small-secondary();

      @ebay/skin/listbox

      DS v2.2

      A listbox is intended for use as a custom, non-form based implementation of the native HTML select element.

      Unselected Listbox

      By default, no option is selected until interacting with the widget. This matches the behaviour of a native HTML select element.

      Option 1
      Option 2
      Option 3
      Option 4
      <span class="listbox">
          <div aria-label="Listbox demo 1" class="listbox__options" role="listbox" tabindex="0">
              <div class="listbox__option" role="option" aria-selected="false">
                  <span class="listbox__value">Option 1</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="false">
                  <span class="listbox__value">Option 2</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="false" aria-disabled="true">
                  <span class="listbox__value">Option 3</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="false">
                  <span class="listbox__value">Option 4</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
          </div>
      </span>
          

      Selected Listbox

      An initial selection can be specified by applying the aria-selected state to a single option.

      Option 1
      Option 2
      Option 3
      <div class="listbox">
          <div aria-label="Listbox demo 2" class="listbox__options" role="listbox" tabindex="0">
              <div class="listbox__option" role="option" aria-selected="true">
                  <span class="listbox__value">Option 1</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="true">
                  <span class="listbox__value">Option 2</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="false">
                  <span class="listbox__value">Option 3</span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
          </div>
      </div>
          

      Listbox with subtitles

      You can add a subtitle to an option by adding a .listbox__description element.

      Option 1 . More info about option 1
      Option 2 . More info about option 1
      Option 3 . More info about option 1
      <div class="listbox">
          <div aria-label="Listbox demo 2" class="listbox__options" role="listbox" tabindex="0">
              <div class="listbox__option" role="option" aria-selected="true">
                  <span class="listbox__value">Option 1</span>
                  <span class="listbox__description">
                      <span class="clipped">.</span>
                      More info about option 1
                  </span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="true">
                  <span class="listbox__value">Option 2</span>
                  <span class="listbox__description">
                      <span class="clipped">.</span>
                      More info about option 2
                  </span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
              <div class="listbox__option" role="option" aria-selected="false">
                  <span class="listbox__value">Option 3</span>
                  <span class="listbox__description">
                      <span class="clipped">.</span>
                      More info about option 3
                  </span>
                  <svg class="icon icon--tick-16" height="10" width="14">
                      <use href="#icon-tick-16"></use>
                  </svg>
              </div>
          </div>
      </div>
          

      @ebay/skin/listbox-button

      DS v2.2

      A listbox button is intended for use as a custom implementation of the native HTML select element's single-select use case.

      Because a button element does not store form data, its value will not be submitted along with other form data without the assistance of JavaScript.

      Unselected Listbox Button

      By default, the listbox button is in an unselected state.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button">
          <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Color: </span>
                  <span class="btn__text">-</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-disabled="true">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      To give the illusion of a floated label use the btn--floating-label and btn__floating-label classes.

      NOTE: a btn__floating-label--inline class must also be toggled with JavaScript. It should be present when there is no selection, and vice versa.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button">
          <button class="btn btn--form btn--floating-label" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__floating-label">Color</span>
                  <span class="btn__text"></span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      Selected Listbox Button

      A selection can be made by applying the aria-selected state to a single option; JavaScript is required to update all ARIA and button text state.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button">
          <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Color: </span>
                  <span class="btn__text">Blue</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-selected="true">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      The following example shows the "floated label" version with a value selected.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button">
          <button class="btn btn--form btn--floating-label" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__floating-label">Color:</span>
                  <span class="btn__text">Blue</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-selected="true">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      Listbox Button with option description

      You can also add a description to each option by using .listbox-button__description

      In order to make the description accessible, you need to add a clipped punctuation marker. This ensures screen readers will read the subtitle as a separate sentence.

      Red . This is a red color
      Blue . This is a blue color
      Yellow . This is a yellow color
      Green . This is a green color
      <span class="listbox-button">
          <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Color: </span>
                  <span class="btn__text">-</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-disabled="true">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      Borderless

      Apply the btn--borderless modifier to create a borderless listbox button.

      1
      2
      3
      <span class="listbox-button">
          <button class="btn btn--borderless" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Quantity: </span>
                  <span class="btn__text">1</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">1</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">2</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">3</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      Error State

      Apply the listbox-button--error modifier to create a listbox button in an error state.

      This is a simple example with a simple error indication. For usage of the error state with an error message, please see the field module.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button listbox-button--error">
          <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Color: </span>
                  <span class="btn__text">-</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-disabled="true">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
      </span>
          

      Form Variant

      Apply the listbox-button--form modifier to create a listbox button inside a form matching other form controls.

      Additionally, to allow the component to send the value from a selected option in a form submission, there needs to be custom js to populate the select.listbox__native with the value upon selection. If using Skin outside of eBay UI, you will need to account for that independantly.

      NOTE: This component is a bit in transiton and will likely undergo some changes to integrate and simplify the variant implementation. Currently, .listbox-button--form is used as a bit of a patch to create the form variant of the control. It adds some of the styles needed to do form variant styling while other styles are applied separately by .btn--form. In the future, these styles will be consolidated into .btn--form and will be .listbox-button--form will be phased out.

      Red
      Blue
      Yellow
      Green
      <span class="listbox-button listbox-button--form">
          <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
              <span class="btn__cell">
                  <span class="btn__label">Color: </span>
                  <span class="btn__text">-</span>
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </span>
          </button>
          <div class="listbox-button__listbox">
              <div class="listbox-button__options" role="listbox" tabindex="0">
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Red</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Blue</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option" aria-disabled="true">
                      <span class="listbox-button__value">Yellow</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
                  <div class="listbox-button__option" role="option">
                      <span class="listbox-button__value">Green</span>
                      <svg class="icon icon--tick-16" height="10" width="14">
                          <use href="#icon-tick-16"></use>
                      </svg>
                  </div>
              </div>
          </div>
          <select hidden="" class="listbox__native">
              <option value="1"></option>
              <option value="2"></option>
              <option value="3"></option>
              <option value="4"></option>
          </select>
      </span>
          

      @ebay/skin/marketsans

      Market Sans is an exclusive typeface developed specifically for eBay. This module downloads and installs the typeface directly from the eBay CDN servers. The typeface can then be referenced via the 'Market Sans' font-family name.

      ABCDEFGHIJKLMNOPQRSTUVWXYZ
      abcdefghijklmnopqrstuvwxyz
      <style>
          p {
              font-family:  'Market Sans', 'Helvetica Neue', Helvetica, Arial, Roboto, sans-serif;
          }
      </style>
          

      TIP: The Market Sans font-family, and all fallbacks, can also be applied using the Less variable @font-family-market-sans.

      @ebay/skin/page-grid

      DS v1.0.0

      The page grid module establishes the rows, columns and areas onto which child elements can be placed. The page grid is fully responsive.

      Setting up a responsive page grid requires two key elements: a container element, and the grid element itself.

      The container element takes care of positioning the grid in relation to the page (typically center-justified) and adds outer margins.

      The grid element creates the actual columns (and gutters); eight columns for small viewports, sixteen for large.

      <div class="page-grid-container">
          <div class="page-grid">
              <!-- grid content goes here -->
          </div>
      </div>
          

      Any content that is off-grid, a full bleed banner for example, should be placed outside of these two elements.

      Grid areas are definable with CSS Grid syntax.

      Responsive Methodology

      When working with responsive web pages, the mindset should always be mobile-first. This means that your default styles (outside of media queries) should be targeting phones - the smallest of screens. As such, there is no need to have a minimum threshold by wrapping mobile styles inside a media query.

      Though our minimum screen width support starts at 320px, in theory this means that default styles will support devices much narrower than that since we don't set a minimum. The 320px is, at best, an implied breakpoint.

      Subsequent media queries should increase in screen width and alter the UI styling additively avoiding style declaration duplications when possible. The following CSS shows the grid layout of the Skin website itself.

      nav {
          display: none;
      }
      
      main {
          grid-area: ~"1 / 1 / span 1 / span 8";
      }
      
      footer {
          grid-area: ~"2 / 1 / span 1 / span 8";
      }
      
      /* If you're using LESS, alternatively, you can reference our constant for the page width - @_screen-size-SM */
      /* See below for all the references. */
      @media screen and (min-width: 512px) {
          nav {
              grid-area: ~"1 / 1 / span 1 / span 3";
          }
      
          main {
              grid-area: ~"1 / 4 / span 1 / span 13";
          }
      
          footer {
              grid-area: ~"2 / 1 / span 1 / span 16";
          }
      }
      
      /* If you're using LESS, alternatively, you can reference our constant for the page width - @_screen-size-MD */
      /* See below for all the references. */
      @media screen and (min-width: 768px) {
          nav {
              grid-area: ~"1 / 1 / span 1 / span 2";
          }
      
          main {
              grid-area: ~"1 / 3 / span 1 / span 14";
          }
      }
          

      You can see that for small screens, our top-level landmark elements simply span the full width of the grid. For large screens, things are a little more interesting, and we specify exactly how many rows and columns each landmark should occupy on the grid.

      Here is the corresponding HTML.

      <body>
          <header>
              <!-- header content (off-grid) -->
          </header>
          <div class="page-grid-container">
              <div class="page-grid">
                  <nav>
                      <!-- nav content -->
                  </nav>
                  <main>
                      <!-- main content -->
                  </main>
                  <footer>
                      <!-- footer content -->
                  </footer>
              </div>
          </div>
      </body>
          

      You can see how it looks on this page by enabling our debug mode, which gives a quick visual indication of the grid columns.

      Page Grid LESS/CSS Properties

      We've set up CSS properties and LESS constants to provide developers with easy reference for responsive adjustments of UIs. The CSS properties allow for customization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have.

      The CSS properties to allow for customization

      These properties allow for costumization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have.

      --page-grid-number-cols     /* The number of columns. */
      --page-grid-outside-margins /* The left/right margins outside page grid. */
      --page-grid-column-gaps     /* The gaps between grid columns.*/
      --page-grid-row-gaps        /* The gaps between grid rows.*/
      --page-grid-column-widths   /* The widths of grid columns. If columns is changed, this will need a new calculation to distribute evenly withing the grid.*/
      --page-grid-max-width       /* The maximum width of the page.*/
          

      Additionally, we've set up LESS constants for easier reference of the current breakpoints as well as some other dimension/spacing values.

      Please do NOT overwrite these!

      They are meant to be consumed ONLY as constants for read-only purposes as references.

      @_screen-size-XS: 320px;
      @_screen-size-SM: 512px;
      @_screen-size-MD: 768px;
      @_screen-size-LG: 1024px;
      @_screen-size-XL: 1280px;
      @_screen-size-XL2: 1440px;
      @_screen-size-XL3: 1680px;
      @_screen-size-XL4: 1920px;
      
      @_page-grid-max-width: 1584px;
      @_page-grid-number-cols-small: 8;
      @_page-grid-number-cols-large: 16;
      @_page-grid-outside-margins-small: 16px;
      @_page-grid-outside-margins-large: 32px;
      @_page-grid-outside-margins-max: 48px;
      @_page-grid-column-gaps-small: var(--spacing-100);
      @_page-grid-column-gaps-large: var(--spacing-200);
      @_page-grid-row-gaps-small: var(--spacing-100);
      @_page-grid-row-gaps-large: var(--spacing-200);
          

      Subgrids

      Subgrids allow you to create alignment of child elements on the same grid as page grid. Currently, subgrid only has partial support (with and without CSS Subgrid support), but fallbacks allow for a seamless implementation. You will need to add a bit of CSS on your implementation side to accomplish this.

      Firstly, you will need to add a class of page-grid__subgrid to the internal subgrid:

      <div class="page-grid-container">
          <div class="page-grid">
              <main>
                  <!-- main grid content here -->
              </main>
              <article id="featured-1" class="featured page-grid__subgrid">
                  <div class="featured__article">
                      <h2>Featured Post 1</h2>
                      <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                  </div>
                  <div class="featured__thumbnail">
                  Thumbnail
                  </div>
              </article>
          </div>
      </div>
          

      Additionally, you will need to set up the corresponding subgrid CSS as such to allow for support of subgrids in browsers that do not yet have support:

      /* Set up subgrid columns */
      @supports not (grid-template-columns: subgrid) {
          .featured {
              column-gap: var(--spacing-large);
              grid-template-columns: repeat(8, 1fr);
          } 
      }
          

      Page Grid Templates

      To see how the page grid system (engine) works in conjunction with various types of implementations (templates), check out our set of templates utilizing page grid and subgrid.

      Page Grid Templates

      @ebay/skin/page-notice

      DS v3.0

      A page notice appears prominently at the top of the page, for high priority use cases, conveying the next course of action for a task or flow.

      To aid discoverabilty for assistive technology, each page notice is a labelled landmark region with a level-2 heading.

      A page notice can have a status of general (default), confirmation, attention or information.

      We've updated the look and feel of this page. Customize anytime in settings.

      You have opted into eBay Pay and will now get paid directly.

      Your selling account has been deactivated.

      Opt into eBay payments before Jan 12th to pay no selling fees.

      <section class="page-notice" role="region" aria-label="Notice">
          <div class="page-notice__main">
              <h2 class="page-notice__title">We've updated the look and feel of this page. Customize anytime in settings.</h2>
          </div>
      </section>
      
      <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
          <div class="page-notice__header">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </div>
          <div class="page-notice__main">
              <h2 class="page-notice__title">You have opted into eBay Pay and will now get paid directly.</h2>
          </div>
          <div class="page-notice__footer">
              <a href="https://www.ebay.com">Dismiss</a>
          </div>
      </section>
      
      <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
          <div class="page-notice__header">
              <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
          </div>
          <div class="page-notice__main">
              <h2 class="page-notice__title">Your selling account has been deactivated.</h2>
          </div>
          <div class="page-notice__footer">
              <button class="fake-link">Learn More</button>
          </div>
      </section>
      
      <section class="page-notice page-notice--information" role="region" aria-label="Information">
          <div class="page-notice__header">
              <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
                  <use href="#icon-information-filled-16"></use>
              </svg>
          </div>
          <div class="page-notice__main">
              <h2 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h2>
          </div>
          <div class="page-notice__footer">
              <a href="https://www.ebay.com">Opt in</a>
          </div>
      </section>
          

      Dismissable Page Notice With Title

      Notice Title

      Opt into eBay payments before Jan 12th to pay no selling fees.

      Opt in

      <h3 id="page-notice-dismissable-title">Dismissable Page Notice With Title</h3>
      <section class="page-notice page-notice--information" role="region" aria-label="Information">
          <div class="page-notice__header">
              <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
                  <use href="#icon-information-filled-16"></use>
              </svg>
          </div>
          <div class="page-notice__main">
              <h3 class="page-notice__title">Notice Title</h3>
              <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
          </div>
          <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
          <div class="page-notice__footer">
              <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
                  <svg aria-hidden="true" class="icon icon--close-16" height="10" width="10">
                      <use href="#icon-close"></use>
                  </svg>
              </a>
          </div>
      </section>

      Form Error Page Notice

      We found problems with your form.

      Error 1, Error 2, Error 3.

      <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
          <div class="page-notice__header">
              <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
          </div>
          <div class="page-notice__main">
              <h2 class="page-notice__title">We found problems with your form.</h2>
              <p><a href="#">Error 1</a>, <a href="#">Error 2</a>, <a href="#">Error 3</a>.</p>
          </div>
      </section>
          

      @ebay/skin/panel-dialog

      DS v2.0

      Panel dialogs are modal and require a close button. They fill the entire y-axis of the screen and a portion of the x-axis.

      The dialog must remain in a hidden state for all users and devices until opened.

      <div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog" hidden role="dialog">
          <div class="panel-dialog__window">
              <div class="panel-dialog__header">
                  <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="panel-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
          
      <div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog" hidden role="dialog">
          <div class="panel-dialog__window">
              <div class="panel-dialog__header">
                  <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="panel-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
              <div class="panel-dialog__footer">
                  <button class="btn btn--primary">Submit</button>
                  <button class="btn">Cancel</button>
              </div>
          </div>
      </div>
          

      End Panel

      Apply the panel-dialog__window--end modifier to display the panel at the end of the x-axis.

      End panels typically contain an additional CTA button.

      <div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog" hidden id="dialog-right-panel-1" role="dialog">
          <div class="panel-dialog__window panel-dialog__window--end">
              <div class="panel-dialog__header">
                  <h2 id="dialog-title" class="panel-dialog__title large-text-1 bold-text">Heading</h2>
                  <button class="fake-link panel-dialog__reset" type="button">Done</button>
              </div>
              <div class="panel-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
          

      Sliding Panel

      Panels can slide in and out, using the dialog__window--slide modifier.

      The slide transition duration is 32ms. An accompanying dialog--mask-fade-slow modifier on the panel-dialog should also be applied. This slower fade matches the 32ms of the slide transition.

      <div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog panel-dialog--mask-fade-slow" hidden role="dialog">
          <div class="panel-dialog__window panel-dialog__window--slide">
              <div class="panel-dialog__header">
                  <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                  <button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
                      <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="panel-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p><a href="https://www.ebay.com">www.ebay.com</a></p>
              </div>
          </div>
      </div>
          

      @ebay/skin/progress-bar

      DS v3.1

      The progress bar gives an immediate, real-time visualisation of the current task completion status.

      Initial State

      A value of 0 reflects an initial state, with zero progress.

      0%
      <progress class="progress-bar" value="1" max="100">0%</progress>
          

      Loading State

      Any value between 0 and 100 reflects a loading state.

      50%
      <progress class="progress-bar" value="50" max="100">50%</progress>
          

      Completed State

      A value of 100 reflects a completed state.

      100%
      <progress class="progress-bar" value="100" max="100">100%</progress>
          

      Fluid Progress Bar

      To fill the entire width of the container, use the progress-bar--fluid modifier.

      50%
      <progress class="progress-bar progress-bar--fluid" value="50" max="100">50%</progress>
          

      Animated Progress Bar

      Use the buttons below to see an example of the progress bar value being animated.

      0%

      @ebay/skin/progress-spinner

      DS v3.1

      A progress-spinner animation is used to convey a busy or loading state.

      A progress-spinner is considered a critical graphic, therefore an img role and aria-label property are required.

      <span class="progress-spinner" aria-label="Busy" role="img">
          <svg aria-hidden="true" class="icon icon--spinner-24">
              <use href="#icon-spinner-24"></use>
          </svg>
      </span>
          

      Small Progress Spinner

      Use the progress-spinner--small modifier class to create a small progress spinner.

      <span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
          <svg aria-hidden="true" class="icon icon--spinner-20">
              <use href="#icon-spinner-20"></use>
          </svg>
      </span>
          

      Large Progress Spinner

      Use the progress-spinner--large modifier class to create a large progress spinner.

      <span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
          <svg aria-hidden="true" class="icon icon--spinner-30">
              <use href="#icon-spinner-30"></use>
          </svg>
      </span>
          

      @ebay/skin/progress-stepper

      DS v4.0

      Steppers portray progress through a sequence of steps.

      Default Progress Stepper

      The default stepper has a horizontal layout. The stepper fills all available space and evenly distributes its steps.

      Use the aria-current attribute to denote the current step in the list. All items after the current will be shown in progress.

      The default state for each item will be the complete or active state until it reaches [aria-current] element. Then the rest will be upcoming state. You can also use .progress-stepper__items--upcoming on the progress-stepper__items container to show upcoming state for all items.

      Shipment Progress

      Started

      July 3rd

      Shipped

      July 4th

      Transit

      July 5th

      Delivered

      July 6th

      <div class="progress-stepper" aria-labelledby="progress-stepper-header">
          <h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
          <div class="progress-stepper__items" role="list">
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Started</h4>
                      <p>July 3rd</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Shipped</h4>
                      <p>July 4th</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div aria-current="step" class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="current" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Transit</h4>
                      <p>July 5th</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                          <use href="#icon-stepper-upcoming-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Delivered</h4>
                      <p>July 6th</p>
                  </span>
              </div>
          </div>
      </div>
          

      The stepper can be sized and aligned using standard CSS:

      Shipment Progress

      Started

      July 3rd

      Shipped

      July 4th

      Transit

      July 5th

      Delivered

      July 6th

      <div class="progress-stepper" aria-labelledby="progress-stepper-header" style="margin: 16px auto; width: 390px;">
          <h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
          <div class="progress-stepper__items" role="list">
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Started</h4>
                      <p>July 3rd</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Shipped</h4>
                      <p>July 4th</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div aria-current="step" class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="current" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Transit</h4>
                      <p>July 5th</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                          <use href="#icon-stepper-upcoming-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Delivered</h4>
                      <p>July 6th</p>
                  </span>
              </div>
          </div>
      </div>
          

      Vertical Progress Stepper

      Use the progress-stepper--vertical modifier for a stepper with vertical layout.

      Order placed

      New Mens Addidas Ultra Boost

      Preparing for shipment

      We will notify you once it ships.

      Delivered

      Guaranteed Wednesday, October 09.

      <div class="progress-stepper progress-stepper--vertical">
          <div class="progress-stepper__items" role="list">
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h3>Order placed</h3>
                      <p>New Mens Addidas Ultra Boost</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div aria-current="step" class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="current" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h3>Preparing for shipment</h3>
                      <p>We will notify you once it ships.</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <span class="progress-stepper__icon">
                          <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                              <use href="#icon-stepper-upcoming-24"></use>
                          </svg>
                      </span>
                  </span>
                  <span class="progress-stepper__text">
                      <h3>Delivered</h3>
                      <p>Guaranteed Wednesday, October 09.</p>
                  </span>
              </div>
          </div>
      </div>
          

      Shipment Progress

      Started

      July 3rd

      Blocked

      July 5th

      Delivery

      July 6th

      <div class="progress-stepper" aria-labelledby="progress-stepper-header">
          <h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
          <div class="progress-stepper__items" role="list">
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="complete" class="icon" height="24" width="24">
                          <use href="#icon-stepper-confirmation-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Started</h4>
                      <p>July 3rd</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="blocked" class="icon" height="24" width="24">
                          <use href="#icon-stepper-attention-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Blocked</h4>
                      <p>July 5th</p>
                  </span>
              </div>
              <hr class="progress-stepper__separator" role="presentation" />
              <div class="progress-stepper__item" role="listitem">
                  <span class="progress-stepper__icon">
                      <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                          <use href="#icon-stepper-upcoming-24"></use>
                      </svg>
                  </span>
                  <span class="progress-stepper__text">
                      <h4>Delivered</h4>
                      <p>July 6th</p>
                  </span>
              </div>
          </div>
      </div>
          

      @ebay/skin/radio

      DS v2.0

      A radio button is a form control that allows a single selection from a group of choices.

      The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.

      The radio is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

      Default Radio

      Use the radio base class to create a styled radio.

      NOTE: Skin uses SVG to give a custom radio button appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default radio button in a non-CSS state.

      <span class="radio">
          <input class="radio__control" type="radio" />
          <span class="radio__icon" hidden>
              <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                  <use href="#icon-radio-unchecked-18"></use>
              </svg>
              <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                  <use href="#icon-radio-checked-18"></use>
              </svg>
          </span>
      </span>
          

      Large Radio

      For a larger radio button, use the radio--large modifier plus the #icon-radio-unchecked-24 and #icon-radio-checked-24 icons.

      <span class="radio radio--large">
          <input class="radio__control" type="radio" />
          <span class="radio__icon" hidden>
              <svg class="radio__unchecked" height="24" width="24" aria-hidden="true">
                  <use href="#icon-radio-unchecked-24"></use>
              </svg>
              <svg class="radio__checked" height="24" width="24" aria-hidden="true">
                  <use href="#icon-radio-checked-24"></use>
              </svg>
          </span>
      </span>
          

      Disabled Radio

      Use the disabled attribute to disable any radio input.

      <span class="radio">
          <input class="radio__control" type="radio" checked disabled />
          <span class="radio__icon" hidden>
              <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                  <use href="#icon-radio-unchecked-18"></use>
              </svg>
              <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                  <use href="#icon-radio-checked-18"></use>
              </svg>
          </span>
      </span>
          

      Grouped Radio

      A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select).

      A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

      The following example uses the field module for simple layout of radio button fields and labels.

      Choose an Option
      <fieldset>
          <legend>Choose an Option</legend>
          <span class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-1">Option 1</label>
          </span>
          <span class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-2">Option 2</label>
          </span>
          <span class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
          </span>
      </fieldset>
          

      TIP: For large radios, wrap each label and control inside of a field__group element to maintain vertical alignment.

      To stack radio buttons vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

      Choose an Option
      <fieldset>
          <legend>Choose an Option</legend>
          <div class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-4" type="radio" value="1" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-4">Option 1</label>
          </div>
          <div class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-5" type="radio" value="2" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-5">Option 2</label>
          </div>
          <div class="field">
              <span class="field__control radio">
                  <input class="radio__control" id="group-radio-6" type="radio" value="3" name="radio-group" />
                  <span class="radio__icon" hidden>
                      <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-unchecked-18"></use>
                      </svg>
                      <svg class="radio__checked" height="18" width="18" aria-hidden="true">
                          <use href="#icon-radio-checked-18"></use>
                      </svg>
                  </span>
              </span>
              <label class="field__label field__label--end" for="group-radio-6">Option 3</label>
          </div>
      </fieldset>
          

      @ebay/skin/section-notice

      DS v3.0

      A section notice conveys either system status and feedback to users about their actions and options or, for educational section notices, contextually educates users about programs, features and opportunities.

      To aid discoverabilty for assistive technology, each section notice is a labelled landmark region.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <section class="section-notice" role="region" aria-label="Notice" aria-roledescription="Notice">
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
          

      Status Section Notice

      A status-based section notice has a 16x16 icon representing confirmation, attention or information.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-confirmation">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
      
      <section class="section-notice" role="region" aria-label="Attention" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-attention">
              <svg class="icon icon--attention-filled-16" height="16" width="16" aria-label="Attention">
                  <use href="#icon-attention-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
      
      <section class="section-notice" role="region" aria-label="Information" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-information">
              <svg class="icon icon--information-filled-16" height="16" width="16" aria-label="Information">
                  <use href="#icon-information-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
          

      Educational Section Notice

      Educational section notices use any large 24x24 program badge and have an optional, more prominent background color (via the section-notice--education modifier).

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <section class="section-notice" role="region" aria-label="Education" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-information">
              <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
                  <use href="#icon-lightbulb-24"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
      
      <section class="section-notice section-notice--education" role="region" aria-label="Education" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-information">
              <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
                  <use href="#icon-lightbulb-24"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
          

      Titled Section Notice

      Use a heading element to create a titled section notice.

      Notification title

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-confirmation">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <h3 class="section-notice__title">Notification title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
      </section>
          

      Dismissable Section Notice

      A close button can be placed in a section-notice__footer element.

      Notification title

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
          <div class="section-notice__header" id="section-notice-confirmation">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <h3 class="section-notice__title">Notification title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <div class="section-notice__footer">
              <button aria-label="Close notice" class="fake-link section-notice__dismiss">
                  <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                      <use href="#icon-close-16"></use>
                  </svg>
              </button>
          </div>
      </section>
          

      Actionable Section Notice

      Link or button actions can be placed in a section-notice__cta element.

      Notification title

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Action

      <section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
          <div class="section-notice__header">
              <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
                  <use href="#icon-confirmation-filled-16"></use>
              </svg>
          </div>
          <div class="section-notice__main">
              <h3 class="section-notice__title">Notification title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <p class="section-notice__cta">
              <a href="https://www.ebay.com">Action</a>
          </p>
          <div class="section-notice__footer">
              <button aria-label="Close notice" class="fake-link section-notice__dismiss">
                  <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                      <use href="#icon-close-16"></use>
                  </svg>
              </button>
          </div>
      </section>

      @ebay/skin/section-title

      DS v4.0

      Section titles function as identifiers for groups of elements.

      Static Section Title

      The standard, static section title is designed to support a single line on desktop and wrap only when displayed on narrow screens such as mWeb or native.

      Static Section Title

      <div class="section-title">
          <div class="section-title__title-container">
              <h2 class="section-title__title">Static Section Title</h2>
          </div>
      </div>
          

      Subtitled Section Title

      The subtitle is designed to support any additional information. This text should be concise and fit onto a single line.

      Subtitled Section Title

      Plus, guaranteed best prices.
      <div class="section-title">
          <div class="section-title__title-container">
              <h2 class="section-title__title">Subtitled Section Title</h2>
              <span class="section-title__subtitle">Plus, guaranteed best prices.</span>
          </div>
      </div>
          

      An arrow icon gives visual affordance that the title is a link. A linked section title can also have a subtitle.

      Linked Section Title

      See all
      <div class="section-title">
          <div class="section-title__title-container">
              <h2 class="section-title__title">Linked Section Title</h2>
          </div>
          <a class="section-title__cta" href="https://www.ebay.com">Link</a>
      </div>
          

      Section Title with Favorite

      Section Title with Favorite

      <div class="section-title">
          <div class="section-title__title-container">
              <h2 class="section-title__title">Section Title with Favorite</h2>
          </div>
          <div class="section-title__info">
              <span class="infotip">
                  <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
                      <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
                          <use href="#icon-save-16"></use>
                      </svg>
                  </button>
              </span>
          </div>
      </div>
          

      Overflow Section Title

      The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback).

      Overflow Section Title

      <div class="section-title">
          <div class="section-title__title-container">
              <h2 class="section-title__title">Overflow Section Title</h2>
          </div>
          <div class="section-title__overflow">
              <span class="menu-button">
                  <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" aria-label="Options" type="button">
                      <svg class="icon icon--overflow-vertical-16" width="3" height="13" aria-hidden="true">
                          <use href="#icon-overflow-vertical-16"></use>
                      </svg>
                  </button>
                  <div class="menu-button__menu menu-button__menu--reverse">
                      <div class="menu-button__items" role="menu">
                          <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
                          <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
                          <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
                      </div>
                  </div>
              </span>
          </div>
      </div>
          

      @ebay/skin/segmented-buttons

      Segmented Buttons are non-form toggle buttons used in certain cases. For detailed requirements and when to use these over tabs, please visit the eBay MIND Pattern for Segmented Buttons.

      The selected toggle button is toggled by aria-current="true" attribute.

      NOTE: JavaScript is required to handle segmented buttons currently selected button.

      Default Segmented Buttons

      The default segmented button has a 40px height that matches other buttons.

      <div class="segmented-buttons">
          <ul>
              <li><button type="button" class="segmented-buttons__button"
                      aria-current="true">Day</button></li>
              <li><button type="button" class="segmented-buttons__button">Month</button></li>
              <li><button type="button" class="segmented-buttons__button">Year</button></li>
          </ul>
      </div>
          

      Segmented Buttons - large

      Use the segmented-buttons--large modifier to create large segemented buttons. These have a 48px height to match large buttons.

      <div class="segmented-buttons segmented-buttons--large">
          <ul>
              <li><button type="button" class="segmented-buttons__button"
                      aria-current="true">Day</button></li>
              <li><button type="button" class="segmented-buttons__button">Month</button></li>
              <li><button type="button" class="segmented-buttons__button">Year</button></li>
          </ul>
      </div>
          

      Segmented buttons - with icons

      Any 24x24 icon can be added inside of a segmented-buttons__button-cell block.

      <div class="segmented-buttons">
          <ul>
              <li>
                  <button type="button" aria-current="true" class="segmented-buttons__button">
                  <span class="segmented-buttons__button-cell">
                          <svg aria-hidden="true" class="icon icon--full-view-24" height="16" width="16">
                              <use href="#icon-full-view-24"></use>
                          </svg>
                          <span>Desktop</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="segmented-buttons__button">
                      <span class="segmented-buttons__button-cell">
                          <svg aria-hidden="true" class="icon icon--mobile-24" height="16" width="16">
                              <use href="#icon-mobile-24"></use>
                          </svg>
                          <span>Mobile</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Segmented buttons - in fixed width container

      <div style="width: 300px;">
          <div class="segmented-buttons">
              <ul>
                  <li><button type="button" class="segmented-buttons__button"
                          aria-current="true">Q1</button></li>
                  <li><button type="button" class="segmented-buttons__button">Q2</button></li>
                  <li><button type="button" class="segmented-buttons__button">Q3</button></li>
                  <li><button type="button" class="segmented-buttons__button">Q4</button></li>
              </ul>
          </div>
      </div>
              

      @ebay/skin/select

      DS v2.2

      A select allows the user to select one item from a list of options. A select is exactly the same as a normal HTML select (because it is one), but Skin's version uses a wrapper to style it.

      The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a menu maybe a better choice.

      IMPORTANT: The examples below show the select in isolation, without any label. Please see the field module for details on labeling controls. Remember: every select requires a label!

      Default select

      <span class="select">
          <select name="options">
              <option value="item1">Option 1</option>
              <option value="item2">Option 2</option>
              <option value="item3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Disabled select

      <span class="select">
          <select name="options" disabled>
              <option value="item1">Option 1</option>
              <option value="item2" selected>Option 2</option>
              <option value="item3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Selected option

      <span class="select">
          <select name="options">
              <option value="item1">Option 1</option>
              <option value="item2" selected>Option 2</option>
              <option value="item3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Unselected Select

      If no suitable default value exists, the first option in the list can be used as a prompt and set to disabled & selected.

      <span class="select">
          <select>
              <option value="0" disabled selected>-select-</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Fluid select

      <span class="select select--fluid">
          <select name="options">
              <option value="item1">Option 1</option>
              <option value="item2" selected>Option 2</option>
              <option value="item3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Borderless select

      <span class="select select--borderless">
          <select name="options" id="options">
              <option value="item1">Option 1</option>
              <option value="item2" selected>Option 2</option>
              <option value="item3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      Large Select

      For a large select, apply the select--large modifier.

      <span class="select select--large">
          <select>
              <option value="0" disabled selected>Choose a Size</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
          </select>
          <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
              <use href="#icon-chevron-down-12"></use>
          </svg>
      </span>
          

      @ebay/skin/signal

      DS v1.0

      Signals are data-backed recommendations to help customers make more informed decisions.

      There are four signal types, each with its own corresponding modifier class: trustworthy, recent, time-sensitive & neutral.

      Trustworthy Recent Time Sensitive Neutral
      <span class="signal signal--trustworthy">Trustworthy</span>
      <span class="signal signal--recent">Recent</span>
      <span class="signal signal--time-sensitive">Time Sensitive</span>
      <span class="signal signal--neutral">Neutral</span>
          

      @ebay/skin/skeleton BETA

      A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the progress spinner in many situations.

      A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve.

      A skeleton is NOT appropriate as a placeholder for content if rendering that content or placeholder would cause unexpected page layout shift (see below for more details).

      Cumulative Layout Shift (CLS)

      It is the developer's responsibility to ensure the CLS metric of a page is not negatively impacted by the introduction of a skeleton placeholder; a poor CLS score will occur whenever content shifts unexpectedly. Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Skeletons can help mask these problems if they reserve the correct amount of physical space, but can compound the problem when they do not.

      The skeleton examples page illustrates various techniques for implementing skeletons across some common loading scenarios.

      Skeleton Types

      Skeleton Default Purple Green Blue
      Avatar
      Button
      Textbox
      Image
      Text

      On large screens, skeleton loaders use a solid fill for background color; on small screens, a shimmer is applied.

      The color can be changed to purple, green or blue by applying the appropriate modifier, e.g. skeleton--green. View the composite skeletons examples for further details.

      Avatar Skeleton

      Use the skeleton__avatar class to create a skeleton placeholder for an avatar.

        <div class="skeleton" role="img" aria-label="loading">
          <div class="skeleton__avatar"></div>
        </div>
        

      Button Skeleton

      Use the skeleton__button class to create a skeleton placeholder for the default button shape.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__button"></div>
        </div>
        

      Use the small modifier to match the shape of a small button.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__button skeleton__button--small"></div>
        </div>
        

      Use the large modifier to match the shape of a large button.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__button skeleton__button--large"></div>
        </div>
        

      Textbox Skeleton

      Use the skeleton__textbox class to create a skeleton placeholder for a textbox.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__textbox"></div>
        </div>
        

      Image Skeleton

      Use the skeleton__image class to create a skeleton placeholder for an image.

        <div class="skeleton" role="img" aria-label="loading">
          <div class="skeleton__image" style="height: 50px; width: 50px;"></div>
        </div>
        

      Notice that the height and width must be set on the skeleton__image element.

        <div class="skeleton" role="img" aria-label="loading">
          <div class="skeleton__image" style="height: 200px; width: 200px;"></div>
        </div>
        

      Text Block Skeleton

      Use the skeleton__text class to create a skeleton for a single block of text.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__text skeleton__text--small"></div>
        </div>
        

      Use the skeleton__text--large modifier to match the shape of a large block of text.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__text skeleton__text--large"></div>
        </div>
        

      Use the skeleton__text--multiline mofifier to create a skeleton for two lines of text.

        <div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
          <div class="skeleton__text skeleton__text--multiline"></div>
        </div>
        

      Composite Skeleton

      Combinations of skeletons can form a custom placeholder for more complex content, such as a typical eCommerce item tile in the example below.

        <div class="skeleton skeleton--purple" role="img" aria-label="loading" style="width: 225px;">
          <div class="skeleton__image" style="width: 225px; height: 225px"></div>
          <div class="skeleton__text skeleton__text--multiline"></div>
        </div>
        

      Here is a skeleton for a compact user profile. Notice that a div tag can be replaced with a span tag for inline-block layout of elements.

        <div class="skeleton skeleton--blue" role="img" aria-label="loading">
          <span class="skeleton__avatar"></span>
          <span class="skeleton__text skeleton__text--multiline" style="width: 200px; vertical-align: top;"></span>
        </div>
        

      Skeleton Variables EXPERIMENTAL

      The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes.

      • --skeleton-background

      @ebay/skin/snackbar-dialog

      DS v2.0

      A snackbar is a non-modal dialog that appears in response to a lightweight user action. It dissapears automatically after a minimum of 6 seconds.

      The display of the snackbar should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the snackbar-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

      NOTE: A toast is non-modal and therefore should not capture or trap keyboard focus when opened.

      Default Snackbar

      The default snackbar displays a short, non-interactive message.

      <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
          <div class="snackbar-dialog__window">
              <div class="snackbar-dialog__main">
                  <p>1 item deleted from watch list.</p>
              </div>
          </div>
      </aside>
          

      Action Snackbar

      A snackbar can contain a single shortcut action. Typically this is an "undo".

      In order to give all users adequate time to find and reach the action, the snackbar DOM position must be placed closely after the users current location (i.e. document.activeElement). This ensures a natual reading and keyboard order. In addition, an accesskey attribute allows quick access via the operating system's access keys.

      <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
          <div class="snackbar-dialog__window">
              <div class="snackbar-dialog__main">
                  <p>1 item deleted from watch list.</p>
              </div>
              <div class="snackbar-dialog__actions">
                  <button accesskey="u" class="fake-link snackbar-dialog__cta">Undo<span class="clipped"> - Access Key: U</span></button>
              </div>
          </div>
      </aside>
          

      Stacked Snackbar

      The content and action can be stacked vertically by using the snackbar-dialog__window--column modifier.

      <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
          <div class="snackbar-dialog__window snackbar-dialog__window--column">
              <div class="snackbar-dialog__main">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="snackbar-dialog__actions">
                  <button accesskey="u" class="fake-link snackbar-dialog__cta">Undo<span class="clipped"> - Access Key: U</span></button>
              </div>
          </div>
      </aside>
          

      @ebay/skin/split-button

      DS v1.6

      A split button is a button broken into two seperately actionable portions: a common action (a button) at the start, and supplemental actions (a menu button) at the end.

      Split buttons are for actions only, and should not be used for site navigation.

      <span class="split-button">
          <button class="btn btn--primary btn--split-start" type="button">
              <span class="btn__cell">
                  <span class="btn__text">Button</span>
              </span>
          </button>
          <span class="menu-button">
              <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Note the usage of btn--split-start to denote the start of a split button sequence, and btn--split-end to denote its end.

      Secondary Split Button

      Use the secondary modifiers to create a secondary split button style.

      <span class="split-button">
          <button class="btn btn--secondary btn--split-start" type="button">
              <span class="btn__cell">
                  <span class="btn__text">Button</span>
              </span>
          </button>
          <span class="menu-button">
              <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Tertiary Split Button

      Use the tertiary modifiers to create a tertiary split button style.

      <span class="split-button">
          <button class="btn btn--tertiary btn--split-start" type="button">
              <span class="btn__cell">
                  <span class="btn__text">Button</span>
              </span>
          </button>
          <span class="menu-button">
              <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Fake Split Button Primary

      Link
      <span class="split-button">
          <a class="fake-btn fake-btn--primary fake-btn--split-start" href="https://ebay.com">Link</a>
          <span class="menu-button">
              <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Fake Split Button Secondary

      Link
      <span class="split-button">
          <a class="fake-btn fake-btn--secondary fake-btn--split-start" href="https://ebay.com">Link</a>
          <span class="menu-button">
              <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      Fake Split Button Tertiary

      Link
      <span class="split-button">
          <a class="fake-btn fake-btn--tertiary fake-btn--split-start" href="https://ebay.com">Link</a>
          <span class="menu-button">
              <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
                  <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                      <use href="#icon-chevron-down-12"></use>
                  </svg>
              </button>
              <div class="menu-button__menu menu-button__menu--reverse">
                  <div class="menu-button__items" role="menu">
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 10000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 20000</span>
                      </div>
                      <div class="menu-button__item" role="menuitem">
                          <span>Item 30000</span>
                      </div>
                  </div>
              </div>
          </span>
      </span>
          

      @ebay/skin/star-rating

      DS v1.0

      This is a non-interactive, display-only star rating pattern. For an interactive user-selectable star rating selection pattern, please refer to Star Rating Select.

      Method 1: Combined Stars

      This is the simplest method for displaying star rating. To have more flexibility over individual stars, consider using Method 2 - Independent Stars.

      Each non-interactive star-rating is available as an SVG symbol.

      • 0
      • 0-5
      • 1
      • 1-5
      • 2
      • 2-5
      • 3
      • 3-5
      • 4
      • 4-5
      • 5

      Below is the code example for how to use the "star-rating-2-5" symbol. Please refer to the icon section for full guidance on how to include and use SVG symbols.

      <svg role="img" aria-label="Rating: 2.5/5" class="star-rating" height="16">
          <use href="#star-rating-2-5"></use>
      </svg>
          

      Method 2: Independent Stars

      This is built using fine-grained pieces (individual stars) for optimal flexibility and for allowing potential independant star treatments (i.e. animations).

      • 0
      • 0-5
      • 1
      • 1-5
      • 2
      • 2-5
      • 3
      • 3-5
      • 4
      • 4-5
      • 5

      <div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
          <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
              <use href="#icon-star-dynamic"></use>
          </svg>
      
          <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
              <use href="#icon-star-dynamic"></use>
          </svg>
      
          <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
              <use href="#icon-star-dynamic"></use>
          </svg>
      
          <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
              <use href="#icon-star-dynamic"></use>
          </svg>
      
          <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
              <use href="#icon-star-dynamic"></use>
          </svg>
      </div>
          

      @ebay/skin/star-rating-select

      DS v1.0

      Star rating select allows users to interact with and set a star rating.

      Star rating select uses radio buttons under the hood so even in the absence of CSS, its gracefully degradation should allow for full accessible interactivity and use.

      NOTE: JavaScript is required to handle the filled visual marking of all stars previous to the currently selected star rating.

      Star Rating Select with Visual Semantic Grouping

      This instance of star rating select uses visible HTML fieldset and legend for semantic grouping.

      Rate this product
      <div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
          <fieldset>
              <legend>Rate this product</legend>
              <span class="star-rating-select__radio">
                 <input class="star-rating-select__control" aria-label="1 Star" type="radio" value="1">
                  <span class="star-rating-select__radio-icon">
                      <svg height="16" width="16" aria-hidden="true">
                          <use href="#icon-star-dynamic"></use>
                      </svg>
                  </span>
              </span>
      
              <span class="star-rating-select__radio">
                 <input class="star-rating-select__control" aria-label="2 Stars" type="radio" value="2">
                  <span class="star-rating-select__radio-icon">
                      <svg height="16" width="16" aria-hidden="true">
                          <use href="#icon-star-dynamic"></use>
                      </svg>
                  </span>
              </span>
      
              <span class="star-rating-select__radio">
                 <input class="star-rating-select__control" aria-label="3 Stars" type="radio" value="3">
                  <span class="star-rating-select__radio-icon">
                      <svg height="16" width="16" aria-hidden="true">
                          <use href="#icon-star-dynamic"></use>
                      </svg>
                  </span>
              </span>
      
              <span class="star-rating-select__radio">
                 <input class="star-rating-select__control" aria-label="4 Stars" type="radio" value="4">
                  <span class="star-rating-select__radio-icon">
                      <svg height="16" width="16" aria-hidden="true">
                          <use href="#icon-star-dynamic"></use>
                      </svg>
                  </span>
              </span>
      
              <span class="star-rating-select__radio">
                 <input class="star-rating-select__control" aria-label="5 Stars" type="radio" value="5">
                  <span class="star-rating-select__radio-icon">
                      <svg height="16" width="16" aria-hidden="true">
                          <use href="#icon-star-dynamic"></use>
                      </svg>
                  </span>
              </span>
          </fieldset>
      </div>
          

      Star Rating Select with Invisible ARIA Semantic Grouping

      This instance of star rating select uses an invisible ARIA radio group for semantic grouping.

      <div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
          <span class="star-rating-select__radio">
             <input class="star-rating-select__control" aria-label="1 Star" type="radio" value="1">
              <span class="star-rating-select__radio-icon">
                  <svg height="16" width="16" aria-hidden="true">
                      <use href="#icon-star-dynamic"></use>
                  </svg>
              </span>
          </span>
      
          <span class="star-rating-select__radio">
             <input class="star-rating-select__control" aria-label="2 Stars" type="radio" value="2">
              <span class="star-rating-select__radio-icon">
                  <svg height="16" width="16" aria-hidden="true">
                      <use href="#icon-star-dynamic"></use>
                  </svg>
              </span>
          </span>
      
          <span class="star-rating-select__radio">
             <input class="star-rating-select__control" aria-label="3 Stars" type="radio" value="3">
              <span class="star-rating-select__radio-icon">
                  <svg height="16" width="16" aria-hidden="true">
                      <use href="#icon-star-dynamic"></use>
                  </svg>
              </span>
          </span>
      
          <span class="star-rating-select__radio">
             <input class="star-rating-select__control" aria-label="4 Stars" type="radio" value="4">
              <span class="star-rating-select__radio-icon">
                  <svg height="16" width="16" aria-hidden="true">
                      <use href="#icon-star-dynamic"></use>
                  </svg>
              </span>
          </span>
      
          <span class="star-rating-select__radio">
             <input class="star-rating-select__control" aria-label="5 Stars" type="radio" value="5">
              <span class="star-rating-select__radio-icon">
                  <svg height="16" width="16" aria-hidden="true">
                      <use href="#icon-star-dynamic"></use>
                  </svg>
              </span>
          </span>
      </div>
          

      @ebay/skin/svg

      The SVG module imports an external SVG source containing all symbol definitions.

      @ebay/skin/switch

      DS v2.1

      A switch behaves a bit like a checkbox - it can be on or off (i.e checked or unchecked). The key difference is that a switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload) rather than storing form data to be sent to the server.

      Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options.

      A switch requires the switch role and aria-checked attribute for assistive technology.

      REMEMBER: every switch requires a visible, programmatic label to indicate its purpose.

      Default Switch

      The default version of the switch requires JavaScript to maintain the aria-checked state when clicked.

      The switch__control child element requires a tabindex value of 0 (zero) to be keyboard focusable.

      <span class="switch">
          <span class="switch__control" role="switch" tabindex="0" aria-checked="false"></span>
          <span class="switch__button"></span>
      </span>
          

      Disabled Switch

      To disable a switch, apply the aria-disabled attribute.

      The tabindex property must be set to -1 (negative one) to prevent keyboard focus.

      <span class="switch">
          <span class="switch__control" role="switch"  tabindex="-1" aria-checked="false" aria-disabled="true"></span>
          <span class="switch__button"></span>
      </span>
          

      Checkbox Switch

      This version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead.

      <span class="switch">
          <input class="switch__control" role="switch" type="checkbox" aria-checked="false" />
          <span class="switch__button"></span>
      </span>
          

      Disabled Checkbox Switch

      To disable a checkbox switch, apply the disabled attribute.

      <span class="switch">
          <input class="switch__control" role="switch" type="checkbox" aria-checked="false" disabled />
          <span class="switch__button"></span>
      </span>
          

      Custom Properties of Switch EXPERIMENTAL

      The following custom properties (aka CSS Variables) are available for system color-scheme appearance (i.e. light-mode & dark-mode) and other general theming purposes:

      • --switch-unchecked-background-color
      • --switch-checked-background-color
      • --switch-disabled-background-color
      • --switch-foreground-color
      • --switch-unchecked-hover-background-color
      • --switch-checked-hover-background-color
      <style>
          .switch--theme-1 {
              --switch-unchecked-background-color: orange;
              --switch-checked-background-color: green;
              --switch-unchecked-hover-background-color: coral;
              --switch-checked-hover-background-color: limegreen;
          }
      
          @media (prefers-color-scheme: dark) {
              .switch--theme-1 {
                  --switch-unchecked-background-color: blue;
                  --switch-checked-background-color: red;
                  --switch-unchecked-hover-background-color: purple;
                  --switch-checked-hover-background-color: indianred;
              }
          }
      </style>
      <span class="switch switch--theme-1">
          <span class="switch__control" role="switch" tabindex="0" aria-checked="false"></span>
          <span class="switch__button"></span>
      </span>
          

      @ebay/skin/tabs

      DS v2.1

      Tabs allow the user to switch between multiple panels of content. By decluttering the user-interface in this way, we say that tabs follow the principal of progressive disclosure.

      Selecting a tab should update the visible panel without a full page reload. If a full page load is required instead (i.e. acting like a link), please see the fake tab section below for more details.

      Default Tabs

      When a tab is selected, the aria-selected state of all tabs in the list must be updated in order for the CSS to reflect the change. Only one tab can be selected and in the tab order at any moment in time. Likewise, only one tabpanel can be visible at any time, and it must correspond to the currently selected tab.

      Use child element modifier tabs__items--large to opt into larger font-size for tabs.

      NOTE: JavaScript is required to handle tab selection state, panel visibility, focus management and arrow-key navigation. For detailed behaviour requirements, please visit the eBay MIND Pattern for Tabs.

      Panel 1 Content

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?

      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      <div class="tabs">
          <div class="tabs__items" role="tablist">
              <div aria-controls="default-tabpanel-1" aria-selected="true" class="tabs__item" id="default-tab-1" role="tab">
                  <span>Tab 1</span>
              </div>
              <div aria-controls="default-tabpanel-2" aria-selected="false" class="tabs__item" id="default-tab-2" role="tab">
                  <span>Tab 2</span>
              </div>
              <div aria-controls="default-tabpanel-3" aria-selected="false" class="tabs__item" id="default-tab-3" role="tab">
                  <span>Tab 3</span>
              </div>
          </div>
          <div class="tabs__content">
              <div aria-labelledby="default-tab-1" class="tabs__panel" id="default-tabpanel-1" role="tabpanel">
                  <div class="tabs__cell">
                      <h3>Panel 1 Content</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
                  </div>
              </div>
              <div aria-labelledby="default-tab-2" class="tabs__panel" hidden id="default-tabpanel-2" role="tabpanel">
                  <div class="tabs__cell">
                      <h3>Panel 2 Content</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
                  </div>
              </div>
              <div aria-labelledby="default-tab-3" class="tabs__panel" hidden id="default-tabpanel-3" role="tabpanel">
                  <div class="tabs__cell">
                      <h3>Panel 3 Content</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
                  </div>
              </div>
          </div>
      </div>
          

      Fake Tabs

      A fake tab looks like a normal tab, but is actually a hyperlink to a new page. Therefore a set of fake tabs behaves more like a simple navigational widget, rather than a dynamic user interface control.

      A valid HREF attribute is required for all anchor tags. A value of "javascript" (or any such variant) is not a valid URL!

      The aria-current attribute is used to programmatically denote the current page state and current link.

      Use child element modifier fake-tabs__items--large to opt into larger font-size for fake tabs.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?

      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      <div class="fake-tabs">
          <ul class="fake-tabs__items">
              <li class="fake-tabs__item">
                  <a aria-current="page" href="https://www.ebay.com">Page 1</a>
              </li>
              <li class="fake-tabs__item">
                  <a href="https://www.ebay.com">Page 2</a>
              </li>
              <li class="fake-tabs__item">
                  <a href="https://www.ebay.com">Page 3</a>
              </li>
          </ul>
          <div class="fake-tabs__content">
              <div class="fake-tabs__cell">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
              </div>
          </div>
      </div>
          

      @ebay/skin/textbox

      DS v2.2

      A textbox (also known as an input) allows the user to enter data.

      The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button.

      IMPORTANT: The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label!

      Single-Line Textbox

      Use an input tag for a single-line textbox.

      <span class="textbox">
          <input class="textbox__control" type="text" placeholder="placeholder text" />
      </span>
          

      Readonly Textbox

      Use the readonly attribute to prevent any modification of the value.

      <span class="textbox">
          <input class="textbox__control" type="text" value="Readonly textbox"  readonly />
      </span>
          

      Disabled Textbox

      Use the disabled attribute to completely disable the input and any value.

      <span class="textbox">
          <input class="textbox__control" type="text" placeholder="placeholder text" disabled />
      </span>
          

      Error-State Textbox

      Use the aria-invalid attribute to highlight any input with error.

      <span class="textbox">
          <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" />
      </span>
          

      Multi-line Textbox

      Use the textarea tag for a multi-line textbox.

      A multi-line textbox allows line breaks and has a minimum height of 200px.

      <span class="textbox">
          <textarea class="textbox__control" placeholder="placeholder text"></textarea>
      </span>
          

      Fluid Textbox

      Apply the textbox__control--fluid modifier (or fluid utility class) to fill the width of the parent element.

      <div class="textbox">
          <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />
      </div>
          

      Textbox with Icon

      Single-line textboxes can be augmented with any SVG icon.

      <span class="textbox">
          <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
              <use href="#icon-mail-24"></use>
          </svg>
          <input class="textbox__control" type="text" placeholder="placeholder text" />
      </span>
          

      To display the icon at the end of the control, position the svg tag after the input, and use textbox--icon-end modifier.

      <span class="textbox textbox--icon-end">
          <input class="textbox__control" type="text" placeholder="placeholder text" />
          <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
              <use href="#icon-mail-24"></use>
          </svg>
      </span>
          

      NOTE: The icon is presentational, and therefore hidden from assistive technology using aria-hidden. Remember, the purpose of the field must be conveyed using a label.

      Textbox with Icon Button

      Single-line textboxes also support an icon button in the end position.

      <span class="textbox textbox--icon-end">
          <input class="textbox__control" type="text" placeholder="placeholder text" />
          <button class="icon-btn icon-btn--transparent" type="button" aria-label="Clear text">
              <svg aria-hidden="true" class="icon icon--clear-24" width="16" height="16">
                  <use href="#icon-clear-24"></use>
              </svg>
          </button>
      </span>
          

      An icon button in the end position can also be teamed up with a static icon in the start position.

      <span class="textbox textbox--icon-end">
          <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
              <use href="#icon-search-24"></use>
          </svg>
          <input aria-label="Textbox demo" class="textbox__control" type="text" placeholder="placeholder text" />
          <button class="icon-btn icon-btn--transparent" type="button" aria-label="Clear text">
              <svg aria-hidden="true" class="icon icon--clear-24" width="16" height="16">
                  <use href="#icon-clear-24"></use>
              </svg>
          </button>
      </span>
          

      Large Textbox

      Use textbox__control--large modifier to style the textbox to be large size

      <span class="textbox">
          <input class="textbox__control" type="text" />
      </span>
          

      @ebay/skin/toast-dialog

      DS v2.2

      A toast is a non-modal dialog that appears in response to a system-level action.

      The display of the toast should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the toast-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

      NOTE: A toast is non-modal and therefore should not capture or trap keyboard focus when opened. Keyboard users require a way to quickly access the actions within the toast. This is achieved via the accesskey attribute.

      Default Toast

      The default toast displays a single, primary call-to-action.

      <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast-dialog toast-dialog--transition" hidden role="dialog">
          <div class="toast-dialog__window">
              <div class="toast-dialog__header">
                  <h2 class="toast-dialog__title">User Privacy Preferences</h2>
                  <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
                      <svg class="icon icon--close icon--close-16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="toast-dialog__main">
                  <p>We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we recommend you change the password.</p>
              </div>
              <div class="toast-dialog__footer">
                  <button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
              </div>
          </div>
      </aside>

      Toast Secondary Action

      A secondary action is also supported.

      <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast-dialog toast-dialog--transition" hidden role="dialog">
          <div class="toast-dialog__window">
              <div class="toast-dialog__header">
                  <h2 class="toast-dialog__title">User Privacy Preferences</h2>
                  <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
                      <svg class="icon icon--close icon--close-16">
                          <use href="#icon-close-16"></use>
                      </svg>
                  </button>
              </div>
              <div class="toast-dialog__main">
                  <p>We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we recommend you change the password.</p>
              </div>
              <div class="toast-dialog__footer">
                  <button accesskey="l" class="btn btn--secondary">Later</button>
                  <button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
              </div>
          </div>
      </aside>

      @ebay/skin/toggle-button

      DS v1.0

      A toggle button is a special type of button that conveys a pressed or non-pressed state; this state is conveyed programmatically via the aria-pressed attribute. They can be used in single-select or multi-select groups.

      These buttons, like all buttons, should NOT contain structural elements, such as headings or lists.

      A toggle button can have one of three different layouts: minimal (default), list or gallery.

      Minimal Layout

      The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.

      NOTE: All toggle button examples utilize JavaScript to toggle the aria-pressed state of the button.

      <button type="button" class="toggle-button" aria-pressed="false">
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
          </span>
      </button>
          

      List Layout

      List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.

      You may use this layout by adding the toggle-button--list-layout modifier to the toggle button.

      List Toggle Button with Title

      <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
          </span>
      </button>
          

      List Toggle Button with Title and Subtitle

      A subtitle can be added via toggle-button__subtitle block.

      <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      List Toggle Button with Title and Multi-line Subtitle

      To have a multi-line subtitle, you may use a single <p> tag that has longer text or a maximum of two separate <p> tags with shorter text inside the toggle-button__subtitle block.

      <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">
                  <p>Subtitle 1</p>
                  <p>Subtitle 2</p>
              </span>
          </span>
      </button>
          

      List Toggle Button with Icon, Title, and Subtitle

      To add an icon to a toggle button, you can use the toggle-button__icon block.

      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
          <span class="toggle-button__icon">
              <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
                  <use href="static/icons.svg#icon-on-the-way-16"></use>
              </svg>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      List Toggle Button with Image, Title, and Subtitle

      To add an image to a toggle button, you can use the toggle-button__image-container block using an <img> or as a css background image.

      Using an Image Element
      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image">
                  <img src="static/img/tb-profile-pic.jpg" alt="">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          
      Using a Contained CSS Background Image
      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          
      Using a Covered CSS Background Image
      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.

      You may use this layout by adding the toggle-button--gallery-layout modifier to the toggle button.

      Gallery Toggle Button with Image

      To add an image to a toggle button, you can use the toggle-button__image-container block.

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image">
                  <img src="static/img/tb-profile-pic.jpg" alt="">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      Gallery Toggle Button Responsive Adjustments

      Toggle buttons have a mininum and maximum width and are meant to be fluid between those boundaries. If using these buttons separately, you will need to set up their combined high-level layouts on your own. In these examples, their widths are artificially/manually set to various widths to demonstrate how the buttons undergo responsive adjustments.

      The image used in these buttons will shrink/grow responsively in width and height based on the overall button width.

      Resonsive Images Using Image Element

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 168px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image">
                  <img src="static/img/tb-profile-pic.jpg" alt="">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Minimum Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image">
                  <img src="static/img/tb-profile-pic.jpg" alt="">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">260px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image">
                  <img src="static/img/tb-profile-pic.jpg" alt="">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">342px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      Responsive Images Using CSS Background-Image

      These buttons use background-size: contain; for background image scaling/filling.

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 168px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Minimum Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">260px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">342px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      These buttons use background-size: cover; for background image filling the alloted space. The following buttons have the background image positioning using background-position-y: 20%;. Depending on your specific image, you may also need to adjust the background positioning along the x and y axis to ensure the main focal point remains visible and centered in your implementation.

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Minimum Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">260px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">342px Sized Button</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      Gallery Toggle Button with Icon

      To add an icon to a toggle button, you can use the toggle-button__icon block.

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
          <span class="toggle-button__icon">
              <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
                  <use href="static/icons.svg#on-the-way-16"></use>
              </svg>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      Disabled Toggle Button

      Toggle buttons may be disabled with disabled or aria-disabled="true".

      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" aria-disabled="true">
          <span class="toggle-button__icon">
              <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
                  <use href="static/icons.svg#on-the-way-16"></use>
              </svg>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false" disabled>
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" aria-disabled="true">
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="true" disabled>
          <span class="toggle-button__icon">
              <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="16" width="16">
                  <use href="static/icons.svg#mastercard-32-colored"></use>
              </svg>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
      <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="true" aria-disabled="true">
          <span class="toggle-button__image-container">
              <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
              </span>
          </span>
          <span class="toggle-button__content">
              <span class="toggle-button__title">Title</span>
              <span class="toggle-button__subtitle">Subtitle</span>
          </span>
      </button>
          

      @ebay/skin/toggle-button-group

      DS v1.0

      The Toggle Button Group is a group of single or multi-select toggle buttons providing a visual emphasis on the available selectable choices.

      The component allows for single or multiple selections based on need. However, when using Skin by itself you will need to have your own JavaScript to establish those rules based on the specific needs for each implementation context.

      Effort was taken in these docs to provide a good amount of helpful information. Since this component has an atomic piece (Toggle Button), there may be some information crossover. Though efforts were taken to isolate the documentation for this parent component, at various touchpoints between the two components, there may be some redundancy. In other portions, where immediate information appears to be missing here, that information may reside in its child component. Please refer to Toggle Button docs in these situations.

      Accessibility

      The preferred implementation for accessibility includes an on-screen heading and the list associated with the heading (a). The second option is an off-screen heading with the same association (b). The third is to use the label directly on the list element (c).

      On-screen Heading with Associated List (a - preferred)

      Select Shoe Size
      <h5 id="toggle-button-group-a">Select Shoe Size</h5>
      <ul aria-labelledby="toggle-button-group-a" class="toggle-button-group" data-columns="2">
          <li>
              <button type="button" class="toggle-button" aria-pressed="false">
                  <span class="toggle-button__content">
                      <span class="toggle-button__title">8</span>
                  </span>
              </button>
          </li>
          <li>
              <button type="button" class="toggle-button" aria-pressed="false">
                  <span class="toggle-button__content">
                      <span class="toggle-button__title">8.5</span>
                  </span>
              </button>
          </li>
      </ul>

      Off-screen Heading with Associated List (b)

      This implementation is identical to option (a), except the heading is off-screen using the clipped class.

      Select Shoe Size
      <h5 id="toggle-button-group-b" class="clipped">Select Shoe Size</h5>
      <ul aria-labelledby="toggle-button-group-b" class="toggle-button-group" data-columns="2">
          <li>
              <button type="button" class="toggle-button" aria-pressed="false">
                  <span class="toggle-button__content">
                      <span class="toggle-button__title">8</span>
                  </span>
              </button>
          </li>
          <li>
              <button type="button" class="toggle-button" aria-pressed="false">
                  <span class="toggle-button__content">
                      <span class="toggle-button__title">8.5</span>
                  </span>
              </button>
          </li>
      </ul>

      Interaction Variations of Toggle Button Groups

      There are three different types of toggle button groups that may be utilized based on interaction need.

      1. Multi-select: this is a freeform implementations in which the user can toggle and untoggle any button.
      2. Single-select Optional: only one button can be toggled on at any given time and the user CAN untoggle that one button.
      3. Single-select Required: only one button can be toggled on at any given time and the user CANNOT untoggle that one button.

      If you're using Skin outside of a JavaScript framework, you will need to write your own js code to accomplish these interactivity cases.

      It's generally good practice to use delegated event handlers that allow you to set up a a single event handler for the group of buttons instead of on every button.

      The following examples use an HTML attribute to disitnguish the interaction variations. Using data-selection-type. For the associated js please see /docs/src/js/main.js (TOGGLE-BUTTON-GROUP section) for an example on how the implementation may be accomplished.

      Multi-select

      The Multi-select variation is the default so nothing is specified in the markup.

      Select Sizes

      Single-select Optional

      In this example of the Single-select Optional variation, data-selection-type="single-optional" is used to split off the variation interactivity.

      Select Sizes

      Single-select Required

      In this example of the Single-select Optional variation, data-selection-type="single-required" is used to split off the variation interactivity.

      Select Sizes

      Prescriptive Responsive Layouts Using Preferred Minimum Columns

      You can provide the preferred minimum number of columns to display per row by adding the attribute data-columns="x" to the Toggle Button Group where x is how many buttons you'd prefer to have display per row. Keep in mind, however, that this doesn't guarantee you will end up with the number of columns specified as the preference. The columns will responsively shrink and stretch to the limits of min/max widths of the specific type of button in use and attempt to fit the buttons nicely within the container.

      Preferred Minimum Columns

      When there is more than enough space after the max button widths have been reached, the layout will try to fit more buttons.

      When there's not enough space after the minimum button widths have been reached and, as a result, the number of buttons per row no longer fits within the container, the buttons will start collapsing/wrapping to the next row automatically.

      Currently, Toggle Button Group is limited to 6 columns of buttons inside the group.

      Examples

      You will frequently see examples with light yellow backgrounds applied to containers. To clarify, for real-world application, your own container where you drop in Toggle Button Group should not look this way. Those are styled differently here to easily show the current container element boundaries.

      Toggle Button Group with 3 Columns of Buttons

      The buttons inside the Toggle Button Group will always attempt to fit inside the container of Toggle Button Group. In this example, using data-columns="3" to use 3 minimum columns of buttons and the container of Toggle Button Group artifically limited to 500px, you can see how the buttons react. Feel free to adjust the container width in the dev console to see how the buttons will react.

      Select Sizes
      <h5 id="toggle-button-group-c">Select Sizes</h5>
      <div style="width: 500px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-c" class="toggle-button-group" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">4.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8.5</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Toggle Button Group with 5 Columns of Buttons

      In this example, using data-columns="5" to use 5 minimum columns of buttons and the container of Toggle Button Group artifically limited to 500px, you can see how the buttons get narrower. Since these default variations of buttons have a lower minimum width, they get narrower to accommodate our request for 5 columns. Feel free to adjust the container width in the dev console to see how the buttons will react as you expand and contract the available space.
      Select Sizes
      <h5 id="toggle-button-group-d">Select Sizes</h5>
      <div style="width: 500px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-d" class="toggle-button-group" data-columns="5">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">4.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8.5</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Layouts

      There are various layouts that can be used based on the specific needs at implementation. The implied theme (needs no modifier), is the minimal layout. For more information about types of layouts, refer to the Toggle Button component. The examples below will highlight various layouts.

      A toggle button group can have one of three different layouts: minimal (default), list or gallery.

      Layout Modifiers

      Toggle Button Group has top-level modifiers that will apply to the Toggle Buttons inside. When using Toggle Buttons inside Toggle Button Group make sure you do NOT specify each Toggle Button layout modifier. Instead, top-level layout modifiers will be sufficient to create the layout you want.

      Minimal Layout (default)

      The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.

      NOTE: All toggle button examples utilize JavaScript to toggle the aria-pressed state of the button.

      In this example, the container housing the Toggle Button Group is artificially limited to 500px to demonstrate how the buttons will wrap after the specific columns (in this case, 3). Feel free to reduce/expand the container width in dev console to see how the columns will react.

      Select Sizes
      <h5 id="toggle-button-group-e">Select Sizes</h5>
      <div style="width: 500px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-e" class="toggle-button-group" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">4.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">5.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">6.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">7.5</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">8.5</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      List Layout

      List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.

      You may use this layout by adding the toggle-button-group--list-layout modifier to the toggle button group.

      List Layout Toggle Button Group with Title

      Text Options
      <h5 id="toggle-button-group-f">Text Options</h5>
      <div style="width: 750px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-f" class="toggle-button-group toggle-button-group--list-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Button 1</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Button 2</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Button 3</span>
                      </span>
                  </button>
              </li>  
          </ul>
      </div>
          

      List Layout Toggle Button Group with Subtitles (multiple buttons toggled on)

      Text Options
      <h5 id="toggle-button-group-g">Text Options</h5>
      <div style="width: 750px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-g" class="toggle-button-group toggle-button-group--list-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Title 1</span>
                          <span class="toggle-button__subtitle">Text Subtitle 1</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Title 2</span>
                          <span class="toggle-button__subtitle">Text Subtitle 2</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true"> 
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Text Title 3</span>
                          <span class="toggle-button__subtitle">Text Subtitle 3</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      List Layout Toggle Button Group with Icons

      Select Payment Option
      <h5 id="toggle-button-group-h">Select Payment Option</h5>
      <div style="width: 800px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-h" class="toggle-button-group toggle-button-group--list-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--visa-32-colored" height="3" width="3">
                              <use href="static/icons.svg#icon-visa-32-colored"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Image Button Title 1</span>
                          <span class="toggle-button__subtitle">Image Button Subtitle 1</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--paypal-32-colored" height="3" width="3">
                              <use href="static/icons.svg#icon-paypal-32-colored"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Image Button Title 2</span>
                          <span class="toggle-button__subtitle">Image Button Subtitle 2</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="3" width="3">
                              <use href="static/icons.svg#icon-mastercard-32-colored"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Image Button Title 3</span>
                          <span class="toggle-button__subtitle">Image Button Subtitle 3</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      List Layout Toggle Button Group with Images

      To add an image to a toggle button, you can use the toggle-button__image-container block using an <img> or as a css background image.

      Select Payment Option
      <h5 id="toggle-button-group-i">Select Payment Option</h5>
      <div style="width: 800px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-i" class="toggle-button-group toggle-button-group--list-layout" data-columns="3">
              <li>
                  <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Title</span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
      
              <li>
                  <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Title</span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
      
              <li>
                  <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Title</span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      List Layout Toggle Button Group with CSS Images

      Select Payment Option
      <h5 id="toggle-button-group-j">Select Payment Option</h5>
      <div style="width: 800px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-j" class="toggle-button-group toggle-button-group--list-layout" data-columns="3">
              <li>
                  <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">CSS Image</span>
                          <span class="toggle-button__subtitle">Background: Contain</span>
                      </span>
                  </button>
              </li>
      
              <li>
                  <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">CSS Image</span>
                          <span class="toggle-button__subtitle">Background: Cover</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Gallery Layout

      Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.

      You may use this layout by adding the toggle-button-group--gallery-layout modifier to the toggle button group.

      Gallery Layout Toggle Button Group with Images

      The image used in these buttons will shrink/grow responsively in width and height based on the overall button width being respectful of their boundary limitations. Where those boundaries are in danger of being crossed, the layout will wrap accordingly.

      Selection Options
      <h5 id="toggle-button-group-k">Selection Options</h5>
      <div style="width: 600px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-k" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">
                              <span>Image Button</span>
                          </span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">
                              <span>Image Button</span>
                          </span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image">
                              <img src="static/img/tb-profile-pic.jpg" alt="">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">
                              <span>Image Button</span>
                          </span>
                          <span class="toggle-button__subtitle">Subtitle</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Gallery Layout Toggle Button Group with CSS Images

      Besides using an <img>, you may also use CSS images that can provide more flexibility in filling more of the space reserved for images.

      These images will change in size responsively both horizontally and vertically based on the size of the button itself, available space allowed by the container and their minimum and maximum size limitations.

      The examples below have various different implementations of CSS images. The first is a CSS Profile Image button with background-size: contain that will display the image as is and fit the entire image in the container. The second is a CSS Profile Image button with background-size: cover that will display the image to fill as much of the space of the container as possible clipping out the remaining portions of the image that fall outside. With that method, you can also provide guidance for fine-tuning the image positioning to move the focal point into the center of the container. In that example, background-position: center 15%; is used to move the focal point (person with camera) into the center of the frame.

      Selection Options
      <h5 id="toggle-button-group-l">Selection Options</h5>
      <div style="width: 700px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-l" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">CSS Profile Image</span>
                          <span class="toggle-button__subtitle">Background: Contain</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image" style="background-image: url('static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">CSS Profile Image</span>
                          <span class="toggle-button__subtitle">Background: Cover</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__image-container">
                          <span class="toggle-button__image" style="background-image: url('static/img/tb-landscape-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
                          </span>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">CSS Landscape Image</span>
                          <span class="toggle-button__subtitle">Background: Cover</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      Gallery Layout Toggle Button Group with Icons

      Typically, one would use either all image buttons or all icon buttons in a Toggle Button Group.

      To add an icon to a toggle button, you can use the toggle-button__icon block.

      Selection Options
      <h5 id="toggle-button-group-m">Selection Options</h5>
      <div style="width: 750px; background-color: lightyellow; border: 1px dashed orange;">
          <ul aria-labelledby="toggle-button-group-m" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--image-64" height="64" width="64">
                              <use href="static/icons.svg#icon-image-64"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Gallery Title 1</span>
                          <span class="toggle-button__subtitle">Gallery Subtitle 1</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="true">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--credit-card-64" height="64" width="64">
                              <use href="static/icons.svg#icon-credit-card-64"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Gallery Title 2</span>
                          <span class="toggle-button__subtitle">Gallery Subtitle 2</span>
                      </span>
                  </button>
              </li>
              <li>
                  <button type="button" class="toggle-button" aria-pressed="false">
                      <span class="toggle-button__icon">
                          <svg aria-hidden="true" class="icon icon--bank-64" height="64" width="64">
                              <use href="static/icons.svg#icon-bank-64"></use>
                          </svg>
                      </span>
                      <span class="toggle-button__content">
                          <span class="toggle-button__title">Gallery Title 3</span>
                          <span class="toggle-button__subtitle">Gallery Subtitle 3</span>
                      </span>
                  </button>
              </li>
          </ul>
      </div>
          

      @ebay/skin/tokens

      Contains all custom properties necessary to correctly render the Evo Design System, in accordance with the token system.

      Core, light and dark token sets are individually exposed via the following submodules:

      @ebay/skin/tokens/evo-core
      eBay default primitives
      @ebay/skin/tokens/evo-light
      eBay semantic aliases for light mode
      @ebay/skin/tokens/evo-dark*
      eBay semantic aliases for dark mode

      *This sub-module will not be included automatically by it's parent module; it must be explicitly included by any page that is itself dark-mode compatible.

      Primitive Color Tokens

      • color-blue-1
      • color-blue-2
      • color-blue-3
      • color-blue-4
      • color-blue-5
      • color-blue-6
      • color-blue-7
      • color-green-1
      • color-green-2
      • color-green-3
      • color-green-4
      • color-green-5
      • color-green-6
      • color-green-7
      • color-red-1
      • color-red-2
      • color-red-3
      • color-red-4
      • color-red-5
      • color-red-6
      • color-red-7
      • color-magenta-1
      • color-magenta-2
      • color-magenta-3
      • color-magenta-4
      • color-magenta-5
      • color-magenta-6
      • color-magenta-7
      • color-teal-1
      • color-teal-2
      • color-teal-3
      • color-teal-4
      • color-teal-5
      • color-teal-6
      • color-teal-7
      • color-neutral-1
      • color-neutral-2
      • color-neutral-3
      • color-neutral-4
      • color-neutral-5
      • color-neutral-6
      • color-neutral-7
      • color-neutral-8

      Semantic Color Tokens

      • color-background-primary
      • color-background-secondary
      • color-background-disabled
      • color-background-inverse
      • color-background-attention
      • color-background-confirmation
      • color-background-information
      • color-background-accent
      • color-background-invalid
      • color-foreground-primary
      • color-foreground-secondary
      • color-foreground-disabled
      • color-foreground-attention
      • color-foreground-confirmation
      • color-foreground-information
      • color-foreground-accent
      • color-foreground-visited
      • color-foreground-on-primary
      • color-foreground-on-secondary
      • color-foreground-on-disabled
      • color-foreground-on-inverse
      • color-foreground-on-accent
      • color-foreground-on-attention
      • color-foreground-on-confirmation
      • color-foreground-on-information
      • color-stroke-default
      • color-stroke-accent
      • color-stroke-attention
      • color-stroke-confirmation
      • color-stroke-information
      • color-stroke-disabled
      • color-stroke-strong
      • color-stroke-subtle
      • color-state-visited
      • color-state-primary-hover
      • color-state-primary-active
      • color-state-secondary-hover
      • color-state-secondary-active
      • color-state-inverse-hover
      • color-state-inverse-active
      • color-state-accent-hover
      • color-state-accent-active
      • color-state-attention-hover
      • color-state-attention-active
      • color-scrim-image
      • color-scrim-background
      • color-ai-gradient-full-spectrum
      • color-ai-gradient-green-strong
      • color-ai-gradient-blue-strong
      • color-ai-gradient-purple-strong
      • color-ai-gradient-green-subtle
      • color-ai-gradient-blue-subtle
      • color-ai-gradient-purple-subtle

      @ebay/skin/tooltip

      DS v2.0

      A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.

      The tooltip must be programmatically associated with the button by using the aria-describedby property and tooltip role.

      Toggle the aria-expanded state of the button to expand or collapse its associated tooltip.

      <span class="tooltip">
          <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
              <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
                  <use href="#icon-settings-24"></use>
              </svg>
          </button>
          <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="top: 48px; left: 4px">
              <span class="tooltip__pointer tooltip__pointer--top-left"></span>
              <div class="tooltip__mask">
                  <div class="tooltip__cell">
                      <div class="tooltip__content">
                          <p>Use Access Key 'S' to display settings.</p>
                      </div>
                  </div>
              </div>
          </div>
      </span>
          

      By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

      In order to get this to work with floating-ui, you need to remove pointer position tooltip__pointer--top-left and remove any style positioning

      <span class="tooltip">
          <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
              <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
                  <use href="#icon-settings-24"></use>
              </svg>
          </button>
          <div class="tooltip__overlay" id="tooltip-0" role="tooltip">
              <span class="tooltip__pointer"></span>
              <div class="tooltip__mask">
                  <div class="tooltip__cell">
                      <div class="tooltip__content">
                          <p>Use Access Key 'S' to display settings.</p>
                      </div>
                  </div>
              </div>
          </div>
      </span>
          

      @ebay/skin/tourtip

      DS v2.0

      A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.

      Toggle the tourtip--expanded modifier to expand or collapse the tourtip.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Tourtip

      Here's something new to help you be successful at your task.

      <div class="tourtip tourtip--expanded">
          <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label" style="bottom: -125px; left: -6px; top: auto;">
              <span class="tourtip__pointer tourtip__pointer--top-left"></span>
              <div class="tourtip__mask">
                  <div class="tourtip__cell">
                      <span class="tourtip__content">
                          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
                          <p>Here's something new to help you be successful at your task.</p>
                      </span>
                      <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
                          <svg class="icon icon--close-16" height="16" width="16" aria-hidden="true">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                  </div>
              </div>
          </div>
      </div>
          

      By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

      In order to get this to work with floating-ui, you need to remove pointer position tourtip__pointer--top-left and remove any style positioning

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Tourtip

      Here's something new to help you be successful at your task.

      <div class="tourtip tourtip--expanded">
          <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
              <span class="tourtip__pointer"></span>
              <div class="tourtip__mask">
                  <div class="tourtip__cell">
                      <span class="tourtip__content">
                          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
                          <p>Here's something new to help you be successful at your task.</p>
                      </span>
                      <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
                          <svg class="icon icon--close-16" height="16" width="16" aria-hidden="true">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                  </div>
              </div>
          </div>
      </div>
          

      With footer

      Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Tourtip

      Here's something new to help you be successful at your task.

      <div class="tourtip tourtip--expanded">
          <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
              <span class="tourtip__pointer"></span>
              <div class="tourtip__mask">
                  <div class="tourtip__cell">
                      <span class="tourtip__content">
                          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
                          <p>Here's something new to help you be successful at your task.</p>
                      </span>
                      <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
                          <svg class="icon icon--close-16" height="16" width="16" aria-hidden="true">
                              <use href="#icon-close-16"></use>
                          </svg>
                      </button>
                      <div class="tourtip__footer">
                          <span class="tourtip__index">1 / 3</span>
                          <button class="fake-link">Back</button>
                          <button class="btn btn--primary">Next</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
          

      @ebay/skin/typography

      Static sites without access to the LESS preprocessor can leverage the Skin type ramp via the typography module.

      Giant text and large text are always bold. Other entries in the type ramp can be set to bold-text or secondary-text using the relevant class.

      • .giant-text-3
      • .giant-text-2
      • .giant-text-1
      • .large-text-2
      • .large-text-1
      • .medium-text
      • .regular-text
      • .small-text

      Product Titles

      Product titles are regular font weight, use the Market Sans font and are responsive based on a small or large screen size.

      • .giant-product-title
      • .large-product-title
      • .medium-product-title
      • .small-product-title

      Section Titles

      Section titles are bold font weight, use the Market Sans font and are responsive based on a small or large screen size.

      • .giant-section-title
      • .large-section-title
      • .medium-section-title
      • .small-section-title

      @ebay/skin/utility

      The utility module provides a small set of common, utility classes. It is not intended as an exhaustive library of utility classes or functions (i.e. it is not Funcssion!).

      Utility Classes
      Class Properties
      .clearfix Clear floated elements
      .clipped Element visible to screen reader only
      .clipped--stealth Clipped element becomes visible on focus (modifier)
      .image-treatment Applied on an image container. Will apply a grey background to the image inside container.
      .image-stretch Image will stretch up and down
      .image-center Vertically and horizontally center an image
      .image-scale Image will scale up and down
      .text-truncate Truncate single-line text

      Utility Notes

      Utility Notes
      Item Notes
      will-change There are known performance issues using this approach to indicate imminent element style changes for browsers. It's recommended to use this sparingly and only to remedy known performance issues and not anticipate them.