eBay Skin DS6

@ebay/skin/global

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

The LESS module contains variables and mixins.

Typography

Color Palette

Product Usage

@ebay/skin/button

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 natively (i.e. no JavaScript required) 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. In this case the <a> tag is required with a valid HREF attribute. Please see the fake button section below for more details.

Raw Button

Use the raw button as the base to build custom modifiers.

<button class="btn">Raw Button</button>
        

Primary Button

<button class="btn btn--primary">Primary Button</button>
        

Disabled Primary Button

<button class="btn btn--primary" disabled>Button</button>
        

Secondary Button

<button class="btn btn--secondary">Button</button>
        

Disabled Secondary Button

<button class="btn btn--secondary" disabled>Button</button>
        

Fluid Button

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

Small Button

<button class="btn btn--primary btn--small">Button</button>
        

Large Button

<button class="btn btn--primary btn--large">Button</button>
        

CTA Button

Takes users to another URL destination (i.e. it is a hyperlink, not actually a button).

Default Background (g202)

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

Blue Background (p002)

<a class="cta-btn cta-btn--p002-blue" href="http://www.ebay.com">
    <span class="fake-btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
            <use xlink:href="#icon-long-arrow-right"></use>
        </svg>
    </span>
</a>
        

Red Background (p012)

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

Purple Background (tbd)

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

Fake Button

For hyperlinks that look like primary or secondary buttons, use the fake-btn base class.

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

Expand Button

Typically used to expand additional content (inline or overlay).

<button aria-expanded="false" class="expand-btn">
    <span class="expand-btn__cell">
        <span>Button</span>
        <span class="expand-btn__icon"></span>
    </span>
</button>
        

Icon Button

An icon can be placed adjacent to the button text.

<button class="btn btn--secondary">
    <span class="btn__cell">
        <svg aria-hidden="true" class="btn__icon icon icon--hamburger" focusable="false" height="8" width="8">
            <use xlink:href="#icon-hamburger"></use>
        </svg>
        <span>Button</span>
    </span>
</button>
        

@ebay/skin/color

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

Please reference the LESS module for all available colours. Please note, that the class names emit the "ds6-" prefix.

@ebay/skin/icon

The icon module allows direct access to the Skin iconography via inline SVG. Although Skin itself also utilises background SVG in some cases (via data uri), the benefit of inline SVG is that the icon will inherit the color of it's containing element. This behaviour can be useful when crafting custom buttons and controls.

To avoid gigantic SVG icons when in a non-CSS (edge-case) state, we use the SVG width and height attributes to override the default 300x150 size.

See the @ebay/skin/svg module for instructions on how to import SVG symbols, and yes, we will be adding more icons in an upcoming release!

<svg aria-hidden="true" class="icon icon--arrow-cta" focusable="false" height="16" width="16">
    <use xlink:href="#icon-arrow-cta"></use>
</svg>
<svg aria-hidden="true" class="icon icon--chevron-dropdown" focusable="false" height="16" width="16">
    <use xlink:href="#icon-chevron-dropdown"></use>
</svg>
<svg aria-hidden="true" class="icon icon--hamburger" focusable="false" height="16" width="16">
    <use xlink:href="#icon-hamburger"></use>
</svg>
        

@ebay/skin/listbox

The Skin listbox is intended for use as a custom view (or facade) for the native HTML select element. JavaScript will be required to create 2-way binding between the two.

Note: Because the listbox uses an input element, which must grow to properly display it's contents, we have chosen to have the listbox always remain fluid. It is up to the developer to contain the width, if necessary. Extra care will be needed when placing a listbox side-by-side with other controls such as buttons and textboxes.

Default Listbox

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

<span class="listbox">
    <span class="listbox__control">
        <input type="text" value="Option 1" readonly role="combobox" aria-haspopup="listbox" aria-owns="listbox1"/>
        <span class="listbox__arrow" aria-hidden="true"></span>
    </span>
    <div id="listbox1" class="listbox__options" role="listbox">
        <div class="listbox__option" role="option" aria-selected="true">
            <span>Option 1</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 2</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 3</span>
            <span class="listbox__status"></span>
        </div>
    </div>
    <select name="nativeOptions" hidden>
        <option value="item1">Option 1</option>
        <option value="item2">Option 2</option>
        <option value="item3">Option 3</option>
    </select>
</span>
        

Selected Listbox

