eBay Skin

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": "^13"
    }
}

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": "^13",
    },
    "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/less",
        "@ebay/skin/global",
        "@ebay/skin/button",
        "@ebay/skin/icon"
    ]
}

Flags

Skin has the ability to switch between different, yes you guessed it, skins. Two skins are currently supported: default and legacy.

Both skins are visual expressions of eBay's design system language. All modules have identical markup, whichever skin is chosen.

To access the older legacy skin, a flag must be used.

IMPORTANT! Version 13 introduces a move away from a flag based system to a token based system. To maintain close parity with the legacy design system, be sure to also include the legacy theme pack.

Webpack Setup

To support flags, arc-webpack must be installed:

npm add -D arc-webpack

Configure Webpack like so:

const AdaptivePlugin = require("arc-webpack");
...
...
    plugins: [
        new AdaptivePlugin({ flags: { "ds-4": true } })
    ]

Lasso.js Setup

To opt into the legacy DS4 skin, Lasso.js requires the ds-4 conditional dependency flag

myLasso.lassoPage({
    flags: ['ds-4']
});

Or, alternatively, using the Marko Taglib.

<lasso-page flags=['ds-4']>
   ...
</lasso-page>

CDN

A CSS file containing the full collection of modules is available via the following url:

https://ir.ebaystatic.com/cr/v/c1/skin/v13.7.1/ds6/skin.min.css

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.

Legacy Theme

This theme allows older DS4-era apps to stay opted into the older legacy color-scheme; primarily impacting buttons, form controls and notices.

In order to use the theme, include the module @ebay/skin/legacy-theme. Please ensure it is added to the end of your CSS cascade.

Square Corner Theme

This theme allows apps to opt out of the ultra rounded-corners that were introduced in version 12; primarily impacting modules such as button, dialog and textbox.

This "theme" is intended only for teams wishing to upgrade their version of Skin, but who are not ready to take this particular change.

In order to use the theme include the module @ebay/skin/square-corners-theme.

NOTE: Make sure to have this module loaded LAST so that it will properly override the rounded styles.

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

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

DS v1.2.0

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

DS v1.2.0

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li>
            <a href="https://www.ebay.com/">ebay</a>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a aria-current="location">Smart Watch Bands</a>
        </li>
    </ul>
</nav>

If the last breadcrumb is not the current page, then that link must have a valid href.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li>
            <a href="https://www.ebay.com/">ebay</a>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
        </li>
    </ul>
</nav>

Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs region is horizontally scrollable.

Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!

@ebay/skin/button

DS v1.2.0

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="http://www.ebay.com">Link</a>

Large Button

Use the large modifier to create a large button style.

Large Link

<button class="btn btn--large">Button</button>
<a class="fake-btn fake-btn--large" href="http://www.ebay.com">Large 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="http://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="http://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="http://www.ebay.com">Link</a>

Delete Button

Use the delete modifier to create a delete button style.

Link

<button class="btn btn--delete">Button</button>
<a class="fake-btn fake-btn--delete" href="http://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.

Primary Link Secondary Link Tertiary Link

<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 remain keyboard focusable. They help in situations where a button may frequently toggle back and forth between enabled and disabled states which can result in the button losing focus.

<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="http://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="http://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="http://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" focusable="false" height="16" width="16">
            <use xlink:href="#icon-menu"></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" focusable="false" height="16" width="16">
            <use xlink:href="#icon-menu"></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" aria-label="Busy...">
    <span class="btn__cell">
        <span class="progress-spinner">
            <svg aria-hidden="true" class="icon icon--spinner" focusable="false" height="24" width="24">
                <use xlink:href="#icon-spinner"></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" focusable="false" width="8" height="8">
                <use xlink:href="#icon-chevron-down"></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>

Constrained Width Button

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

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

Fixed Width and Height Button

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

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

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

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

@ebay/skin/carousel

DS v1.1.0

Carousels display a list of similar items in a scrolling, horizontal viewport. Items may be entirely static (e.g. an image), entirely interactive (e.g. button) or contain a mix of static and interactive elements (e.g. a heading, image and link).

Items may be ungrouped and scrolled in a continuous manner, or grouped and scrolled via a discrete number of slides.

NOTE: No JavaScript behaviour has been implemented in the carousel examples (i.e. the left & right paddle controls are non-functional), we demonstrate the CSS aspect only. For detailed behaviour requirements, please visit the eBay MIND Pattern for Carousel.

Continuous Carousel

The default carousel is a continuous carousel. Continuous carousels have no concept of slides, only a continuous flow of items.

Continuous carousels cannot guarantee any kind of "peek", therefore a faded mask is applied to the viewport as visual affordance. To disable the mask, when the carousel has reached the end of the content, simply remove the carousel__viewport--mask modifier.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8

<div class="carousel">
    <div class="carousel__container">
        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
                <use xlink:href="#icon-carousel-prev"></use>
            </svg>
        </button>
        <div class="carousel__viewport carousel__viewport--mask">
            <ul class="carousel__list">
                <li>Card 1</li>
                <li>Card 2</li>
                <li>Card 3</li>
                <li>Card 4</li>
                <li>Card 5</li>
                <li>Card 6</li>
                <li>Card 7</li>
                <li>Card 8</li>
            </ul>
        </div>
        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
                <use xlink:href="#icon-carousel-next"></use>
            </svg>
        </button>
    </div>
</div>

Slide Carousel

A slide carousel has a discrete number of items in the viewport. Each group of items constitutes a "slide".

For visual affordance, instead of a faded mask, slide carousels are always able to show a "peek" of more content.

A slide carousel requires an ARIA live-region (typically also a heading) to convey slide updates to assistive technology.

Slideshow Carousel

A slideshow carousel is a discrete carousel that shows exactly one item per slide; it requires no other visual affordance than a play/pause button.

A slideshow carousel can be set to autoplay, but must loop no more than once.

@ebay/skin/checkbox

DS v1.2.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" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-unchecked"></use>
        </svg>
        <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-checked"></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.

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" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-unchecked"></use>
        </svg>
        <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-mixed"></use>
        </svg>
    </span>
</span>

Large Checkbox

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

<span class="checkbox checkbox--large">
    <input class="checkbox__control" type="checkbox" checked />
    <span class="checkbox__icon" hidden>
        <svg class="checkbox__unchecked" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-checkbox-unchecked-large"></use>
        </svg>
        <svg class="checkbox__checked" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-checkbox-checked-large"></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" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-unchecked"></use>
        </svg>
        <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-checkbox-checked"></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 Option 1 Option 2 Option 3

<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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></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

Option 1

Option 2

Option 3

<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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-checked"></use>
                </svg>
            </span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-6">Option 3</label>
    </div>
</fieldset>

@ebay/skin/color

DS v2.2.0

Static sites that do not have access to the LESS variables can leverage the product token palette via the color module class names.

color-background-default
color-separator
color-image-border
color-action-primary
color-action-secondary
color-action-hover
color-action-disabled
color-action-destroy
color-text-default
color-text-secondary
color-text-disabled
color-text-confirmation
color-link-default
color-link-hover
color-link-visited
color-status-confirmation
color-status-attention
color-status-information

@ebay/skin/combobox

DS v2.0.3

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.

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></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.

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></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.0

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

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

Link

<a class="cta-btn" href="http://www.ebay.com">
    <span class="cta-btn__cell">
        <span>Link</span>
        <svg aria-hidden="true" class="icon icon--cta" focusable="false" height="8" width="8">
            <use xlink:href="#icon-cta"></use>
        </svg>
    </span>
</a>

@ebay/skin/dark-mode

This module enables compatibility with the operating system's dark color scheme/appearance - more commonly known as "dark mode".

Every color property within Skin is exposed as a dynamic CSS Custom Property, via a system of tokens. When dark mode is activated this module simply re-binds those tokens using colors from our dark mode palette.

@ebay/skin/details

DS v1.2.0

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--dropdown" focusable="false" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </summary>
    <p>Sample content</p>
</details>

Opened Details

Apply the open attribute to change the state.

Details

<details class="details" open>
    <summary class="details__summary">
        <span class="details__label">Details</span>
        <span class="details__icon" hidden>
            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </summary>
    <p>Sample content</p>
</details>

Centered Details

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

Details

<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--dropdown" focusable="false" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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

<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--dropdown" focusable="false" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </summary>
    <p>Sample content</p>
</details>

RTL Details

Works with right-to-left languages.

Details

<details class="details" dir="rtl">
    <summary class="details__summary">
        <span class="details__label">Details</span>
        <span class="details__icon" hidden>
            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </summary>
    <p>Sample content</p>
</details>

@ebay/skin/drawer-dialog

DS v1.2.0

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" focusable="false" height="16" width="16">
                        <use xlink:href="#icon-close"></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>

@ebay/skin/fullscreen-dialog

DS v2.1.0

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">
            <button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
            <h2 class="large-text-1 bold-text">Heading</h2>
        </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="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Sliding Fullscreen Dialog

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

<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" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></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="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

@ebay/skin/eek

DS v1.1.0

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" focusable="false" aria-hidden="true">
                    <use xlink: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" focusable="false" aria-hidden="true">
            <use xlink: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" focusable="false" aria-hidden="true">
                    <use xlink: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" focusable="false" aria-hidden="true">
            <use xlink: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" focusable="false" aria-hidden="true">
                    <use xlink: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" focusable="false" aria-hidden="true">
            <use xlink:href="#icon-eek-arrow"></use>
        </svg>
    </div>

@ebay/skin/expand-button

DS v1.2.0

Use the expand-btn base class for any button that expands and collapses content.

The expand button is used in the menu-button and listbox-button modules.

<button class="expand-btn" type="button" aria-expanded="false">
    <span class="expand-btn__cell">
        <span class="expand-btn__text">Expand</span>
        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></use>
        </svg>
    </span>
</button>

Disabled Expand Button

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

<button class="expand-btn" type="button" aria-expanded="false" disabled>
    <span class="expand-btn__cell">
        <span class="expand-btn__text">Expand</span>
        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></use>
        </svg>
    </span>
</button>

Minimal Expand Button

Use the expand-btn--icon-only modifier for a minimal expand button with no visible text. The button requires an aria-label for assistive technology.

<button class="expand-btn expand-btn--icon-only" type="button" aria-expanded="false" aria-label="Expand/Collapse">
    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></use>
    </svg>
</button>

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

Field 1 Field 2 Field 3

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.

Field 1

Field 2

Field 3

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.

Field 1

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

Field 1 Field 2 Field 3

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.

Field 1

Field 2

Field 3

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.

Field 1 Field 2 Field 3

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-dropdown"></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.

Field 1 Field 2 Field 3

<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" disabled />
    </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" disabled>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </span>
</span>
<span class="field">
    <label class="field__label" 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.

Field 1 Field 2

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </span>
</span>

Required Field

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

Field 1 ^* Field 2 ^*

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.

Field 1 Field 2

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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 1 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 1 Field description - default

Field 2 Field description - confirmation

Field 3 Field description - information

Field 4 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 1

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

Field 1

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

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>

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.

Field 1

Field 2

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-dropdown"></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.

Field 1 Field 2

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                        <use xlink:href="#icon-dropdown"></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 1

Field description or error

Field 2

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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                        <use xlink:href="#icon-dropdown"></use>
                    </svg>
                </div>
            </div>
            <span class="field__description">
                <span>Field description or error</span>
            </span>
        </div>
    </span>
</div>

@ebay/skin/filter-button

DS v1.1.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.

<div class="filter-group">
    <button type="button" class="filter-button">
        <span class="filter-button__cell">Button</span>
    </button>
    <a href="http://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="http://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.

<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="http://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 v1.1.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).

<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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-unchecked"></use>
                </svg>
                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-checkbox-checked"></use>
                </svg>
            </span>
            <span class="filter-menu__text">Item 3</span>
        </div>
    </div>
</span>

<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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="icon icon--radio-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="icon icon--radio-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="icon icon--radio-checked" focusable="false" height="18" width="18">
                    <use xlink:href="#icon-radio-checked"></use>
                </svg>
            </span>
            <span class="filter-menu__text">Item 3</span>
        </div>
    </div>
</div>

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" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-unchecked"></use>
                        </svg>
                        <svg class="checkbox__checked" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-unchecked"></use>
                        </svg>
                        <svg class="checkbox__checked" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-unchecked"></use>
                        </svg>
                        <svg class="checkbox__checked" focusable="false" height="18" width="18">
                            <use xlink:href="#icon-checkbox-checked"></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 v1.1.0

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

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--dropdown" focusable="false" height="12" width="12">
                <use xlink:href="#icon-dropdown"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></use>
                    </svg>
                </span>
                <span class="filter-menu-button__text">Green</span>
            </div>
        </div>
    </div>
</span>

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--dropdown" focusable="false" height="12" width="12">
                <use xlink:href="#icon-dropdown"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-unchecked"></use>
                    </svg>
                    <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
                        <use xlink:href="#icon-checkbox-checked"></use>
                    </svg>
                </span>
                <span class="filter-menu-button__text">Green</span>
            </div>
        </div>
    </div>
</span>

The button can be disabled using the disabled property.

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--dropdown" focusable="false" height="12" width="12">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <span class="filter-menu-button__menu">
        <form name="filter-menu-button-form-1" action="http://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" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-unchecked"></use>
                            </svg>
                            <svg class="checkbox__checked" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-unchecked"></use>
                            </svg>
                            <svg class="checkbox__checked" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-unchecked"></use>
                            </svg>
                            <svg class="checkbox__checked" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-checked"></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" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-unchecked"></use>
                            </svg>
                            <svg class="checkbox__checked" focusable="false" height="18" width="18">
                                <use xlink:href="#icon-checkbox-checked"></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/floating-label

DS v2.0.3

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.

First Name

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

Last Name

<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

Date Of Birth

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

First Name

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

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

First Name

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

First Name

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

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.

Enter list of users

<span class="floating-label">
    <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.

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            
    
<use xlink:href="static/common/icons.svg#icon-dropdown"></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

Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch

<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

Select Option

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></use>
        </svg>
    </span>
</span>

Floating Label with large select

Select Option

<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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="#icon-dropdown"></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.

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

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

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" focusable="false" height="24" width="24">
    <use xlink:href="#icon-information"></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.

<div hidden>
    <svg>
        <symbol id="icon-information" viewBox="0 0 24 24">
            <path d="M0 12C0 5.373 5.373 0 12 0c6.625.006 11.994 5.375 12 12 0 6.627-5.373 12-12 12S0 18.627 0 12zm2 0c0 5.523 4.477 10 10 10 5.52-.006 9.994-4.48 10-10 0-5.523-4.477-10-10-10S2 6.477 2 12zm10-2a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1zm1-3a1 1 0 11-2 0 1 1 0 012 0z"/>
        </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" focusable="false" height="24" width="24" aria-hidden="true">
    <use xlink:href="#icon-information"></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" focusable="false" height="24" width="24" role="img" aria-label="Information">
    <use xlink:href="#icon-information"></use>
</svg>

Default Icons

Icons in the default set have dimensions of 24x24.

add
arrow-left
arrow-move
arrow-right
arrow-right-bold
attention
attention-filled
bag
bank
bids
calendar
camera
cart
categories
close
chevron-down
chevron-down-bold
chevron-left
chevron-right
chevron-up
chevron-up-bold
clear
clock
confirmation
confirmation-filled
credit-card
customize
delete
edit
deals
download
envelope
fast-n-free
filter-gallery
filter-list
filter-single
filter-single-selected
following
gift
help
hide-secret
history
home
information
information-filled
large-box
large-case
lightbulb
location
locked
medium-box
menu
messages
mic
mobile
mobile-signal
notification
overflow
package
pause
pause-filled
photo-brightness
photo-crop
photo-gallery
photo-gallery-more
photo-rotate
photo-select-all
photo-select-none
photo-contrast
photo-flash
photo-flip-camera
photo-sharpen
play
play-filled
print
profile
purchases
red-laser
refresh
remove
report-flag
save
save-bold
save-selected
search
search-bold
security-key
selling
send
settings
share
show-secret
shoe-box
social-link
social-discord
social-facebook
social-messenger
social-pinterest
social-reddit
social-twitter
social-whatsapp
social-linkedin
small-box
small-case
small-letter
star-empty
star-full
star-half
star-undefined
store
suitcase
support
tablet-condensed-grid
tablet-condensed-grid-filled
tablet-relaxed-grid
tablet-relaxed-grid-filled
tablet-vertical-split
tablet-vertical-split-filled
thumbs-up
thumbs-up-selected
thumbs-down
thumbs-down-selected
tick
top-seller
truck
unlocked
vault
video-play
video-pause
watch
window

Medium Icons

Icons in the medium set have dimensions of 22x22.

Note that avatar-light must be used on a white background, and avatar-dark on a black background.

avatar
avatar-filled
avatar-light
avatar-dark

Small Icons

Icons in the small set have dimensions of 16x16.

add
arrow-left
arrow-move
arrow-right
attention
attention-filled
calendar
camera
cart
close
chevron-left
chevron-right
chevron-up
clear
clock
confirmation
confirmation-filled
credit-card
delete
edit
fast-n-free
filter-gallery
filter-list
filter-single
following
help
information
information-filled
locked
mic
overflow
pause
play
red-laser
report-flag
save
save-selected
search
settings
share
star-empty
star-full
star-half
star-undefined
thumbs-up
thumbs-up-selected
thumbs-down
thumbs-down-selected
truck
unlocked
vault

Large Icons

Icons in the large set have dimensions of 64x64.

bank
calendar
cart
chat
credit-card
fingerprint
gift
location
messages
pause
pause-filled
play
play-filled
purchases
search
store
text-messaging
watch

Aliased Icons

We also provide several aliases for core use cases.

back
carousel-prev
carousel-next
cta
dropdown
pagination-prev
pagination-next

Disabled Icons

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

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

@ebay/skin/icon-button

DS v1.5.0

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" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="icons.svg#icon-menu"></use>
    </svg>
</button>
<a class="icon-link" href="http://www.ebay.com" aria-label="Settings">
    <svg class="icon icon--settings" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="icons.svg#icon-settings"></use>
    </svg>
</a>

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" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="icons.svg#icon-confirmation-filled"></use>
    </svg>
</button>
<a class="icon-link icon-link--transparent" href="http://www.ebay.com" aria-label="Attention">
    <svg class="icon icon--attention-filled" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="icons.svg#icon-attention-filled"></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" focusable="false" width="24" height="24" aria-hidden="true">
        <use xlink:href="#icon-save"></use>
    </svg>
    <span aria-hidden="true" class="badge">4</span>
</button>
<a aria-label="Inbox (4 notifications)" class="icon-link icon-link--badged" href="http://www.ebay.com">
    <svg class="icon icon--notification" focusable="false" width="24" height="24" aria-hidden="true">
        <use xlink:href="#icon-notification"></use>
    </svg>
    <span aria-hidden="true" class="badge">99+</span>
</a>

@ebay/skin/infotip

DS v1.1.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-small" focusable="false" width="16" height="16" aria-hidden="true">
            <use xlink:href="#icon-information-small"></use>
        </svg>
    </button>
    <div class="infotip__overlay">
        <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" focusable="false" height="24" width="24" aria-hidden="true">
                        <use xlink:href="#icon-close"></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-small" focusable="false" width="16" height="16" aria-hidden="true">
                <use xlink:href="#icon-information-small"></use>
            </svg>
        </button>
        <span class="infotip__overlay">
            <span class="infotip__pointer infotip__pointer--top-left"></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" focusable="false" height="24" width="24" aria-hidden="true">
                            <use xlink:href="#icon-close"></use>
                        </svg>
                    </button>
                </span>
            </span>
        </span>
    </span>
</p>

On small screens, the infotip should launch a modal 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-small" focusable="false" width="16" height="16" aria-hidden="true">
            <use xlink:href="#icon-information-small"></use>
        </svg>
    </button>
</span>
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" hidden class="lightbox-dialog lightbox-dialog--mini" id="lightbox-dialog-mini-default-0" role="dialog">
    <div class="lightbox-dialog__window lightbox-dialog__window--mini">
        <div class="lightbox-dialog__header">
            <button aria-label="Close dialog" class="icon-btn icon-btn--transparent lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></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 v1.3.0

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.

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 focusable="false" class="icon icon--confirmation-filled" height="24" width="24" role="img" aria-label="Confirmation">
            <use xlink:href="#icon-confirmation-filled"></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 focusable="false" class="icon icon--information-filled" height="24" width="24" role="img" aria-label="Information">
            <use xlink:href="#icon-information-filled"></use>
        </svg>
    </span>
    <span class="inline-notice__main">
        <p><a href="http://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 focusable="false" class="icon icon--attention-filled" height="24" width="24" role="img" aria-label="Attention">
            <use xlink:href="#icon-attention-filled"></use>
        </svg>
    </span>
    <span class="inline-notice__main">
        <p><a href="http://www.ebay.com">Add required aspects</a> to keep item alive.</p>
    </span>
</div>

@ebay/skin/less

DS v1.0.0

The Less module enables developers to access our public Less variables & mixins in their application.

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

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

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

Light Primitives

color-white
color-grey1
color-grey2
color-grey3
color-grey4
color-grey5
color-grey6
color-grey7
color-black
color-b1
color-b2
color-b3
color-b4
color-b5
color-b6
color-b7
color-g1
color-g2
color-g3
color-g4
color-g5
color-g6
color-g7
color-l1
color-l2
color-l3
color-l4
color-l5
color-l6
color-l7
color-m1
color-m2
color-m3
color-m4
color-m5
color-m6
color-m7
color-o1
color-o2
color-o3
color-o4
color-o5
color-o6
color-o7
color-r1
color-r2
color-r3
color-r4
color-r5
color-r6
color-r7
color-t1
color-t2
color-t3
color-t4
color-t5
color-t6
color-t7
color-y1
color-y2
color-y3
color-y4
color-y5
color-y6
color-y7

Dark Primitives

color-white-dark-mode
color-grey1-dark-mode
color-grey2-dark-mode
color-grey3-dark-mode
color-grey4-dark-mode
color-grey5-dark-mode
color-grey6-dark-mode
color-grey7-dark-mode
color-black-dark-mode
color-b4-dark-mode
color-b6-dark-mode
color-m4-dark-mode
color-r4-dark-mode
color-g4-dark-mode
color-g6-dark-mode

Light Tokens

color-background-default
color-separator
color-image-border
color-action-primary
color-action-secondary
color-action-hover
color-action-disabled
color-action-destroy
color-text-default
color-text-secondary
color-text-disabled
color-text-confirmation
color-link-default
color-link-hover
color-link-visited
color-status-confirmation
color-status-attention
color-status-information

Dark Tokens

color-background-default-dark-mode
color-separator-dark-mode
color-image-border-dark-mode
color-action-primary-dark-mode
color-action-secondary-dark-mode
color-action-hover-dark-mode
color-action-disabled-dark-mode
color-action-destroy-dark-mode
color-text-default-dark-mode
color-text-secondary-dark-mode
color-text-disabled-dark-mode
color-text-confirmation-dark-mode
color-link-default-dark-mode
color-link-hover-dark-mode
color-link-visited-dark-mode
color-status-confirmation-dark-mode
color-status-attention-dark-mode
color-status-information-dark-mode

Spacing Tokens

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

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/lightbox-dialog

DS v2.1.0

A lightbox dialog is a modal window spawned by the main web page or application.

<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" hidden role="dialog">
    <div class="lightbox-dialog__window">
        <div class="lightbox-dialog__header">
            <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
        <div class="lightbox-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="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

The lightbox scales vertically and adds scrollbars when content overflows the viewport.

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
    <div class="lightbox-dialog__window lightbox-dialog__window--full">
        <div class="lightbox-dialog__header">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
        <div class="lightbox-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>Lorem ... 1</p>
            <p>Lorem ... 2</p>
            <p>(you get the idea)</p>
            <p>Lorem ... n</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Any lightbox can be transitioned in and out, using the lightbox-dialog__window--fade and lightbox-dialog--mask-fade modifiers.

The default fade duration is 16ms.

<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden role="dialog">
    <div class="lightbox-dialog__window lightbox-dialog__window--fade">
        <div class="lightbox-dialog__header">
            <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
        <div class="lightbox-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="http://www.ebay.com">www.ebay.com</a>
            </p>
        </div>
    </div>
</div>

Call to action buttons can be placed in an optional footer section. They will be aligned to the end of the horizontal axis by default.

<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" hidden role="dialog">
    <div class="lightbox-dialog__window">
        <div class="large-text-1 lightbox-dialog__header">
            <h2 class="large-text-1 bold-text" id="lightbox-dialog-title">Heading</h2>
            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
        <div class="lightbox-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>
        </div>
        <div class="lightbox-dialog__footer">
            <button class="btn">Button 1</button>
            <button class="btn">Button 2</button>
            <button class="btn">Button 3</button>
        </div>
    </div>
</div>

A mini lightbox is used primarily as an infotip for small devices. The dialog must be labelled using aria-label.

<div aria-label="Mini Lightbox Example" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden role="dialog">
    <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
        <div class="lightbox-dialog__header">
            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
        <div class="lightbox-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>
</div>

@ebay/skin/link

DS v1.4.0

The link module itself does not provide any base styling of anchor tags, that styling instead comes from the global module.

Nested Link

When nested amongst paragraphs of text, the anchor tag's default underline gives visual affordance that this selection of text is a hyperlink. The color of the link alone would not be sufficient affordance in this context and therefore the underline is required and must not be removed.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="https://www.ebay.com">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <a href="https://www.ebay.com">ullamco laboris</a> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="https://www.ebay.com">voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>

Nav Link

Nav links are typically used in blocks of navigation within sidebars, allowing the user to navigate the site hierarchy.

Nav links remove the default underline. The "color alone" principle mentioned above is not violated, because in this context there are other visual affordances (e.g. heading, placement, spacing and surrounding elements) that these elements are interactive.

<nav aria-labelledby="nav-link-heading" role="navigation">
    <h2 id="nav-link-heading">Navigation</h2>
    <ul>
        <li><a class="nav-link" href="#link1">Link 1</a></li>
        <li><a class="nav-link" href="#link2">Link 2</a></li>
        <li><a class="nav-link" href="#link3">Link 3</a></li>
        <li><a class="nav-link" href="#link4">Link 4</a></li>
        <li><a class="nav-link" href="#link5">Link 5</a></li>
    </ul>
</nav>

Fake Link

To style a button to look like a link, use the fake-link class.

<button class="fake-link" type="button">Button</button>

@ebay/skin/listbox

DS v1.2.0

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.

<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-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</span>

Selected Listbox

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

<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-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="true">
            <span class="listbox__value">Option 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</div>

@ebay/skin/listbox-button

DS v1.2.0

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.

<span class="listbox-button">
    <button class="expand-btn" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Color: -</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Blue</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Yellow</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Green</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

For a floated "label", which will appear above the value when selected, use the .expand-btn--floating-label and .expand-btn__floating-label modifiers.

<span class="listbox-button">
    <button class="expand-btn expand-btn--floating-label" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__floating-label">Color</span>
            <span class="expand-btn__text"></span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Blue</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Yellow</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Green</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Selected Listbox Button

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

<span class="listbox-button">
    <button class="expand-btn" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Color: Blue</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Yellow</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Green</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

The following example shows the "floated label" version with an initial selection.

<span class="listbox-button">
    <button class="expand-btn expand-btn--floating-label" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__floating-label">Color:</span>
            <span class="expand-btn__text">Blue</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Yellow</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Green</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Borderless

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

<span class="listbox-button">
    <button class="expand-btn expand-btn--borderless" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Quantity</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">2</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">3</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</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/menu

DS v1.2.0

A menu is not a form control. If you wish to submit form data natively, without JavaScript, please consider checkbox, combobox, select, or radio instead.

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu.

NOTE: Only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit our menu pattern.

The default menu is a stateless menu. Each item has a role of menuitem.

<div class="menu">
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 2</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 3</span>
        </div>
    </div>
</div>

A menu item can be badged using the badge module.

The menuitem element requires an additional menu__item--badged modifier.

<span class="menu">
    <div class="menu__items" role="menu">
        <div aria-label="Item 1 (3 notifications)" class="menu__item menu__item--badged" role="menuitem">
            <span aria-hidden="true">Item 1<span class="badge">3</span></span>
        </div>
        <div aria-label="Item 2 (77 notifications)" class="menu__item menu__item--badged" role="menuitem">
            <span aria-hidden="true">Item 2<span class="badge">77</span></span>
        </div>
        <div class="menu__item menu__item--badged" role="menuitem">
            <span>Item 3</span>
        </div>
    </div>
</span>

For single-select state, use role menuitemradio on each menu item.

<div class="menu">
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemradio" aria-checked="true">
            <span>Item 1</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Item 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Item 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</div>

For multi-select state, use role menuitemcheckbox on each menu item.

<div class="menu">
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
            <span>Item 1</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
            <span>Item 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
            <span>Item 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</div>

Menu items can be separated into groups, using the hr tag.

<div class="menu">
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1</span>
        </div>

        <hr class="menu__separator" role="separator" />

        <div class="menu__item" role="menuitemradio" aria-checked="true" data-makeup-group="sort">
            <span>Item B1</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
            <span>Item B2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
            <span>Item B3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>

        <hr class="menu__separator" role="separator" />

        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" data-menuitemcheckbox-name="sort">
            <span>Item 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" data-menuitemcheckbox-name="sort">
            <span>Item 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</div>

A fake menu is simply a list of links, styled to look like ARIA menu items.

<div class="fake-menu">
    <ul class="fake-menu__items">
        <li>
            <a class="fake-menu__item" href="http://www.ebay.com" aria-current="page">
                <span>Link 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 2</a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 3</a>
        </li>
    </ul>
</div>

@ebay/skin/menu-button

DS v1.2.0

A menu button follows the principal of progressive disclosure, it keeps secondary commands hidden from view until needed.

A menu is not a form control. If you wish to submit form data natively, without JavaScript, please consider checkbox, combobox, select, or radio instead.

The default menu button opens a stateless menu. Each item has a role of menuitem.

<span class="menu-button">
    <button class="btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 1</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 2</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 3</span>
            </div>
        </div>
    </div>
</span>

For all menu buttons, the overlay becomes automatically scrollable when its height reaches 400px.

For single-select state, use role menuitemradio on each menu item.

<span class="menu-button">
    <button class="btn btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitemradio" aria-checked="true">
                <span>Menu Item 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemradio" aria-checked="false">
                <span>Menu Item 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemradio" aria-checked="false">
                <span>Menu Item 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

For multi-select state, use role menuitemcheckbox on each menu item.

<span class="menu-button">
    <button class="btn btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" height="10" width="14">
                <span>Menu Item 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" height="10" width="14">
                <span>Menu Item 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="false" height="10" width="14">
                <span>Menu Item 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

By default, the text of any button acts as its accessible label. The accessible label must at all times reflect the purpose of the button. If the text only conveys a transient value, then the criteria would not be satisfied.

The simplest scenario in which to satisfy the criteria is a fixed label, i.e. the button text never changes. For example: "Menu", "Options", "Edit".

If a fixed label is not possible, the button's inner text can potentially be written as a key/value pair, where key denotes purpose and value repesents the current selection. This is most typical in a single select menu button. For example: "Sort: Price", "Color: Red". This technique is identical to the method used by Listbox Button.

Finally, we can also consider using aria-labelledby to stitch together an additional, external element - therefore creating a compound label.

Menu button items can be separated into groups, using the hr tag.

<span class="menu-button">
    <button class="btn btn-secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item A1</span>
            </div>

            <hr class="menu-button__separator" role="separator" />

            <div class="menu-button__item" role="menuitemradio" aria-checked="true">
                <span>Menu Item B1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemradio" aria-checked="false">
                <span>Menu Item B2</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemradio" aria-checked="false">
                <span>Menu Item B3</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>

            <hr class="menu-button__separator" role="separator" />

            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                <span>Menu Item C1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                <span>Menu Item C2</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

At first glance, a fake menu button appears to be a normal menu button component, but it contains a list of hyperlinks and thus behaves more like a navigational component.

Use the aria-current attribute to denote the link that matches the current page URL (if applicable).

A valid href attribute is required for all anchor tags (a value of "javascript" is not valid!) The button tag is also supported (as demonstrated in the following example) if JavaScript behaviour is required alongside items with navigation behaviour.

<span class="fake-menu-button">
    <button class="btn btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <ul class="fake-menu-button__menu">
        <li>
            <a class="fake-menu-button__item" href="http://www.ebay.com" aria-current="page">
                <span>Link 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="10" width="14" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu-button__item">
                <span>Link 2<span>
            </a>
        </li>
        <li>
            <button class="fake-menu-button__item" type="button">
                <span>Button 3<span>
            </button>
        </li>
        <li>
            <button class="fake-menu-button__item" type="button">
                <span>Button 4<span>
            </button>
        </li>
    </ul>
</span>

Use the menu-button__menu--fix-width or fake-menu-button__menu--fix-width element modifier to fix the width of any menu items to the button width. This is useful in cases where the menu overlay needs to be constrained to the button width, usually to accomodate spacing and layout.

NOTE: Fixed width is currently only available on menu buttons that use a span root tag.

<span class="menu-button">
    <button class="btn btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="btn__cell">
            <span class="btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu menu-button__menu--fix-width">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 1 with a long string</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 2</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 3</span>
            </div>
        </div>
    </div>
</span>

If placing a menu-button alongside a form control (e.g. textbox), you may wish to swap out the nested button with an expand-button, which better matches the look-and-feel of forms.

NOTE: a menu-button is a good candidate for a dropdown of actions that make changes to a form, but it should not be used as a dropdown for selecting and storing form data. Please use select or listbox-button for that purpose instead.

<span class="menu-button">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 1</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 2</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 3</span>
            </div>
        </div>
    </div>
</span>

Use the expand-btn--borderless element modifier on the expand button to allow for a borderless version of the expand button.

<span class="menu-button">
    <button class="expand-btn expand-btn--borderless" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Button</span>
            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <div class="menu-button__menu">
        <div class="menu-button__items" role="menu">
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 1</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 2</span>
            </div>
            <div class="menu-button__item" role="menuitem">
                <span>Menu Item 3</span>
            </div>
        </div>
    </div>
</span>

@ebay/skin/page-grid ^BETA

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. The following CSS shows the grid layout of the Skin website itself.

@media only screen and (min-width: 320px){
    nav {
        display: none;
    }

    main {
        grid-area: ~"1 / 1 / span 1 / span 8";
    }

    footer {
        grid-area: ~"2 / 1 / span 1 / span 8";
    }
}

@media only screen and (min-width: 600px) {
    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";
    }
}

@media only screen and (min-width: 968px) {
    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.

Nested Grids

Obviously, this top-level page grid only gets us so far. How do we align the deeper nested elements and their content to our grid system?

Watch this space for more information on how to create nested grids (with and without CSS Subgrid support).

@ebay/skin/page-notice

DS v1.3.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" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
            <use xlink:href="static/common/icons.svg#icon-confirmation-filled"></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" focusable="false" height="24" width="24" role="img" aria-label="Attention">
            <use xlink:href="static/common/icons.svg#icon-attention-filled"></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" focusable="false" height="24" width="24" role="img" aria-label="Information">
            <use xlink:href="static/common/icons.svg#icon-information-filled"></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>

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" focusable="false" height="24" width="24" role="img" aria-label="Attention">
            <use xlink:href="static/common/icons.svg#icon-attention-filled"></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/pagination

DS v1.1.0

Pagination allows a user to navigate back and forth through a URL based dataset, or jump directly to any specific URL in that set.

The pagination set has a maximum of seven items. An item can be a page number or an overflow element (see next section).

Traditional MPA pagination uses links to reload the entire page when clicked. For SPAs, this default click event behaviour can be prevented with JavaScript (aria-live should also be set from "off" to "on").

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="off" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-prev"></use>
        </svg>
    </a>
    <ol class="pagination__items">
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=6" class="pagination__item">6</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=7" class="pagination__item">7</a>
        </li>
    </ol>
    <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-next"></use>
        </svg>
    </a>
</nav>

Anchor tags can be replaced with buttons if the result set is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!

Overflow Rules for Pagination

A leading and/or trailing overflow element may occupy a slot in the pagination if the total number of pages is greater than seven.

This overflow element can be a static icon (see below) or an interactive menu button (see next section).

<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="off" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-prev"></use>
        </svg>
    </a>
    <ol class="pagination__items">
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
        </li>
        <li>
            <span class="pagination__item" role="separator">
                <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
                    <use xlink:href="#icon-overflow"></use>
                </svg>
            </span>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">80</a>
        </li>
    </ol>
    <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-next"></use>
        </svg>
    </a>
</nav>

In the following example, the first overflow slot is occupied.

Our last example shows both overflow slots occupied.

Overflow Control for Pagination

A static overflow icon provides no mechanism to jump to any page that is not immediately available in the pagination's current view. This mechanism can either be deferred to another control outside of the pagination (e.g. a menu button) or, as described in this section, the static overflow icon can be switched out for a fake menu button.

<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="off" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-prev"></use>
        </svg>
    </a>
    <ol class="pagination__items">
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
        </li>
        <li>
            <span class="pagination__item">
                <span class="fake-menu-button">
                    <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
                        <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
                            <use xlink:href="#icon-overflow"></use>
                        </svg>
                    </button>
                    <ul class="fake-menu-button__menu">
                        <li>
                            <a class="fake-menu-button__item" href="http://www.ebay.com">
                                <span>6</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.ebay.com" class="fake-menu-button__item">
                                <span>7<span>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.ebay.com" class="fake-menu-button__item">
                                <span>8<span>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.ebay.com" class="fake-menu-button__item">
                                <span>9<span>
                            </a>
                        </li>
                    </ul>
                </span>
            </span>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">10</a>
        </li>
    </ol>
    <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-next"></use>
        </svg>
    </a>
</nav>

@ebay/skin/panel-dialog

DS v2.1.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" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></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="http://www.ebay.com">www.ebay.com</a></p>
        </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">
            <button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
            <h2 id="dialog-title" class="panel-dialog__title panel-dialog__title--center large-text-1 bold-text">Heading</h2>
            <button class="fake-link panel-dialog__reset" type="button">Reset</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="http://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" focusable="false" height="16" width="16">
                    <use xlink:href="#icon-close"></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="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

@ebay/skin/program-badge

DS v1.0.0

Each program badge is available as an SVG symbol.

authenticity-guaranteed
click-to-call
escrow
free-warranty
money-back-guarantee-chf
money-back-guarantee-eu
money-back-guarantee-uk
money-back-guarantee-us
money-back-guarantee-zl
top-rated-seller
ebay-plus
vault

Below is the code example for how to use the "program-badge-authenticity-guaranteed" symbol. Please refer to the icon section for full guidance on how to include and use SVG symbols.

<svg role="img" aria-label="Authenticity Guaranteed Program" class="program-badge program-badge--authenticity-guaranteed" focusable="false" height="24" width="24">
    <use xlink:href="#program-badge-authenticity-guaranteed"></use>
</svg>

@ebay/skin/progress-bar

DS v3.1.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.

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

@ebay/skin/progress-spinner

DS v3.1.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" focusable="false">
        <use xlink:href="#icon-spinner"></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-large" focusable="false">
        <use xlink:href="#icon-spinner-large"></use>
    </svg>
</span>

@ebay/skin/progress-stepper

DS v3.1.1

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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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 progress-stepper__item--current" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="current"></span>
            </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 progress-stepper__item--upcoming" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="upcoming"></span>
            </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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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 progress-stepper__item--current" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="current"></span>
            </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 progress-stepper__item--upcoming" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="upcoming"></span>
            </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

Order total $220

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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></use>
                </svg>
            </span>
            <span class="progress-stepper__text">
                <h3>Order placed</h3>
                <p>New Mens Addidas Ultra Boost</p>
                <p>Order total $220</p>
            </span>
        </div>
        <hr class="progress-stepper__separator" role="presentation" />
        <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="2">2</span>
            </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 progress-stepper__item--upcoming" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="current"></span>
            </span>
            <span class="progress-stepper__text">
                <h3>Delivered</h3>
                <p>Guaranteed Wednesday, October 09.</p>
            </span>
        </div>
    </div>
</div>

Stepper with info or error

To use to an "information" or "attention" state, use the relevant stepper__item--information or stepper__item--attention modifier class.

Shipment Progress

Started

July 3rd

On Hold

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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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--current progress-stepper__item--information" role="listitem">
                <span class="progress-stepper__icon">
                    <svg role="img" aria-label="issue" class="icon" focusable="false" height="24" width="24">
                        <use xlink:href="#icon-stepper-information"></use>
                    </svg>
                </span>
                <span class="progress-stepper__text">
                    <h4>On Hold</h4>
                    <p>July 5th</p>
                </span>
            </div>
        <hr class="progress-stepper__separator" role="presentation" />
        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="upcoming"></span>
            </span>
            <span class="progress-stepper__text">
                <h4>Delivered</h4>
                <p>July 6th</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 progress-stepper__item--confirmation" role="listitem">
            <span class="progress-stepper__icon">
                <svg role="img" aria-label="complete" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-confirmation"></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" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-stepper-attention"></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 progress-stepper__item--upcoming" role="listitem">
            <span class="progress-stepper__icon">
                <span role="img" aria-label="upcoming"></span>
            </span>
            <span class="progress-stepper__text">
                <h4>Delivered</h4>
                <p>July 6th</p>
            </span>
        </div>
    </div>
</div>

@ebay/skin/radio

DS v1.2.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" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-radio-checked"></use>
        </svg>
    </span>
</span>

Large Radio

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

<span class="radio radio--large">
    <input class="radio__control" type="radio" />
    <span class="radio__icon" hidden>
        <svg class="radio__unchecked" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-radio-unchecked-large"></use>
        </svg>
        <svg class="radio__checked" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-radio-checked-large"></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" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
            <use xlink:href="#icon-radio-checked"></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 Option 1 Option 2 Option 3

<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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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

Option 1

Option 2

Option 3

<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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-unchecked"></use>
                </svg>
                <svg class="radio__checked" focusable="false" height="18" width="18" aria-hidden="true">
                    <use xlink:href="#icon-radio-checked"></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 v1.2.0

A section notice conveys the next course of action for a task or flow within the context of a page section.

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

A section notice may have the following status: general (default), confirmation, attention or information.

Your price has been updated.

Add required aspect to keep item live.

Send offers to interested buyers.

<section class="section-notice" role="region" aria-label="Notice" aria-roledescription="Notice">
    <div class="section-notice__main">
        <h3 class="section-notice__title">Your price has been updated.</h3>
    </div>
    <div class="section-notice__footer">
        <a href="https://www.ebay.com">Dismiss</a>
    </div>
</section>

<section class="section-notice section-notice--confirmation" role="region" aria-label="Confirmation" aria-roledescription="Notice">
    <div class="section-notice__header" id="section-notice-confirmation">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </div>
    <div class="section-notice__main">
        <h3 class="section-notice__title">Your price has been updated.</h3>
    </div>
    <div class="section-notice__footer">
        <a href="https://www.ebay.com">Dismiss</a>
    </div>
</section>

<section class="section-notice section-notice--attention" role="region" aria-label="Attention" aria-roledescription="Notice">
    <div class="section-notice__header" id="section-notice-attention">
        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" aria-label="Attention">
            <use xlink:href="#icon-attention-filled"></use>
        </svg>
    </div>
    <div class="section-notice__main">
        <h3 class="section-notice__title">Title copy goes here</h3>
    </div>
    <div class="section-notice__footer">
        <button class="fake-link">Action</button>
    </div>
</section>

<section class="section-notice section-notice--information" role="region" aria-label="Information" aria-roledescription="Notice">
    <div class="section-notice__header" id="section-notice-information">
        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" aria-label="Information">
            <use xlink:href="#icon-information-filled"></use>
        </svg>
    </div>
    <div class="section-notice__main">
        <h3 class="section-notice__title">Send offers to interested buyers.</h3>
    </div>
    <div class="section-notice__footer">
        <button class="fake-link">Send offers</button>
    </div>
</section>

@ebay/skin/section-title

DS v1.1.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.

Today’s Deals – All With Free Shipping

<div class="section-title">
    <div class="section-title__title-container">
        <h2 class="section-title__title">Today’s Deals – All With Free Shipping</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.

Today’s Deals – All With Free Shipping

Plus, guaranteed best prices.

<div class="section-title">
    <div class="section-title__title-container">
        <h2 class="section-title__title">Today’s Deals – All With Free Shipping</h2>
        <span class="section-title__subtitle">Plus, guaranteed best prices.</span>
    </div>
</div>

Linked Section Title

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

Today’s Deals – All With Free Shipping

<div class="section-title">
    <div class="section-title__title-container">
        <h2 class="section-title__title">
            <a href="https://www.ebay.com">Today’s Deals – All With Free Shipping</a>
            <svg class="icon icon--arrow-right-extra-small" focusable="false" height="10" width="10" aria-hidden="true">
                <use xlink:href="icons.svg#icon-arrow-right-extra-small"></use>
            </svg>
        </h2>
    </div>
</div>

Infotip Section Title

An infotip supports any required legal text.

Today’s Deals – All With Free Shipping

Infotip

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

<div class="section-title">
    <div class="section-title__title-container">
        <h2 class="section-title__title">Today’s Deals – All With Free Shipping</h2>
    </div>
    <div class="section-title__info">
        <span class="infotip">
            <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
                <svg aria-hidden="true" class="icon icon--information" focusable="false" width="24" height="24">
                    <use xlink:href="#icon-information"></use>
                </svg>
            </button>
            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
                <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" focusable="false" height="24" width="24" aria-hidden="true">
                                <use xlink:href="#icon-close"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </span>
    </div>
</div>

Overflow Section Title

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

Today’s Deals – All With Free Shipping

<div class="section-title">
    <div class="section-title__title-container">
        <h2 class="section-title__title">Today’s Deals – All With Free Shipping</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" focusable="false" width="24" height="24" aria-hidden="true">
                    <use xlink:href="#icon-overflow"></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/select

DS v1.2.0

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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
        <use xlink:href="#icon-dropdown"></use>
    </svg>
</span>

@ebay/skin/signal

DS v1.0.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/snackbar-dialog

DS v1.0.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.0

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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></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.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.

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" focusable="false" height="12">
    <use xlink: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).

<div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
    <svg class="star-rating__icon" focusable="false" height="12" width="12" aria-hidden="true">
        <use xlink:href="static/common/icons.svg#icon-star-dynamic"></use>
    </svg>

    <svg class="star-rating__icon" focusable="false" height="12" width="12" aria-hidden="true">
        <use xlink:href="static/common/icons.svg#icon-star-dynamic"></use>
    </svg>

    <svg class="star-rating__icon" focusable="false" height="12" width="12" aria-hidden="true">
        <use xlink:href="static/common/icons.svg#icon-star-dynamic"></use>
    </svg>

    <svg class="star-rating__icon" focusable="false" height="12" width="12" aria-hidden="true">
        <use xlink:href="static/common/icons.svg#icon-star-dynamic"></use>
    </svg>

    <svg class="star-rating__icon" focusable="false" height="12" width="12" aria-hidden="true">
        <use xlink:href="static/common/icons.svg#icon-star-dynamic"></use>
    </svg>
</div>

@ebay/skin/star-rating-select

DS v1.0.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" name="radio-star-rating-select" value="1">
            <span class="star-rating-select__radio-icon">
                <svg focusable="false" height="12" width="12" aria-hidden="true">
                    <use xlink: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" name="radio-star-rating-select" value="2">
            <span class="star-rating-select__radio-icon">
                <svg focusable="false" height="12" width="12" aria-hidden="true">
                    <use xlink: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" name="radio-star-rating-select" value="3">
            <span class="star-rating-select__radio-icon">
                <svg focusable="false" height="12" width="12" aria-hidden="true">
                    <use xlink: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" name="radio-star-rating-select" value="4">
            <span class="star-rating-select__radio-icon">
                <svg focusable="false" height="12" width="12" aria-hidden="true">
                    <use xlink: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" name="radio-star-rating-select" value="5">
            <span class="star-rating-select__radio-icon">
                <svg focusable="false" height="12" width="12" aria-hidden="true">
                    <use xlink: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" name="radio-star-rating-select" value="1">
        <span class="star-rating-select__radio-icon">
            <svg focusable="false" height="12" width="12" aria-hidden="true">
                <use xlink: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" name="radio-star-rating-select" value="2">
        <span class="star-rating-select__radio-icon">
            <svg focusable="false" height="12" width="12" aria-hidden="true">
                <use xlink: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" name="radio-star-rating-select" value="3">
        <span class="star-rating-select__radio-icon">
            <svg focusable="false" height="12" width="12" aria-hidden="true">
                <use xlink: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" name="radio-star-rating-select" value="4">
        <span class="star-rating-select__radio-icon">
            <svg focusable="false" height="12" width="12" aria-hidden="true">
                <use xlink: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" name="radio-star-rating-select" value="5">
        <span class="star-rating-select__radio-icon">
            <svg focusable="false" height="12" width="12" aria-hidden="true">
                <use xlink: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 v1.2.0

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

<style>
    .switch--theme-1 {
        --switch-unchecked-background-color: orange;
        --switch-checked-background-color: green;
    }

    @media (prefers-color-scheme: dark) {
        .switch--theme-1 {
            --switch-unchecked-background-color: blue;
            --switch-checked-background-color: red;
        }
    }
</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.0

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.

Tab 1

Tab 2

Tab 3

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.

<div class="fake-tabs">
    <ul class="fake-tabs__items">
        <li class="fake-tabs__item">
            <a aria-current="page" href="http://www.ebay.com">Page 1</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://www.ebay.com">Page 2</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://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.0.3

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--messages" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="#icon-messages"></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--clear" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="#icon-clear"></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" focusable="false" width="16" height="16">
            <use xlink:href="#icon-clear"></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" focusable="false" width="16" height="16" aria-hidden="true">
        <use xlink:href="#icon-search"></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" focusable="false" width="16" height="16">
            <use xlink:href="#icon-clear"></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.0

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" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-close"></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" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-close"></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/tooltip

DS v1.1.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" focusable="false" height="16" width="16" aria-hidden="true">
            <use xlink:href="#icon-settings"></use>
        </svg>
    </button>
    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 12px); left: 0">
        <span class="tooltip__pointer tooltip__pointer--bottom-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>

The tooltip pointer modifier supports 8 different positions. In clockwise order, moving around the interactive element that is being pointed at, they are: bottom, bottom-left, left, top-left, top, top-right, right, bottom-right.

<span class="tooltip">
    <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="false" aria-label="Info">
        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
            <use xlink:href="#icon-settings"></use>
        </svg>
    </button>
    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="bottom: -4px; left: calc(100% + 12px)">
        <span class="tooltip__pointer tooltip__pointer--left"></span>
        <div class="tooltip__mask">
            <div class="tooltip__cell">
                <div class="tooltip__content">
                    <p>Pointer Left</p>
                </div>
            </div>
        </div>
    </div>
</span>

@ebay/skin/tourtip

DS v1.1.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.

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 tourtip__pointer--top"></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" focusable="false" height="24" width="24" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

@ebay/skin/typography

DS v1.1.0

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

About

Install

Bundling

Webpack

Lasso.js

Flags

Webpack Setup

Lasso.js Setup

CDN

Themes

Legacy Theme

Square Corner Theme

Animation

Dialog Transitions

@ebay/skin/alert-dialog

@ebay/skin/badge

@ebay/skin/breadcrumbs

@ebay/skin/button

Default Button

Large Button

Primary Button

Secondary Button

Tertiary Button

Delete Button

Disabled Button

Partially Disabled Button

Destructive Button

Primary Destructive Button

Secondary Destructive Button

Tertiary Destructive Button

Adjacent Icon Button

Busy State for Button

Flexible Button

Fixed Height Button

Constrained Width Button

Fixed Width and Height Button

@ebay/skin/carousel

Continuous Carousel

Slide Carousel

Top Products - Slide 1 of 2

Slideshow Carousel

Top Products - Slide 1 of 4

@ebay/skin/checkbox

Default Checkbox

Mixed Checkbox

Large Checkbox

Disabled Checkbox

Grouped Checkboxes

@ebay/skin/color

@ebay/skin/combobox

Default Combobox

Disabled Combobox

@ebay/skin/confirm-dialog

@ebay/skin/cta-button

@ebay/skin/dark-mode

@ebay/skin/details

Default Details

Opened Details

Centered Details

Small Details

RTL Details

@ebay/skin/drawer-dialog

@ebay/skin/fullscreen-dialog

Sliding Fullscreen Dialog

@ebay/skin/eek

@ebay/skin/expand-button

Disabled Expand Button

Minimal Expand Button

@ebay/skin/field

Unstacked Field

Stacked Field

Field Font-Size

Disabled Field

Readonly Field

Required Field

Invalid Field

Field Description

Text on Side of Field

Text Below Stacked Field

Text Above or Below Unstacked Field