eBay Skin (DS6)

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

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

Bundling

Skin supports Webpack and Lasso.js.

Webpack

Add @ebay/skin, @ebay/browserslist-config as dependencies and less, less-loader as dev dependencies to package.json.

{
    "dependencies": {
        "@ebay/browserslist-config": "^1",
        "@ebay/skin": "^10",
    },
    "devDependencies": {
        "less": "^3",
        "less-loader": "^5"
    }
}

Now in your webpack configuration do:

module.exports = {
    module: {
        rules: [
        {
            test: /\.less$/,
            loader: 'less-loader', // compiles Less to CSS
        },
        ],
    },
};

Usage

import "@ebay/skin/button.less";

You can also leverage webpack's webpack-resolver:

import "~@ebay/skin/button.less";

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 design system versions.

DS6 is the current design system but you can access older design system using flags. For example, you can access the older ds4 design system using ds-4 flag.

Webpack SetUp

If you need to pull in the flags, we should install and configure arc-webpack

yarn add -D arc-webpack

Do the following in your webpack config:

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

Lasso.js SetUp

To opt into DS4, 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>

IMPORTANT: All modules have identical markup, whichever design system is chosen; however, not all LESS variables and mixins are supported in both systems, therefore be sure to reference the appropriate documentation.

CDN

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

https://ir.ebaystatic.com/cr/v/c1/skin/v10.4.0/ds6/skin.min.css

@ebay/skin/actionable

DS6.v1.01

Actionable Icon

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="#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="#icon-settings"></use>
    </svg>
</a>

Actionable Image

Use the img-btn class (for buttons) or the img-link class (for links) to create an actionable image-tile effect on hover, focus and active states.

<button type="button" class="img-btn">
    <img src="https://i2.ebayimg.com/images/g/e0oAAOSwsN9W~YBY/s-l200.jpg" alt="iPhone" />
</button>
<a href="http://www.ebay.com/sch/i.html?_nkw=iphone" class="img-link">
    <img src="https://i2.ebayimg.com/images/g/e0oAAOSwsN9W~YBY/s-l200.jpg" alt="iPhone" />
</a>

@ebay/skin/badge

DS6.5.v1.01

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.

Default Badge

The default badge contains the basic, base styles. A role and aria-label are added for assistive technology.

<span class="badge" role="img" aria-label="1 notification">1</span>

Actionable Badge

A badge can be placed inside of an actionable icon button or icon link and it will receive the appropriate positioning. Note that the aria-label is now moved to the button or anchor tag.

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

<button aria-label="Menu (4 notifications)" class="icon-btn icon-btn--badged" type="button">
    <svg class="icon icon--menu" focusable="false" width="24" height="24" aria-hidden="true">
        <use xlink:href="#icon-menu"></use>
    </svg>
    <span aria-hidden="true" class="badge">4</span>
</button>

A badge can be placed inside of a menu item and it will receive the appropriate margin. Note that the aria-label is now moved to the menuitem role.

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

@ebay/skin/drawer

DS6.5.v1.01

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__window--expanded modifier class. This class should be added with JavaScript when scrolling the content or clicking the handle button.

<div aria-labelledby="drawer-title" aria-modal="true" class="drawer" hidden role="dialog">
    <div class="drawer__window">
        <div class="drawer__window drawer__window--slide">
            <button aria-label="Expand Dialog" class="drawer__handle" type="button"></button>
            <div class="drawer__header">
                <h2 id="drawer-title" class="large-text-1 bold-text">Heading</h2>
                <button aria-label="Close dialog" class="drawer__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__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/breadcrumbs

DS6.5.v1.01

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>

When performing client side navigation prefer using buttons instead of links like so.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li>
            <button>ebay</button>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <button>Cell Phones, Smart Watches &amp; Accessories</button>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <button>Smart Watch Accessories</button>
            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <button aria-current="location">Smart Watch Bands</button>
        </li>
    </ul>
</nav>

@ebay/skin/button

DS6.5.v1.01

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.

Primary Button

Use the primary block 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 block 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>

Delete Button

Use the delete block 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>

Remove the href attribute to fully disable an anchor tag.

Primary Link Secondary Link

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

Partially Disabled Button

Partially disabled buttons are visually and aurally identifiable as disabled, but remain keyboard focusable.

Partially disabled buttons can vastly simplify keyboard focus management logic in situations where the button may frequently toggle back and forth between enabled and disabled (e.g. pagination or carousel "paddles").

The aria-disabled state is required for partially disabled buttons.

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

Fluid Button

Use the btn--fluid modifier to fill the entire width of the parent element.

<button class="btn btn--primary btn--fluid" type="button">Button</button>

Large Button

Use the btn--large size modifier to create a large button style.

Large Link

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

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>

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>

Fixed Width Button

Button text will begin to wrap naturally once the button grows to 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 fixed 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

DS6.5 R1

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

DS6.5 v1.1

A checkbox is a form control that allows the user to toggle a choice on or off.

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

Large Checkbox

Small screens should use the larger #icon-checkbox-unchecked-large and #icon-checkbox-checked-large icons.

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

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.

TIP: 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>
    <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">
                    <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>
        <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">
                    <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>
        <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">
                    <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>
        <label class="field__label field__label--end" for="group-checkbox-3">Option 3</label>
    </span>
</fieldset>

@ebay/skin/color

DS6.v2.01

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

color-text-default
color-text-secondary, color-action-secondary
color-text-disabled
color-image-border, color-divider
color-background-default
color-action-primary
color-action-hover
color-action-visited
color-confirmation-text
color-attention-text, color-action-destroy

@ebay/skin/combobox

DS6.v1.01

An enhanced textbox that allows its value to be constructed via manual text entry, selection from a list of options, or a combination of both (i.e. select an option then type more text); hence the term 'combo', because it is a combination of a textbox and a listbox.

NOTE: A combobox can be further enhanced with autocomplete behaviour. For detailed behaviour requirements, and variants, please visit the eBay MIND Pattern for Combobox.

Default Combobox

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

<span class="combobox">
    <span class="combobox__control">
        <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
        <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="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>

Overflow Combobox

The combobox overlay becomes automatically scrollable at a height of 400px.

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="listbox2" 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="listbox2" 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>

Readonly Combobox

A readonly combobox is intended for use as a custom implementation of the native HTML select element. Unlike the default combobox, its options do have state. Notice that an additional span element is required within each option to host the status icon.

Unfortunately, a readonly combobox exhibits some UX issues on iOS, which is why for now we recommend using the listbox instead.

Apply the combobox--readonly modifier and readonly input property to create a readonly combobox.

By default, the textbox value should match the first option if the user does not specify a selection. This matches the behaviour of a native HTML select element.

<span class="combobox combobox--readonly">
    <span class="combobox__control">
        <input role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-owns="listbox4" readonly />
        <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="listbox4" class="combobox__options" role="listbox">
            <div class="combobox__option" role="option">
                <span class="combobox__value">Option 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="combobox__option" role="option">
                <span class="combobox__value">Option 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="combobox__option" role="option">
                <span class="combobox__value">Option 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Actionable Combobox

In some cases, the suggestion overlay might be controlled by a button. Use an actionable icon-btn and the combobox__control--actionable modifier.

<span class="combobox">
    <span class="combobox__control combobox__control--actionable">
        <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
        <button class="icon-btn" type="button" aria-label="Expand Suggestions">
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </button>
    </span>
    <div class="combobox__listbox">
        <div id="listbox5" 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/cta-button

DS6.5.v1.01

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

Default

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>

Blue Background

Link

<a class="cta-btn cta-btn--b4" href="http://www.ebay.com">
    <span class="fake-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>

Red Background

Link

<a class="cta-btn cta-btn--r4" 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/details

DS6.v1.01

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

DS6.5.v1.02

A dialog is a child window spawned by the main web page or application. This window forms a new background layer in our design system topography.

A dialog must remain in a hidden state for all users and devices until called upon.

The h2 tag inside the .dialog__header will become the title. The close button will appear either on left or right depending if it comes before or after the heading

All dialogs require a visible close button.

Default Dialog

The default dialog is a lightbox.

The lightbox will have a margin of 15vh and automatically scales vertically.

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog" hidden role="dialog">
    <div class="dialog__window">
        <div class="dialog__header">
            <button aria-label="Close dialog" class="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-default" class="large-text-1 bold-text">Heading</h2>
        </div>
        <div class="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>

Fill Dialog

Apply the dialog__window--fill modifier to have the lightbox fill at least 70% of the screen (centered vertically).

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog" hidden role="dialog">
    <div class="dialog__window dialog__window--fill">
        <div class="dialog__header">
            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

Left Panel Dialog

Apply the dialog__window--left modifier to have the dialog act as a left side panel (100vh height and aligned to the left side of the screen).

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog" hidden role="dialog">
    <div class="dialog__window dialog__window--left">
        <div class="dialog__header">
            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

Right Panel Dialog

Apply the dialog__window--right modifier to have the dialog act as a right side panel (100vh height and aligned to the right side of the screen).

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog" hidden role="dialog">
    <div class="dialog__window dialog__window--right">
        <div class="dialog__header">
            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

Dialog with Footer

Add a dialog footer in ordder to have a footer shown at bottom where you can add buttons

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
    <div class="dialog__window dialog__window--full">
        <button aria-label="Close dialog" class="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 class="dialog__main">
            <div id="dialog-title-fade-1" class="large-text-1 dialog__header">
                <button aria-label="Close dialog" class="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>
            <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>

Fullscreen Panel Dialog

Apply the dialog__window--full modifier to have the dialog take up the entire viewport.

Having a mask on a fullscreen dialog doesn't typically make sense and can cause the animations to look a bit strange. You can disable the default background mask of the dialog by applying the dialog--no-mask modifier on the dialog element.

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
    <div class="dialog__window dialog__window--full">
        <button aria-label="Close dialog" class="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 class="dialog__main">
            <div id="dialog-title-fade-1" class="large-text-1 dialog__header">
                <button aria-label="Close dialog" class="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>
            <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>

Scrolling Panel Dialog

When you have a lot of content, the dialog will automatically handle scrolling for your.

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
    <div class="dialog__window dialog__window--full">
        <div class="dialog__header">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

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 });
    }));
});

Fade Transition

Any dialog window and mask can be faded in and out, using the dialog__window--fade modifier on the dialog__window and a dialog--mask-fade modifier on the dialog.

The default fade duration is 16ms.

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--mask-fade" hidden role="dialog">
    <div class="dialog__window dialog__window--fade">
        <div class="dialog__header">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
    <div class="dialog__window dialog__window--full dialog__window--fade">
        <div class="dialog__header">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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>

Slide Transition

Any panel or fullscreen dialog can slide in and out, using the dialog__window--slide modifier on the dialog__window.

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

<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--mask-fade-slow" hidden role="dialog">
    <div class="dialog__window dialog__window--left dialog__window--slide">
        <div class="dialog__header">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <button aria-label="Close dialog" class="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="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/expand-button

DS6.5.v1.01

Default Expand Button

Use the expand-btn base class on a button that expands and collapses content.

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

Icon Only Expand Button

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

<button class="expand-btn expand-btn--no-text" 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 it's 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 fields in blocks, as per the following example.

Field 1

Field 2

Field 3

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

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

Field Font-Size

The field label will honour any font-size cascade (so be careful if this is not your intention!).

Notice that form controls do not inherit the cascade. This is default browser behaviour.

Field 1 Field 2 Field 3

<span class="field" style="font-size: 18px;">
    <label class="field__label" for="email">Field 1</label>
    <span class="field__control textbox textbox--large">
        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
    </span>
</span>
<span class="field" style="font-size: 18px;">
    <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 class="field" style="font-size: 18px;">
    <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>

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>

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

DS6.5.v1.01

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>

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>

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="true" 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>

@ebay/skin/filter-menu

DS6.5.v1.01

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>

If you need an additional action button (to "apply" or to further handle the present state of the menu) you can add a button immediately after the menu.

<div 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>
    <button type="button" class="filter-menu__footer">Apply</button>
</div>

A form version is also available. It uses the checkbox module to render checkboxes 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

DS6.5.v1.01

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

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

<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">Filter Menu Button</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">Item 1</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">Item 2</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">Item 3</span>
            </div>
        </div>
    </div>
</span>

Set the button's aria-pressed property to true to render in a pressed state.

<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">Filter Menu Button</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">Item 1</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">Item 2</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">Item 3</span>
            </div>
        </div>
    </div>
</span>

The button can be disabled using the disabled property.

    <span class="filter-menu-button">
    <button type="button" class="filter-menu-button__button" aria-pressed="false" disabled>
        <span class="filter-menu-button__button-cell">
            <span class="filter-menu-button__button-text">Filter Menu Button</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 filter-menu-button__checkbox--background"></span>
                <span class="filter-menu-button__text">Item 1</span>
            </div>
            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                <span class="filter-menu-button__checkbox filter-menu-button__checkbox--background"></span>
                <span class="filter-menu-button__text">Item 2</span>
            </div>
            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
                <span class="filter-menu-button__checkbox filter-menu-button__checkbox--background"></span>
                <span class="filter-menu-button__text">Item 3</span>
            </div>
        </div>
    </div>
    </span>

Some use cases for the filter menu require an additional apply or select all/select none type of button. This is accomplished using a footer button with a filter-menu__footer class applied.

<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">Filter Menu Button</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">Item 1</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">Item 2</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">Item 3</span>
            </div>
        </div>
        <button type="button" class="filter-menu__footer">Apply</button>
    </div>
</span>

When a native form is required as part of the filter menu you should 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">Filter Menu Button</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="filter menu form checkbox example option 1" 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">Item 1</span>
                </label>
                <label for="filter-menu-button-checkbox-item-2" class="filter-menu-button__item">
                    <span class="checkbox">
                        <input aria-label="filter menu form checkbox example option 1" 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">Item 2</span>
                </label>
            </div>
            <button type="submit" class="filter-menu__footer">Apply</button>
        </form>
    </span>
</span>

@ebay/skin/global

Global creates a unique look for the eBay brand by defining the style of common elements such as headings, paragraphs, fieldsets, images and links.

Font Family

Applications on Node.js stack will not receive the eBay Market Sans font as the default font. Applications must use the ebay-font loader.

Websites utilising Skin via CDN will have the eBay Market Sans font as the default font.

Paragraph without Market Sans

Paragraph with Market Sans

Link States

The states below are hardcoded for the purpose of this demo.

@ebay/skin/icon

DS6.5.v1.1

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

Before an icon can be used, its symbol must be stamped on the page inside of a hidden SVG block. In future, when we drop support for Internet Explorer, symbols can be included via the SVG module.

<div hidden>
    <svg>
        <symbol id="icon-information" viewBox="0 0 24 24">
            <path fill-rule="evenodd" 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>

The Icons

The table below displays all available icons for the currently selected design system version (DS6). An empty box indicates that the icon is not available, and/or not relevant, to this system.

Append -small, -filled or -filled-small to the icon name to render the correspdonding variant.

NAME	DEFAULT	SMALL	LARGE	FILLED	FILLED-SMALL	FILLED-LARGE
add
arrow-left
arrow-move
arrow-right
arrow-right-bold
attention
bank
bids
calendar
camera
cart
categories
chat
close
chevron-down
chevron-down-bold
chevron-left
chevron-right
chevron-up
chevron-up-bold
clear
clock
confirmation
credit-card
delete
edit
deals
download
event
fast-n-free
filter-gallery
filter-list
filter-single
filter-single-selected
fingerprint
following
information
tablet-condensed-grid
tablet-relaxed-grid
tablet-vertical-split
help
home
location
locked
menu
messages
mic
mobile
mobile-signal
notification
overflow
package
pause
photo-brightness
photo-crop
photo-gallery
photo-gallery-more
photo-rotate
photo-select-all
photo-select-none
play
profile
purchases
red-laser
refresh
remove
save
save-bold
save-selected
search
search-bold
selling
send
settings
share
star-empty
star-filled
star-filled-grey
star-half
star-undefined
store
text-messaging
thumbs-up
thumbs-up-selected
thumbs-down
thumbs-down-selected
tick
top-seller
truck
unlocked
watch
window

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>

Aliased Icons

We provide several aliases for cases where the design systems have diverged in their choice of icon. For example, DS6 uses arrows for pagination, whereas DS4 uses chevrons.

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

@ebay/skin/label

DS6.v1.01

The label module consists of a "floating label" for textbox. 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 textbox__control--underline" 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 textbox__control--underline" id="last-name" type="text" value="Smith" />
    </span>
</span>

Floating Label with Placeholder

The placeholder always remains obscured until the textbox gains focus.

Date Of Birth

<span class="floating-label">
    <label class="floating-label__label" for="dob">Date Of Birth</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="dob" type="text" placeholder="MM/DD/YYYY" />
    </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 textbox__control--underline" id="first-name" type="text" disabled />
    </span>
</span>

Floating Label with Invalid Textbox

Set the aria-invalid property to true to semantically and visually highlight the invalid state.

First Name

<span class="floating-label">
    <label class="floating-label__label" for="first-name">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="first-name" type="text" aria-invalid="true" />
    </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/less

DS6.v2.01

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

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

Typography Mixins

.typography-giant-2();
.typography-giant-1();
.typography-large-2-bold();
.typography-large-2();
.typography-large-2-secondary();
.typography-large-1-bold();
.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();

Grey Color Variables

@color-white (#fff)
@color-grey1 (#f5f5f5)
@color-grey2 (#e5e5e5)
@color-grey3 (#c7c7c7)
@color-grey4 (#a2a2a2)
@color-grey5 (#767676)
@color-grey6 (#41413f)
@color-black (#111820)

Product Color Variables

@color-text-default
@color-text-secondary, @color-action-secondary
@color-text-disabled
@color-image-border, @color-divider
@color-background-default
@color-action-primary
@color-action-hover
@color-action-visited
@color-confirmation-text
@color-attention-text, @color-action-destroy

Palette Color Variables

@color-y1 (#fcf2bd)
@color-y2 (#f7e376)
@color-y3 (#fbcd25)
@color-y4 (#f7b100)
@color-y5 (#e58c02)
@color-y6 (#aa5404)
@color-y7 (#592e13)
@color-o1 (#ffdec7)
@color-o2 (#feb786)
@color-o3 (#ff8559)
@color-o4 (#ff6932)
@color-o5 (#db3c07)
@color-o6 (#b03005)
@color-o7 (#5c1b05)
@color-r1 (#ffd1dd)
@color-r2 (#ffa2b6)
@color-r3 (#ff6383)
@color-r4 (#e62048)
@color-r5 (#c4003a)
@color-r6 (#a00739)
@color-r7 (#680226)
@color-m1 (#fad8f0)
@color-m2 (#f5a0d9)
@color-m3 (#ea5fbc)
@color-m4 (#d11da4)
@color-m5 (#a60d8a)
@color-m6 (#82187c)
@color-m7 (#500750)
@color-b1 (#c5e5fb)
@color-b2 (#93c9ff)
@color-b3 (#659eff)
@color-b4 (#3665f3)
@color-b5 (#382aef)
@color-b6 (#2b0eaf)
@color-b7 (#121258)
@color-t1 (#c2f2ef)
@color-t2 (#71e3e2)
@color-t3 (#1dcbca)
@color-t4 (#02a2ac)
@color-t5 (#01718f)
@color-t6 (#0e4a6c)
@color-t7 (#00364f)
@color-g1 (#ccfdce)
@color-g2 (#9ef4a6)
@color-g3 (#5ee471)
@color-g4 (#3ac952)
@color-g5 (#119c4b)
@color-g6 (#157a40)
@color-g7 (#064d2f)
@color-l1 (#f4fabe)
@color-l2 (#e9f577)
@color-l3 (#c9e43b)
@color-l4 (#accf02)
@color-l5 (#86b300)
@color-l6 (#4b7d06)
@color-l7 (#364f03)

@ebay/skin/link

DS6.5 v1.04

The link module is a bit unusual in that it has no base class; this is because all anchor tags are styled, by default, by the global module.

The default link is used inline, amongst sentences and paragraphs of text. The underline gives visual affordance that this selection of text is a hyperlink. Color alone is not 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>

Action Link

Action links are commonly used within item tiles and provide a means to drill-down into additional aspects such as seller page and reviews.

Current design specifications for web do not have any distinction between action links and common, inline links. But for legacy and future support of action links, developers are encouraged to continue to use the "action-link" class name.

See all 17 Reviews

<a class="action-link" href="https://www.ebay.com">See all 17 Reviews</a>

Nav Link

Nav links remove the default underline and colour. Again, clickability must clearly and easily be perceivable via other visual affordances (e.g. headings, spacing or other such contextual clues).

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

Nav links have :link and :hover state only.

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

To style a button to look like an action link, use the fake-link--action modifier.

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

@ebay/skin/listbox

DS6.v1.01

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

Because this control is custom, its value will not be submitted along with other form data without the assistance of JavaScript.

NOTE: only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit the eBay MIND Pattern for Listbox.

Default

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" 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="8" width="8">
                <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="8" width="8">
                <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="8" width="8">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</span>

Selected State

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

<div class="listbox">
    <div aria-label="Listbox demo" 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="8" width="8">
                <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="8" width="8">
                <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="8" width="8">
                <use xlink:href="#icon-tick-small"></use>
            </svg>
        </div>
    </div>
</div>

@ebay/skin/listbox-button

DS6.v1.01

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, it's value will not be submitted along with other form data without the assistance of JavaScript.

NOTE: only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit the eBay MIND Pattern for Listbox Button.

Default

By default, the first option should be selected if the user does not specify a selection. This matches the behaviour of a native HTML select element.

<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">Option 1</span>
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" 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">Option 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Selected State

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">Option 1</span>
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" 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">Option 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option" aria-selected="true">
                <span class="listbox-button__value">Option 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Borderless

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

<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">Listbox</span>
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" 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">Option 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

Fluid

Apply the listbox-button--fluid modifier to create a fluid listbox.

<span class="listbox-button listbox-button--fluid">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span class="expand-btn__text">Listbox</span>
            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" 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">Option 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="listbox-button__option" role="option">
                <span class="listbox-button__value">Option 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <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

DS6.v1.01

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 the eBay MIND Pattern for Menu.

The default menu is a stateless menu.

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

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="8" width="8" 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="8" width="8" 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="8" width="8" 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="8" width="8" 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="8" width="8" 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="8" width="8" 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__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="menuitemcheckbox" aria-checked="true" data-menuitemcheckbox-name="sort">
                <span>Item 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" 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="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</div>

<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="8" width="8" 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

DS6.v1.01

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.

NOTE: Only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit the eBay MIND Pattern for Menu.

The default menu is a stateless menu.

<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="8" width="8" 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 it's height reaches 400px.

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

<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="8" width="8" 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="8" width="8" 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="8" width="8" 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="8" width="8" 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="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="8" width="8" 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="8" width="8">
                <span>Menu Item 1</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
                <span>Menu Item 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="false" height="8" width="8">
                <span>Menu Item 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
                    <use xlink:href="#icon-tick-small"></use>
                </svg>
            </div>
        </div>
    </div>
</span>

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

<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="8" width="8" 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>
            <hr class="menu-button__separator" role="separator" />
            <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                <span>Menu Item 2</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" 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 3</span>
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" 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="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="8" width="8" 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="8" width="8" 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>

TIP: A fake menu button can contain a mix of anchor tags and button tags.

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="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="8" width="8" 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>

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="8" width="8" 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>

Any menu can use any kind of button hierarchy as defined in the button module (e.g. .expand-btn--primary).

<span class="menu-button">
    <button class="expand-btn expand-btn--primary" 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="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>

<span class="menu-button">
    <button class="expand-btn expand-btn--secondary" 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="8" width="8" aria-hidden="true">
                <use xlink:href="#icon-dropdown"></use>
            </svg>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>

@ebay/skin/notice

DS6.5.v1.01

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.

A notice may appear at the following levels: window, page, section or inline.

Window Notice

A window notice is a message of celebration used when a user has completed something important. It is always the major focus of the window.

It can be used to fill a dialog window on large screens, or to fill the entire screen on small devices.

Your first order has been placed!

You'll get a confirmation email soon. The rest of your items are now ready to checkout.

<section aria-labelledby="window-notice-heading" class="window-notice" role="region">
    <h2 id="window-notice-heading">
        <svg class="icon icon--confirmation-filled" focusable="false" height="35" width="35" role="img" aria-label="Congratulations">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
        <span class="window-notice__title">Your first order has been placed!</span>
    </h2>
    <p class="window-notice__content">You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
    <button class="btn btn--large">Continue</button>
</section>

Apply the .window-notice--fill modifier to fill the container and align items accordingly.

Your first order has been placed!

You'll get a confirmation email soon. The rest of your items are now ready to checkout.

<section aria-labelledby="window-notice-heading" class="window-notice window-notice--fill" role="region">
    <h2 id="window-notice-heading">
        <svg class="icon icon--confirmation-filled" focusable="false" height="35" width="35" role="img" aria-label="Congratulations">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
        <span class="window-notice__title">Your first order has been placed!</span>
    </h2>
    <p class="window-notice__content">You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
    <button class="btn btn--large">Continue</button>
</section>

Page Notice

A page-level notice appears prominently at the top of the page for high priority use cases; often requiring an interaction.

A page-level notice may have a status of celebration, confirmation, information or attention.

To aid discoverabilty of such important content for assistive technology, we make each page notice a landmark region.

Your order's in!
We'll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.

Congrats! You just listed "Spam and Eggs From the Cow's Perspective (paperback)."

Good news! You get free shipping on your next pair of shoes! Learn more.

Error. Please take another look at the following:
Card number, Expiration date & Security code.

<section class="page-notice page-notice--celebration" role="region" aria-labelledby="celebration-status">
    <h4 class="page-notice__status" id="celebration-status">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" aria-label="Congratulations">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </h4>
    <div class="page-notice__content">
        <p><span class="page-notice__title">Your order's in!</span><br />We'll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.</p>
    </div>
</section>

<section class="page-notice page-notice--confirmation" role="region" aria-labelledby="confirmation-status">
    <h4 class="page-notice__status" id="confirmation-status">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" aria-label="Success">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </h4>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
    </div>
</section>

<section class="page-notice page-notice--information" role="region" aria-labelledby="information-status">
    <h4 class="page-notice__status" id="information-status">
        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" aria-label="Information">
            <use xlink:href="#icon-information-filled"></use>
        </svg>
    </h4>
    <div class="page-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
</section>

<section class="page-notice page-notice--attention" role="region" aria-labelledby="attention-status">
    <h4 class="page-notice__status" id="attention-status">
        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" aria-label="Attention">
            <use xlink:href="#icon-attention-filled"></use>
        </svg>
    </h4>
    <div class="page-notice__content">
        <p><strong>Error.</strong> Please take another look at the following:<br /><a href="#">Card number</a>, <a href="#">Expiration date</a> &amp; <a href="#">Security code</a>.</p>
    </div>
</section>

Section Notice

Section notices are used to provide tips, guidance & feedback on section level elements. Section notices are not as prominent as page level alerts, but still educate the user without alarming them.

A section-level notice may have the following status: default (no icon), confirmation, information or attention.

Items you didn't win will now show in the Didn't win section of this page.

This successfully finished next page

Good news! You get free shipping on your next pair of shoes! Learn more.

Error. Please take another look at the following:
Card number, Expiration date & Security code.

<section aria-label="Guidance" class="section-notice" role="region">
   <div class="section-notice__content">
        <p>Items you didn't win will now show in the <a href="#">Didn't win</a> section of this page.</p>
    </div>
    <button class="btn btn--secondary btn--transparent">Button</button>
</section>

<section aria-labelledby="section-notice-confirmation" class="section-notice section-notice--confirmation" role="region">
    <h4 class="section-notice__status" id="section-notice-confirmation">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" aria-label="Success">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </h4>
    <div class="section-notice__content">
        <p>This successfully finished <a href="#">next page</a></p>
    </div>
    <button class="btn btn--secondary btn--transparent">Button</button>
</section>

<section aria-labelledby="section-notice-information" class="section-notice section-notice--information" role="region">
    <h4 class="section-notice__status" 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>
    </h4>
    <div class="section-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
    <button class="btn btn--secondary btn--transparent">Button</button>
</section>

<section aria-labelledby="section-notice-attention" class="section-notice section-notice--attention" role="region">
    <h4 class="section-notice__status" 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>
    </h4>
    <div class="section-notice__content">
        <p><strong>Error.</strong> Please take another look at the following:<br /><a href="#">Card number</a>, <a href="#">Expiration date</a> &amp; <a href="#">Security code</a>.</p>
    </div>
    <button class="btn btn--secondary btn--transparent">Button</button>
</section>

Inline Notice

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

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

Delivered on May 1, 2017

Tracking number: 93878473859376898908657567

Global Shipping Program transaction.

Update your credit card.

<div class="inline-notice inline-notice--confirmation">
    <span class="inline-notice__status">
        <svg focusable="false" class="icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </span>
    <span class="inline-notice__content">
        <p>Delivered on May 1, 2017</p>
        <p>Tracking number: <a href="http://www.ebay.com">93878473859376898908657567</a></p>
    </span>
</div>

<div class="inline-notice inline-notice--information">
    <span class="inline-notice__status">
        <svg focusable="false" class="icon--information-filled" height="16" width="16" role="img" aria-label="Information">
            <use xlink:href="#icon-information-filled"></use>
        </svg>
    </span>
    <span class="inline-notice__content">
        <p>Global Shipping Program transaction.</p>
    </span>
</div>

<div class="inline-notice inline-notice--attention">
    <span class="inline-notice__status">
        <svg focusable="false" class="icon--attention-filled" height="16" width="16" role="img" aria-label="Attention">
            <use xlink:href="#icon-attention-filled"></use>
        </svg>
    </span>
    <span class="inline-notice__content">
        <p>Update your credit card.</p>
    </span>
</div>

@ebay/skin/pagination

DS6.v1.01

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

Pagination links may update the results immediately on the client via AJAX, or on the server via a full page reload.

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="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 aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">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>
        ...
    </ol>
    <a aria-label="Next Page" class="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>

When performing client side navigation, use buttons instead of links.

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <button aria-disabled="true" aria-label="Previous Page" class="pagination__previous">
        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-prev"></use>
        </svg>
    </button>
    <ol class="pagination__items">
        <li>
            <button aria-current="page" class="pagination__item">1</button>
        </li>
        <li>
            <button class="pagination__item">2</button>
        </li>
        <li>
            <button class="pagination__item">3</button>
        </li>
        ...
    </ol>
    <button aria-label="Next Page" class="pagination__next">
        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
            <use xlink:href="#icon-pagination-next"></use>
        </svg>
    </button>
</nav>

Fluid Pagination

Apply the pagination--fluid modifier class to fill all available horizontal space. Horizontal space will be distributed around each item as necessary.

<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="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 aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">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>
        ...
    </ol>
    <a aria-label="Next Page" class="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>

NOTE: The heading wrapper only needs these two ARIA live-region related attributes if client-side pagination is implemented (i.e. partial page updates).

@ebay/skin/radio

DS6.5 v1.1

A radio button is a form control that allows a user to select a single option 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">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg class="radio__checked" focusable="false" height="18" width="18">
            <use xlink:href="#icon-radio-checked"></use>
        </svg>
    </span>
</span>

Large Radio

Small screens should use the larger #icon-radio-unchecked-large and #icon-radio-checked-large icons.

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

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

@ebay/skin/section-title

DS6.5 R0

Section titles function as identifiers for groups of elements. They are used in a bold font weight, and should be used when you have a layout that has narrow space, or where the left hand rail is exposed. It's designed to have low impact on vertical space, but still help drive visual hierarchy of the page.

Section title

The standard top heading 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>

Section subtitle

The subtitle is designed to support any additional information. For example: when the item is based on personal shopping habits. 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>

Arrow control

The arrow icon is designed to act a link to the primary group page.

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>
        </h2>
    </div>
    <div class="section-title__cta">
        <a href="https://www.ebay.com" tabindex="-1" aria-hidden="true">
            <span class="section-title__cta-text">See All</span>
            <svg class="section-title__cta-icon" focusable="false" height="24" width="24" aria-hidden="true">
                <use xlink:href="#icon-arrow-right-bold"></use>
            </svg>
        </a>
    </div>
</div>

Info control

The arrow can be changed to an info icon to support any legal text required.

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 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="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 control

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

DS6.v1.01

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

DS4

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

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

<span class="spinner" aria-label="Busy" role="img"></span>

Large Spinner

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

<span class="spinner spinner--large" aria-label="Busy" role="img"></span>

@ebay/skin/svg

The SVG module imports an external SVG source containing all symbol definitions. However, due to a lack of browser support for external SVG definitions, we recommend not using this module for now and instead inlining (i.e. copy & pasting) all required definitions from below into a hidden SVG block on your page.

Please view the icon module for instructions on how to reuse and display these symbols anywhere on the page.

@ebay/skin/switch

DS6.5 v1.1

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

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

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

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

Default Switch

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

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

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

Disabled Switch

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

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

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

Checkbox Switch

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

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

Disabled Checkbox Switch

To disable a checkbox switch, apply the disabled attribute.

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

Custom Properties of Switch ^EXPERIMENTAL

The following custom properties (aka CSS Variables) are available for color scheme & theming purposes:

--switch-background-color-unchecked (color)
--switch-background-color-checked (color)
--switch-background-color-disabled (color)
--switch-foreground-color (color)

NOTE: The example theme below is NOT a real theme!

<style>
    .switch--theme1 {
        --switch-background-color-unchecked: orange;
        --switch-background-color-checked: green;
    }
</style>
<span class="switch switch--theme1">
    <span class="switch__control" role="switch" tabindex="0" aria-checked="false"></span>
    <span class="switch__button"></span>
</span>

@ebay/skin/tabs

DS6.v2.01

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 fake-tabs__item--current class is used to visually denote the current link. The aria-current attribute is used to programmatically denote the current page state.

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 fake-tabs__item--current">
            <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

DS6.v1.01

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>

Disabled Textbox

Use the disabled attribute to disable any input.

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

Single-line textboxes also support an actionable icon.

<span class="textbox textbox--icon-end">
    <input class="textbox__control" type="text" placeholder="placeholder text" />
    <button class="icon-btn" type="button" aria-label="Choose Contact">
        <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
            <use xlink:href="#icon-messages"></use>
        </svg>
    </button>
</span>

Underline Textbox

Use textbox__control--underline modifier to style the textbox with only a bottom border to be used in conjuction with floating labels.

Please see the label module for details on labelling controls. Remember: every textbox requires a label!

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

@ebay/skin/toast

DS6.5.v1.01

A toast is a non-modal dialog spawned by the main web page or application.

Toggling the hidden attribute will hide and show the toast.

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 on each button.

<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast" hidden role="dialog">
    <div class="toast__window">
        <div class="toast__header">
            <h2 class="toast__title">User Privacy Preferences</h2>
            <button class="toast__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__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__footer">
            <button accesskey="v" class="btn btn--primary">View Account</button>
        </div>
    </div>
</aside>

Toast Transitions

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--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast toast--transition" hidden role="dialog">
    <div class="toast__window">
        <div class="toast__header">
            <h2 class="toast__title">User Privacy Preferences</h2>
            <button class="toast__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__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__footer">
            <button accesskey="v" class="btn btn--primary">View Account</button>
        </div>
    </div>
</aside>

@ebay/skin/tooltip

DS6.v1.01

A tooltip is a flyout that visually points to a specific section or element of the page.

The DOM order of flyout elements is very important! To avoid keyboard and screen reader accessibility issues, the flyout element must immediately follow the element that it points to.

For all tooltips, the pointer element is positioned at the top and center by default, but can be positioned using any of the following modifiers:

tooltip__pointer--top-left
tooltip__pointer--top
tooltip__pointer--top-right
tooltip__pointer--right
tooltip__pointer--bottom-right
tooltip__pointer--bottom
tooltip__pointer--bottom-left
tooltip__pointer--left

NOTE: In order to achieve optimal placement, both for the overlay and it's pointer, JavaScript will be required.

The default tooltip, is the classic desktop tooltip that activates on focus and hover of a clickable element (typically an icon button or link). The purpose of the classic tooltip is to inform the user about the clickable element.

The default tooltip must be programmatically associated with it's clickable element by using the aria-describedby property and tooltip role.

Toggle the aria-expanded state of the clickable element to expand or collapse it's tooltip.

<span class="tooltip">
    <button accesskey="s" class="tooltip__host icon-btn" 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% + 16px); 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>

An infotip is a standalone button that activates only on click. The purpose of the infotip is to inform the user about a non-clickable element or page section.

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

In case you want to nest the infotip inside a paragraph element, you need to 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 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="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>

A tourtip is open by default and must be explcitly closed using a button. Once closed, it cannot be reopened. The purpose of the tourtip is to inform the user of some new feature or section on the page.

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

DS6.5.v1.01

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

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

With the exception of giant text, which is always bold, all other entries in the type ramp can be set to bold-text or secondary-text by adding the relevant class.

.large-text-2 .bold-text
.large-text-2 .secondary-text

The following helper classes have been defined specifically for Titles. They use media queries to resize the element based on current design system guidelines.

.giant-product-title
.large-product-title
.medium-product-title
.small-product-title
.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-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

@ebay/skin/wizard-stepper

DS6.v2.01

Wizard steppers portray progress through a sequence of steps.

Default Wizard Stepper

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

Use the aria-current attribute to denote the current step in the list.

Started

Shipped

Transit

Delivered

<div class="wizard-stepper">
    <div class="wizard-stepper__items" role="list">
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Started</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Shipped</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div aria-current="step" class="wizard-stepper__item wizard-stepper__item--current" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Transit</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--upcoming" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Delivered</span>
        </div>
    </div>
</div>

The wizard stepper can be sized and aligned using standard CSS:

Started

Shipped

Transit

Delivered

<div class="wizard-stepper" style="margin: 16px auto; width: 320px;">
    <div class="wizard-stepper__items" role="list">
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Started</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Shipped</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div aria-current="step" class="wizard-stepper__item wizard-stepper__item--current" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Transit</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--upcoming" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Delivered</span>
        </div>
    </div>
</div>

Vertical Wizard Stepper

Use the wizard-stepper--vertical modifier for a wizard 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="wizard-stepper wizard-stepper--vertical">
    <div class="wizard-stepper__items" role="list">
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">
                <h3>Order placed</h3>
                <p>New Mens Addidas Ultra Boost</p>
                <p>Order total $220</p>
            </span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div aria-current="step" class="wizard-stepper__item wizard-stepper__item--current" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">
                <h3>Preparing for shipment</h3>
                <p>We will notify you once it ships.</p>
            </span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--upcoming" role="listitem">
            <span class="wizard-stepper__icon">
                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">
                <h3>Delivered</h3>
                <p>Guaranteed Wednesday, October 09.</p>
            </span>
        </div>
    </div>
</div>

States of Wizard Stepper

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

Confirmation

Current

Upcoming

1 Default

Information

Attention

<div class="wizard-stepper">
    <div class="wizard-stepper__items" role="list">
        <div class="wizard-stepper__item wizard-stepper__item--confirmation" role="listitem">
            <span class="wizard-stepper__icon">
                <svg class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-confirmation-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Confirmation</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div aria-current="step" class="wizard-stepper__item wizard-stepper__item--current" role="listitem">
            <span class="wizard-stepper__icon">
                <svg class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Current</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--upcoming" role="listitem">
            <span class="wizard-stepper__icon">
                <svg class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-circle"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Upcoming</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--default wizard-stepper__item--transition-information" role="listitem">
            <span class="wizard-stepper__icon">
                <span class="badge" role="img" aria-label="1">1</span>
            </span>
            <span class="wizard-stepper__text">Default</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--information wizard-stepper__item--transition-attention" role="listitem">
            <span class="wizard-stepper__icon">
                <svg class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-information-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Information</span>
        </div>
        <hr class="wizard-stepper__separator" role="presentation" />
        <div class="wizard-stepper__item wizard-stepper__item--attention" role="listitem">
            <span class="wizard-stepper__icon">
                <svg class="icon" focusable="false" height="24" width="24">
                    <use xlink:href="#icon-attention-filled"></use>
                </svg>
            </span>
            <span class="wizard-stepper__text">Attention</span>
        </div>
    </div>
</div>

About

Install

Bundling

Webpack

Usage

Lasso.js

Flags

Webpack SetUp

Lasso.js SetUp

CDN

@ebay/skin/actionable

Actionable Icon

Actionable Image

@ebay/skin/badge

Default Badge

Actionable Badge

Menu Badge

@ebay/skin/drawer

@ebay/skin/breadcrumbs

@ebay/skin/button

Primary Button

Secondary Button

Delete Button

Disabled Button

Partially Disabled Button

Fluid Button

Large Button

Icon Button

Fixed Height Button

Fixed 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

Large Checkbox

Disabled Checkbox

Grouped Checkboxes

@ebay/skin/color

@ebay/skin/combobox

Default Combobox

Overflow Combobox

Disabled Combobox

Readonly Combobox

Actionable Combobox

@ebay/skin/cta-button

Default

Blue Background

Red Background

@ebay/skin/details

Default Details

Opened Details

Centered Details

Small Details

RTL Details

@ebay/skin/dialog

Default Dialog

Fill Dialog

Left Panel Dialog

Right Panel Dialog

Dialog with Footer

Fullscreen Panel Dialog

Scrolling Panel Dialog

Dialog Transitions

Fade Transition

Slide Transition

@ebay/skin/expand-button

Default Expand Button

Icon Only Expand Button

@ebay/skin/field

Unstacked Field

Stacked Field

Field Font-Size

Disabled Field

Readonly Field

Required Field