<span class="listbox">
    <span class="listbox__control">
        <input type="text" value="Option 2" readonly role="combobox" aria-haspopup="listbox" aria-owns="listbox2"/>
        <span class="listbox__arrow" aria-hidden="true"></span>
    </span>
    <div id="listbox2" class="listbox__options" role="listbox">
        <div class="listbox__option" role="option">
            <span>Option 1</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option" aria-selected="true">
            <span>Option 2</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 3</span>
            <span class="listbox__status"></span>
        </div>
    </div>
    <select name="nativeOptions" hidden>
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
</span>
        

@ebay/skin/menu

A menu 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, please consider checkbox, listbox 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.

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <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>
</span>
        

Radio Menu

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

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Radio Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemradio" aria-checked="true">
            <span>Radio menu item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>
    

Checkbox Menu

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

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Checkbox Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false" height="8" width="8">
            <span>Item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>
    

Fake Menu

A fake menu looks like a normal menu widget, but it contains a list of hyperlinks (instead of a menu of menuitems) and thus behaves more like a navigational widget.

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

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

<span class="fake-menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Fake Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <ul class="fake-menu__items">
        <li>
            <a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
                <span>Link 1</span>
                <span class="fake-menu__status"></span>
            </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>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 4</a>
        </li>
    </ul>
</span>
    

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

Growth Menu

Use the menu__items--grow or fake-menu__items--grow element modifier to slightly grow the width of any menu items container. This is useful in cases where the menu overlay needs to be slightly wider than the button, usually to accomodate menu items with long text.

NOTE: The growth modifier only works on menus that use a span tag.

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items menu__items--grow" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1 - Lorem ipsum dolor sit amet</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>
</span>
    

TIP: Use the menu__items--grow-reverse or fake-menu__items--grow-reverse element modifier to grow the width of the menu overlay in reverse direction.

@ebay/skin/svg

This module imports an SVG file containing all Skin symbol definitions.

Due to lack of browser support for external SVG definitions, we recommend inlining the definitions that you need in a hidden SVG block.

Note that in the examples below, we use the SVG viewBox attribute to crop out the "frame" (i.e. the whitespace) around the actual icon. This allows us to use CSS to fine-tune margins around icons, rather than the often arbitrary amount found in the SVG itself.

<svg hidden>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=7, y=7.25, width=9.75, height=10 -->
    <symbol id="icon-arrow-cta" viewBox="7 7.25 9.75 10">
        <path d="M14.500362,12.7437638 C14.500362,12.7437638 11.5523433,15.788424 11.3274289,16.0204629 C11.1034799,16.2534726 11.1295429,16.6359969 11.3274289,16.8408512 C11.5262802,17.0457056 11.9104687,17.0602687 12.1209035,16.8408512 C12.3313384,16.6204629 16.6529755,12.158327 16.6529755,12.158327 C16.6529755,12.158327 12.3815339,7.75929782 12.1209035,7.47677355 C11.8602732,7.19424928 11.5311067,7.26706481 11.3274289,7.47677355 C11.1247164,7.68648229 11.0716251,8.019492 11.3274289,8.29619103 C11.5841981,8.57289006 14.500362,11.5728901 14.500362,11.5728901 L7.58883151,11.5728901 C7.19016362,11.5728901 7,11.8660939 7,12.158327 C7,12.4515308 7.18823302,12.7437638 7.58883151,12.7437638 L14.500362,12.7437638 Z"></path>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=8, y=10, width=8, height=5 -->
    <symbol id="icon-chevron-dropdown" viewBox="8 10 8 5">
        <path d="M8.75871413,10.1405888 C8.58514777,9.9531371 8.30374112,9.9531371 8.13017476,10.1405888 C7.95660841,10.3280404 7.95660841,10.6319596 8.13017476,10.8194113 L11.6857303,14.6594113 C11.8592966,14.8468629 12.1407033,14.8468629 12.3142696,14.6594113 L15.8698252,10.8194113 C16.0433916,10.6319596 16.0433916,10.3280404 15.8698252,10.1405887 C15.6962589,9.95313709 15.4148522,9.95313708 15.2412859,10.1405887 L12,13.6411775 L8.75871413,10.1405888 Z"></path>
    </symbol>
    <!-- canvas: width=24, height=28 -->
    <!-- asset: x=2, y=6, width=20, height=16 -->
    <symbol id="icon-hamburger" viewBox="2 6 20 16">
        <path d="M1.291 5.703h21.418v2.242h-21.418v-2.242z"></path>
        <path d="M1.291 12.879h21.418v2.242h-21.418v-2.242z"></path>
        <path d="M1.291 20.054h21.418v2.242h-21.418v-2.242z"></path>
    </symbol>
</svg>
    

@ebay/skin/typography

Static sites that do not have access to LESS preprocessor can leverage the Skin type ramp via the typography module.

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: