@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

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.

Paragraph with Market Sans

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.

Link States

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

@ebay/skin/less

The LESS module contains variables and mixins.

Typography

  • .ds6-typography-giant-2
  • .ds6-typography-giant-1
  • .ds6-typography-large-2-bold
  • .ds6-typography-large-2
  • .ds6-typography-large-2-secondary
  • .ds6-typography-large-1-bold
  • .ds6-typography-large-1
  • .ds6-typography-large-1-secondary
  • .ds6-typography-medium-bold
  • .ds6-typography-medium
  • .ds6-typography-medium-secondary
  • .ds6-typography-regular-bold
  • .ds6-typography-regular
  • .ds6-typography-regular-secondary
  • .ds6-typography-small-bold
  • .ds6-typography-small
  • .ds6-typography-small-secondary

Color Palette

  • @ds6-color-g201-gray (#ffffff)
  • @ds6-color-g202-gray (#f5f5f5)
  • @ds6-color-g203-gray (#e5e5e5)
  • @ds6-color-g204-gray (#c7c7c7)
  • @ds6-color-g205-gray (#767676)
  • @ds6-color-g206-gray (#111820)
  • @ds6-color-p001-blue (#e1fbff)
  • @ds6-color-p002-blue (#006efc)
  • @ds6-color-p003-blue (#10299c)
  • @ds6-color-p004-blue (#4295ff)
  • @ds6-color-p011-red (#ffe7ec)
  • @ds6-color-p012-red (#ff5151)
  • @ds6-color-p013-red (#c9002c)
  • @ds6-color-p021-yellow (#fffaab)
  • @ds6-color-p022-yellow (#ffd80d)
  • @ds6-color-p031-green (#ebffcc)
  • @ds6-color-p032-green (#71c63e)
  • @ds6-color-p033-green (#147133)

Product Usage

  • @ds6-color-text-default
  • @ds6-color-text-secondary
  • @ds6-color-link-default
  • @ds6-color-link-visited
  • @ds6-color-information-background
  • @ds6-color-badge
  • @ds6-color-star
  • @ds6-color-warning-background
  • @ds6-color-critical-text
  • @ds6-color-critical-background
  • @ds6-color-confirmation-text
  • @ds6-color-confirmation-background
  • @ds6-color-background-default

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

Button 
<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-right-bold"></use>
        </svg>
    </span>
</a>

Blue Background (p002)

Button 
<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-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Red Background (p012)

Button 
<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-right-bold"></use>
        </svg>
    </span>
</a>

Purple Background (tbd)

Button 
<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-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Fake Button

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

Link 
<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--menu" focusable="false" height="8" width="8">
            <use xlink:href="#icon-menu"></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/combobox

The Skin combobox 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.

This version of the combobox is read-only. In the near future we will launch a true combobox, with type-ahead and type-to-add capabilities.

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

Default read-only combobox

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.

Option 1
Option 2
Option 3 
<span class="combobox">
    <span class="combobox__control">
        <input type="text" value="Option 1" readonly role="combobox" aria-haspopup="listbox" aria-owns="combobox1"/>
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="combobox1" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option" aria-selected="true">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

Selected read-only combobox

Option 1
Option 2
Option 3 
<span class="combobox">
    <span class="combobox__control">
        <input type="text" value="Option 2" readonly role="combobox" aria-haspopup="listbox" aria-owns="combobox2"/>
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="combobox2" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option" aria-selected="true">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

Borderless read-only combobox

Option 1
Option 2
Option 3 
<span class="combobox">
    <span class="combobox__control combobox__control--borderless">
        <input type="text" value="Option 1" readonly role="combobox" aria-haspopup="listbox" aria-owns="combobox1" />
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="combobox1" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option" aria-selected="true">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

@ebay/skin/dialog

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.

All dialogs have support for optional CSS transition effects. See dialog transitions section for more details.

Default Dialog

The default dialog is a lightbox.

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

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--fill" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--left" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--right" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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.

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--full" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 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 role="dialog" aria-labelledby="dialog-title" class="dialog dialog--mask-fade" hidden>
    <div class="dialog__window dialog__window--full" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 role="dialog" aria-labelledby="dialog-title" class="dialog dialog--mask-fade" hidden>
    <div class="dialog__window dialog__window--full dialog__window--fade" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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 role="dialog" aria-labelledby="dialog-title" class="dialog dialog--mask-fade-slow" hidden>
    <div class="dialog__window dialog__window--left dialog__window--slide" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
            <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/icon

The icon module allows direct access to the Skin iconography via inline SVG or background SVG.

NOTE: inline SVG will inherit the color of it's containing element; this behaviour can be useful when crafting custom buttons and controls.

Inline SVG

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 class="icon icon--arrow-left" focusable="false" height="24" width="24">
    <use xlink:href="#icon-arrow-left"></use>
</svg>

Background SVG

Background SVGs have a fixed stroke colour. This colour cannot be changed via CSS.

<span class="icon icon--arrow-left"></span>

List of available icons

Arrows

.icon--arrow-left #icon-arrow-left
.icon--arrow-right #icon-arrow-right
.icon--arrow-move #icon-arrow-move
.icon--arrow-right-bold #icon-arrow-right-bold

Chevrons

.icon--chevron-up #icon-chevron-up
.icon--chevron-down #icon-chevron-down
.icon--chevron-left #icon-chevron-left
.icon--chevron-right #icon-chevron-right
.icon--chevron-up-bold #icon-chevron-up-bold
.icon--chevron-down-bold #icon-chevron-down-bold

Forms

.icon--checkbox-unchecked #icon-checkbox-unchecked
.icon--checkbox-checked #icon-checkbox-checked
.icon--radio-unchecked #icon-radio-unchecked
.icon--radio-checked #icon-radio-checked
.icon--tick #icon-tick

Navigation

.icon--menu #icon-menu
.icon--close #icon-close
.icon--cart #icon-cart
.icon--notification #icon-notification
.icon--search #icon-search
.icon--search-bold #icon-search-bold
.icon--overflow #icon-overflow

Navigation support

.icon-bids #icon-bids
.icon-categories #icon-categories
.icon--deals #icon-deals
.icon--download #icon-download
.icon--event #icon-event
.icon--help #icon-help
.icon--profile #icon-profile
.icon--purchases #icon-purchases
.icon--selling #icon-selling
.icon--settings #icon-settings
.icon--watch #icon-watch

Programs

.icon--top-seller #icon-top-seller
.icon--fast-n-free #icon-fast-n-free

Save

.icon--save #icon-save
.icon--save-bold #icon-save-bold
.icon--save-selected #icon-save-selected

Search

.icon--camera #icon-camera
.icon--mic #icon-mic
.icon--clear #icon-clear

@ebay/skin/notice

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 page-level or inline-level, with a status of priority, confirmation, or information.

Page Notice

A page-level notice typically appears prominently at the top of the page or directly above a module. To aid discoverabilty of such important content for assistive technology, we make each page notice a landmark region with heading.

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

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

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

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <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 aria-labelledby="priority-status" class="page-notice page-notice--priority">
    <h2 class="page-notice__status" id="priority-status">
        <span aria-label="Priority" role="img"></span>
    </h2>
    <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 aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <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>

Dismissable Page Notice

Append a button with class page-notice__close to create a dismissable page notice.

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

You can check your listing or sell another item

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

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <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>
        <p>You can check <a href="#">your listing</a> or <a href="#">sell another item</a></p>
    </div>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>

<section aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <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>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>

Inline Notice

An inline-level notice is typically located near a form field or user interface control.

Delivered on May 1, 2017

Tracking number: 93878473859376898908657567

Update your credit card.

Global Shipping Program transaction.

 
<div class="inline-notice inline-notice--confirmation">
    <span class="inline-notice__status">
        <span aria-label="Confirmation" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Delivered on May 1, 2017</p>
        <p>Tracking number: <a href="#">93878473859376898908657567</a></p>
    </span>
</div>

<div class="inline-notice inline-notice--priority">
    <span class="inline-notice__status">
        <span aria-label="Priority" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Update your credit card.</p>
    </span>
</div>

<div class="inline-notice inline-notice--information">
    <span class="inline-notice__status">
        <span aria-label="Information" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Global Shipping Program transaction.</p>
    </span>
</div>

@ebay/skin/select

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

Borderless select

<span class="select select--borderless">
    <select name="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected="">Option 2</option>
        <option value="item3">Option 3</option>
    </select>
</span>

@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=1.5, y=2.25, width=21, height=19.5 -->
    <symbol id="icon-arrow-left" viewBox="1.5 2.25 21 19.5">
        <path d="M6.183 10.817l6.902-6.596c.488-.468.43-1.238 0-1.65-.432-.412-1.27-.443-1.725 0-.458.443-9.86 9.424-9.86 9.424s9.293 8.854 9.86 9.424c.566.57 1.285.422 1.725 0 .441-.421.557-1.092 0-1.648-.558-.557-6.902-6.597-6.902-6.597H21.22c.867 0 1.28-.589 1.28-1.18 0-.588-.408-1.177-1.28-1.177H6.183z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=2.25, width=21, height=19.5 -->
    <symbol id="icon-arrow-right" viewBox="1.5 2.25 21 19.5">
        <path d="M17.817 13.226s-6.413 6.129-6.9 6.597c-.49.47-.432 1.236 0 1.65.43.412 1.267.443 1.723 0 .458-.443 9.86-9.425 9.86-9.425s-9.292-8.855-9.86-9.425c-.566-.568-1.283-.421-1.723 0-.442.422-.56 1.093 0 1.65.556.556 6.9 6.597 6.9 6.597H2.782c-.868 0-1.282.588-1.282 1.178s.41 1.178 1.282 1.178h15.035z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-arrow-move" viewBox="3 3 18 18">
        <path d="M7.946 5.886s10.719.002 11.536 0c.817-.002 1.441-.722 1.441-1.442S20.251 2.996 19.482 3C18.712 3.006 3 3 3 3s.024 15.511 0 16.483c-.023.97.705 1.442 1.443 1.442.737 0 1.421-.488 1.442-1.442.02-.951 0-11.537 0-11.537l12.566 12.567c.724.724 1.586.557 2.101.042.515-.515.687-1.374-.041-2.102L7.946 5.886z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=2.1, width=21.55, height=20 -->
    <symbol id="icon-arrow-right-bold" viewBox="1.2 2.1 22 21">
        <path d="M11.704 22.098a1.48 1.48 0 0 1-1.02-.386 1.38 1.38 0 0 1-.413-.996c0-.375.146-.721.415-.978.411-.397 5.078-4.857 6.494-6.21H2.706c-1.035 0-1.506-.726-1.506-1.4 0-.679.471-1.406 1.506-1.406h14.472c-1.42-1.353-6.02-5.736-6.497-6.213-.292-.291-.445-.635-.442-.996a1.37 1.37 0 0 1 .447-.975c.501-.479 1.354-.681 2.037.003.561.56 9.765 9.334 9.856 9.423l.173.163-.172.162c-.093.09-9.407 8.985-9.86 9.422-.264.258-.639.387-1.016.387"></path>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=12 -->
    <symbol id="icon-chevron-up" viewBox="1.5 5.25 21 12">
        <path d="M11.175 5.603l-9.333 9.6a1.225 1.225 0 0 0 0 1.698c.22.226.507.343.796.35h.058c.289-.007.575-.124.796-.35L12 8.149l8.508 8.752c.222.226.509.343.798.35h.055c.29-.007.576-.124.797-.35a1.225 1.225 0 0 0 0-1.698l-9.332-9.6A1.156 1.156 0 0 0 12 5.25a1.15 1.15 0 0 0-.825.353z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=6.75, width=21, height=12 -->
    <symbol id="icon-chevron-down" viewBox="1.5 6.75 21 12">
        <path d="M20.506 7.101L12 15.854 3.492 7.1a1.149 1.149 0 0 0-1.651 0c-.215.222-.329.51-.341.801v.096c.012.291.126.579.34.801l9.335 9.6c.22.226.508.343.796.351h.057c.288-.008.576-.125.797-.351l9.333-9.6a1.21 1.21 0 0 0 .342-.81V7.91a1.21 1.21 0 0 0-.342-.81 1.148 1.148 0 0 0-1.652 0z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=12, height=21 -->
    <symbol id="icon-chevron-left" viewBox="6 1.5 12 21">
        <path d="M15.953 1.842L6.35 11.174a1.155 1.155 0 0 0-.351.798v.057c.008.288.125.576.351.796l9.602 9.333c.223.22.514.332.808.342h.078c.294-.01.585-.123.81-.342a1.145 1.145 0 0 0 0-1.65L8.896 12l8.753-8.508a1.145 1.145 0 0 0 0-1.65A1.216 1.216 0 0 0 16.8 1.5a1.21 1.21 0 0 0-.848.342z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=12, height=21 -->
    <symbol id="icon-chevron-right" viewBox="6 1.5 12 21">
        <path d="M6.351 1.842c-.226.22-.343.507-.351.796v.056c.008.29.125.578.351.798L15.102 12l-8.751 8.508c-.226.22-.343.509-.351.798v.055c.008.29.125.576.351.797.225.219.516.331.81.342h.078c.294-.01.585-.123.81-.342l9.6-9.333c.226-.22.343-.508.351-.798v-.054a1.158 1.158 0 0 0-.351-.8l-9.6-9.331A1.216 1.216 0 0 0 7.2 1.5c-.308 0-.615.114-.849.342z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=5.7, width=21.6, height=12.58 -->
    <symbol id="icon-chevron-up-bold" viewBox="1.2 5.7 21.6 12.58">
        <path d="M11.964 5.7c.451.009.809.166 1.075.441l9.336 9.6c.259.268.41.622.425.999v.108a1.528 1.528 0 0 1-.425 1.008c-.559.573-1.528.57-2.081 0L12 9.326l-8.292 8.531c-.558.57-1.525.57-2.08 0a1.507 1.507 0 0 1-.428-1.009v-.087c.012-.392.165-.75.428-1.02l9.332-9.6a1.443 1.443 0 0 1 1.004-.441"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.35, y=5.7, width=21.6, height=12.58 -->
    <symbol id="icon-chevron-down-bold" viewBox="1.35 5.7 21.6 12.58">
        <path d="M12.186 18.285c-.451-.009-.809-.167-1.075-.441l-9.337-9.6a1.527 1.527 0 0 1-.424-.999v-.108c.015-.386.166-.741.424-1.008.56-.573 1.529-.57 2.082 0l8.294 8.53 8.292-8.532c.558-.57 1.526-.57 2.08 0 .265.27.416.629.428 1.01v.087c-.012.391-.165.75-.427 1.02l-9.333 9.6a1.443 1.443 0 0 1-1.004.441"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.12, y=4.1, width=15.77, height=15.8 -->
    <symbol id="icon-checkbox-unchecked" viewBox="4.12 4.1 15.77 15.8">
        <path fill="none" stroke-width="1" d="M18.56 5.25H5.44a.19.19 0 0 0-.19.187v13.126a.19.19 0 0 0 .19.187h13.12a.19.19 0 0 0 .19-.187V5.437a.19.19 0 0 0-.19-.187zM4.116 19.9h15.768V4.1H4.116v15.8z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.12, y=4.1, width=15.77, height=15.8 -->
    <symbol id="icon-checkbox-checked" viewBox="4.12 4.1 15.77 15.8">
        <path d="M4.116 19.9V4.1h15.768v15.8H4.116zm4.28-7.782a.725.725 0 0 0-1.06 0 .816.816 0 0 0 0 1.114l2.998 3.013a.725.725 0 0 0 1.061 0l6.001-6.3a.816.816 0 0 0 0-1.114.725.725 0 0 0-1.06 0l-5.471 5.744-2.469-2.457z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-radio-unchecked" viewBox="3 3 18 18">
        <path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9m0 1.059c4.38 0 7.941 3.563 7.941 7.941S16.38 19.941 12 19.941 4.059 16.378 4.059 12 7.62 4.059 12 4.059"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-radio-checked" viewBox="3 3 18 18">
        <path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9m0 1.059c4.38 0 7.941 3.563 7.941 7.941S16.38 19.941 12 19.941 4.059 16.378 4.059 12 7.62 4.059 12 4.059zm0 13.191a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=6.45, width=13.5, height=10.12 -->
    <symbol id="icon-tick" viewBox="6 6.45 13.5 10.12">
        <path d="M7.646 10.972a.932.932 0 0 0-1.364 0 1.049 1.049 0 0 0 0 1.432l3.856 3.874a.932.932 0 0 0 1.364 0l7.716-8.1a1.049 1.049 0 0 0 0-1.431.932.932 0 0 0-1.364 0L10.82 14.13l-3.174-3.159z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=13.5 -->
    <symbol id="icon-menu" viewBox="1.5 5.25 21 13.5">
        <path d="M21.55 16.76c.524 0 .95.446.95.996 0 .548-.426.994-.95.994H2.45c-.524 0-.95-.446-.95-.994 0-.55.426-.996.95-.996h19.1zm0-5.756c.524 0 .95.447.95.997 0 .548-.426.995-.95.995H2.45c-.524 0-.95-.447-.95-.995 0-.55.426-.997.95-.997h19.1zM2.45 7.242c-.524 0-.95-.447-.95-.996 0-.549.426-.996.95-.996h19.1c.524 0 .95.447.95.996 0 .549-.426.996-.95.996H2.45z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-close" viewBox="1.5 1.5 21 21">
        <path d="M22.182 3.856c.522-.554.306-1.394-.234-1.938-.54-.543-1.433-.523-1.826-.135C19.73 2.17 11.955 10 11.955 10S4.225 2.154 3.79 1.783c-.438-.371-1.277-.4-1.81.135-.533.537-.628 1.513-.25 1.938.377.424 8.166 8.218 8.166 8.218s-7.85 7.864-8.166 8.219c-.317.354-.34 1.335.25 1.805.59.47 1.24.455 1.81 0 .568-.456 8.166-7.951 8.166-7.951l8.167 7.86c.747.72 1.504.563 1.96.09.456-.471.609-1.268.1-1.804-.508-.537-8.167-8.219-8.167-8.219s7.645-7.665 8.167-8.218z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-cart" viewBox="1.5 1.5 21 21">
        <path d="M9.133 6.438a.966.966 0 0 0-.906 1.279c.124.391.5.647.907.647l11.35-.01-2.192 5.74-9.468.017L4.107 1.5l-1.654.062c-.51.019-.94.423-.953.936a.96.96 0 0 0 .993.99l.308-.011L7.5 16.04l12.109-.023 2.848-7.457.043-2.134-13.367.012zm8.288 13.359a.627.627 0 0 1 .468-.471.632.632 0 0 1 .288 1.231.632.632 0 0 1-.756-.76zm-9.462-.014a.627.627 0 0 1 .468-.47.632.632 0 0 1 .288 1.231.632.632 0 0 1-.756-.76zm7.803-.985h-4.9a2.54 2.54 0 0 0-2.333-1.414c-1.31.031-2.403 1.094-2.477 2.41A2.554 2.554 0 0 0 8.591 22.5a2.55 2.55 0 0 0 2.42-1.776h4.602a2.548 2.548 0 0 0 2.42 1.776 2.555 2.555 0 0 0 2.539-2.705c-.074-1.317-1.166-2.38-2.477-2.411a2.541 2.541 0 0 0-2.333 1.414z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-notification" viewBox="1.5 1.5 21 21">
        <path d="M12.053 22.5c-2.284 0-4.249-1.577-4.81-3.724L1.5 18.715l.019-3.772 1.953-.687-.021-3.18a8.527 8.527 0 0 1 5.756-8.094L9.182 1.5h5.773l-.013 1.455a8.376 8.376 0 0 1 5.722 7.98l.025 3.406 1.811.616v3.77l-10.49-.032a.959.959 0 0 1 .002-1.92h.004l8.568.027v-.47l-1.801-.613-.035-4.777c0-3.037-2.052-5.637-4.99-6.33l-.747-.176.01-1.016h-1.89l.017 1.027-.743.182a6.609 6.609 0 0 0-5.038 6.44l.03 4.545-1.97.693-.001.508 5.516.059.066.879a3.067 3.067 0 0 0 3.045 2.827c.777 0 1.517-.293 2.084-.825a.957.957 0 0 1 1.354.046.961.961 0 0 1-.045 1.357 4.945 4.945 0 0 1-3.393 1.342"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-search" viewBox="1.5 1.5 21 21">
        <path d="M22.288 20.948l-5.689-5.352a8.42 8.42 0 0 0 2.047-5.166c.213-4.707-3.457-8.708-8.181-8.921-4.725-.213-8.743 3.443-8.956 8.15-.214 4.706 3.456 8.708 8.181 8.92a8.654 8.654 0 0 0 1.737-.1l.172-.027a8.738 8.738 0 0 0 1.044-.268.947.947 0 0 0 .608-1.19.954.954 0 0 0-1.196-.606c-.23.076-.465.136-.7.184a6.664 6.664 0 0 1-1.58.123c-3.68-.166-6.54-3.284-6.374-6.951.167-3.666 3.297-6.515 6.978-6.35 3.68.167 6.54 3.285 6.373 6.95a6.608 6.608 0 0 1-2.142 4.59l-.747.688 7.007 6.607a.96.96 0 0 0 1.358-.017.95.95 0 0 0 .06-1.264"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.2, width=21.6, height=21.6 -->
    <symbol id="icon-search-bold" viewBox="1.2 1.2 21.6 21.6">
        <path d="M21.537 22.802h-.054a1.281 1.281 0 0 1-.822-.356l-7.239-6.825.984-.906a6.295 6.295 0 0 0 2.045-4.381 6.294 6.294 0 0 0-1.664-4.572 6.349 6.349 0 0 0-4.422-2.066 6.36 6.36 0 0 0-6.664 6.063 6.3 6.3 0 0 0 1.666 4.574 6.349 6.349 0 0 0 5.93 1.945 5.58 5.58 0 0 0 .666-.174 1.27 1.27 0 0 1 .44-.06 1.26 1.26 0 0 1 1.132.855 1.249 1.249 0 0 1-.8 1.572 9.053 9.053 0 0 1-1.08.278l-.183.027a8.834 8.834 0 0 1-7.945-2.766 8.76 8.76 0 0 1-2.318-6.363C1.431 4.775 5.6.974 10.478 1.21a8.834 8.834 0 0 1 6.151 2.872 8.762 8.762 0 0 1 2.316 6.363 8.714 8.714 0 0 1-1.935 5.127l5.51 5.189a1.248 1.248 0 0 1-.077 1.662 1.264 1.264 0 0 1-.906.378"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=9.75, y=3, width=4.5, height=18 -->
    <symbol id="icon-overflow" viewBox="9.75 3 4.5 18">
        <path d="M12 16.5a2.257 2.257 0 0 1 2.25 2.25A2.257 2.257 0 0 1 12 21a2.257 2.257 0 0 1-2.25-2.25A2.257 2.257 0 0 1 12 16.5zm0-2.25A2.257 2.257 0 0 1 9.75 12 2.257 2.257 0 0 1 12 9.75 2.257 2.257 0 0 1 14.25 12 2.257 2.257 0 0 1 12 14.25zm0-6.75a2.257 2.257 0 0 1-2.25-2.25A2.257 2.257 0 0 1 12 3a2.257 2.257 0 0 1 2.25 2.25A2.257 2.257 0 0 1 12 7.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-bids" viewBox="1.5 1.5 21 21">
        <path d="M7.829 16.79l.297.008 8.7-8.702-.004-.272-4.663-4.572-.242-.006-8.669 8.638v.328l4.58 4.579zm7.518-4.743L22.5 19.2l-3.28 3.278-7.153-7.152-3.218 3.218-1.77-.033L1.5 12.934l.001-1.776L11.196 1.5l1.699.027 5.673 5.562.031 1.705-3.252 3.253zm-1.236 1.236l-.809.808 5.918 5.917.808-.807-5.917-5.918zm-12.26 8.984V20.41h8.173v1.857H1.85zm7.555-8.58l1.235-1.236-3.065-3.065-1.236 1.236 3.066 3.065zm3.066-3.065l1.235-1.236-3.066-3.065-1.235 1.234 3.066 3.067z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-categories" viewBox="1.5 1.5 21 21">
        <path d="M17.793 8.753a2.561 2.561 0 0 1-2.547-2.546 2.562 2.562 0 0 1 2.547-2.548 2.562 2.562 0 0 1 2.548 2.548 2.561 2.561 0 0 1-2.548 2.546m0-7.253a4.72 4.72 0 0 0-4.706 4.707 4.72 4.72 0 0 0 4.706 4.706A4.72 4.72 0 0 0 22.5 6.207 4.72 4.72 0 0 0 17.793 1.5m0 18.84a2.561 2.561 0 0 1-2.547-2.547 2.562 2.562 0 0 1 2.547-2.547 2.562 2.562 0 0 1 2.548 2.547 2.561 2.561 0 0 1-2.548 2.547m0-7.254a4.722 4.722 0 0 0-4.706 4.707 4.72 4.72 0 0 0 4.706 4.707 4.72 4.72 0 0 0 4.707-4.707 4.722 4.722 0 0 0-4.707-4.707M6.207 20.34a2.561 2.561 0 0 1-2.548-2.547 2.562 2.562 0 0 1 2.548-2.547 2.562 2.562 0 0 1 2.547 2.547 2.561 2.561 0 0 1-2.547 2.547m0-7.254A4.722 4.722 0 0 0 1.5 17.793 4.72 4.72 0 0 0 6.207 22.5a4.72 4.72 0 0 0 4.706-4.707 4.722 4.722 0 0 0-4.706-4.707m0-4.333a2.561 2.561 0 0 1-2.548-2.546 2.562 2.562 0 0 1 2.548-2.548 2.562 2.562 0 0 1 2.547 2.548 2.561 2.561 0 0 1-2.547 2.546m0-7.253A4.72 4.72 0 0 0 1.5 6.207a4.72 4.72 0 0 0 4.707 4.706 4.72 4.72 0 0 0 4.706-4.706A4.72 4.72 0 0 0 6.207 1.5"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=13.37, height=21 -->
    <symbol id="icon-deals" viewBox="6 1.5 13.37 21">
        <path d="M6 14.385v-1.232l7.754-11.625 1.76-.028-.791 8.06h4.648v1.423L11.403 22.5H9.36l1.105-8.115H6zm6.893-3.166l.623-6.345-5.237 7.852h4.087l-.928 6.81L17.2 11.22h-4.307z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=1.5, width=18, height=21 -->
    <symbol id="icon-download" viewBox="3 1.5 18 21">
        <path d="M11.074 15.27V2.212c0-.757.512-1.113 1.024-1.113.511 0 1.023.36 1.023 1.113v13.06s5.247-5.51 5.73-5.995c.483-.484 1.066-.383 1.433 0 .366.384.494 1.006 0 1.499-.495.493-8.186 8.564-8.186 8.564s-7.801-8.167-8.186-8.564c-.385-.397-.358-1.124 0-1.499.358-.374 1.025-.423 1.432 0 .407.424 5.73 5.995 5.73 5.995zm-7.126 4.954H19.91c.524 0 .949.424.949.948v.38a.948.948 0 0 1-.949.948H3.948A.948.948 0 0 1 3 21.552v-.38c0-.524.425-.948.948-.948z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-event" viewBox="1.5 1.5 21 21">
        <path d="M9.2 1.5c-1.925 0-3.5 1.541-3.5 3.424 0 .77.265 1.48.707 2.054H2.2c-.367 0-.7.327-.7.685v4.109c0 .358.333.684.7.685h.7v9.358c0 .359.333.685.7.685h16.8c.367 0 .7-.326.7-.685v-9.358h.7c.367 0 .7-.327.7-.685V7.663c0-.358-.333-.685-.7-.685h-4.207a3.353 3.353 0 0 0 .707-2.054c0-1.883-1.575-3.424-3.5-3.424-1.142 0-2.16.55-2.8 1.384A3.532 3.532 0 0 0 9.2 1.5zm0 1.37c1.168 0 2.1.911 2.1 2.054v2.054H9.2c-1.168 0-2.1-.911-2.1-2.054 0-1.143.932-2.054 2.1-2.054zm5.6 0c1.168 0 2.1.911 2.1 2.054 0 1.143-.932 2.054-2.1 2.054h-2.1V4.924c0-1.143.932-2.054 2.1-2.054zM2.9 8.348h8.4v2.739H2.9v-2.74zm9.8 0h8.4v2.739h-8.4v-2.74zm-8.4 4.109h7v8.673h-7v-8.673zm8.4 0h7v8.673h-7v-8.673z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21.12 -->
    <symbol id="icon-help" viewBox="1.5 1.5 21 21.12">
        <path d="M17.48 22.623H2.297a.803.803 0 0 1-.798-.808c0-.446.357-.807.798-.807h13.585v-2.062c0-.949-.555-1.806-1.414-2.186l-2.616-1.104a1.96 1.96 0 0 1-1.198-1.864c.013-.602.29-1.155.76-1.517 1.03-.793 1.464-2.095 1.131-3.396a3.098 3.098 0 0 0-3.012-2.317c-.87 0-1.685.342-2.298.964a3.14 3.14 0 0 0-.914 2.223c.002 1 .455 1.92 1.242 2.526.47.362.747.915.76 1.517a1.96 1.96 0 0 1-1.197 1.864L4.51 16.76a2.373 2.373 0 0 0-1.41 2.043.8.8 0 0 1-.844.757.804.804 0 0 1-.749-.854 3.98 3.98 0 0 1 2.372-3.43l2.633-1.11a.354.354 0 0 0 .216-.337.348.348 0 0 0-.13-.268 4.783 4.783 0 0 1-1.872-3.808 4.756 4.756 0 0 1 1.38-3.368 4.78 4.78 0 0 1 3.427-1.439 4.697 4.697 0 0 1 4.558 3.528c.49 1.914-.181 3.91-1.71 5.087a.348.348 0 0 0-.13.268.353.353 0 0 0 .216.336l2.633 1.111a4.001 4.001 0 0 1 2.38 3.67v3.677zM16.79 4.09c.566-.472 1.115-.233 1.115-.233.822.775 1.088 1.604 1.11 2.513.022.958-.244 1.994-1.11 2.744 0 0-.572.15-1.115-.224-.542-.375-.29-.998-.29-.998.345-.419.561-.941.568-1.422.006-.5-.21-.956-.568-1.39 0 0-.276-.517.29-.99zm2.226-2.33c.492-.421 1.167-.206 1.167-.206 1.652 1.48 2.335 3.252 2.316 5.085-.02 1.793-.704 3.647-2.316 5.038 0 0-.67.322-1.167-.178-.496-.5-.196-1-.196-1 2.316-2.3 2.316-5.582 0-7.766 0 0-.295-.553.196-.974z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=2.25, y=1.5, width=19.5, height=21 -->
    <symbol id="icon-profile" viewBox="2.25 1.5 19.5 21">
        <path d="M21.75 22.5H3.224a.967.967 0 0 1-.974-.96c0-.53.436-.959.974-.959h16.578v-2.449a2.832 2.832 0 0 0-1.725-2.597l-3.193-1.312a2.326 2.326 0 0 1-.535-4.016c1.258-.943 1.788-2.489 1.381-4.035-.426-1.62-1.938-2.753-3.676-2.753-1.06 0-2.056.407-2.804 1.145a3.681 3.681 0 0 0-1.115 2.642 3.735 3.735 0 0 0 1.516 3 2.327 2.327 0 0 1-.534 4.017l-3.194 1.312a2.822 2.822 0 0 0-1.72 2.426.968.968 0 0 1-1.03.9.965.965 0 0 1-.914-1.015c.11-1.796 1.218-3.357 2.894-4.074l.013-.006 3.2-1.314a.42.42 0 0 0 .106-.717A5.631 5.631 0 0 1 6.187 7.21 5.574 5.574 0 0 1 7.87 3.209 5.914 5.914 0 0 1 12.054 1.5c2.626 0 4.913 1.724 5.562 4.191a5.703 5.703 0 0 1-2.087 6.043.42.42 0 0 0 .105.718l3.213 1.32a4.75 4.75 0 0 1 2.903 4.36V22.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=20.53 -->
    <symbol id="icon-purchases" viewBox="1.5 1.5 21 20.53">
        <path d="M21.975 3.62c.327.408.525.921.525 1.493v14.583a2.34 2.34 0 0 1-2.333 2.333H3.833A2.333 2.333 0 0 1 1.5 19.696V5.113c0-.572.198-1.085.537-1.494l1.35-1.477A1.693 1.693 0 0 1 4.73 1.5h14a1.76 1.76 0 0 1 1.354.63l1.892 1.49zM3.25 5.357V19.28a1 1 0 0 0 1 1h15.5a1 1 0 0 0 1-1V5.36H3.25zm.583-1.525l1.132-1.166H18.9l1.5 1.167H3.833zM5 9.433v-2.1h4.667v2.1H5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=20.53 -->
    <symbol id="icon-selling" viewBox="1.5 1.5 21 20.53">
        <path d="M13.718 22.38l-2.187-.048a.955.955 0 0 1-.937-.973.956.956 0 0 1 .98-.93l1.422.03 7.59-6.84v-.883l-8.996-9.33-6.801-.001-1.37 1.366.015 6.781L9.85 18.23a.948.948 0 0 1-.032 1.346.963.963 0 0 1-1.355-.03l-6.946-7.229-.018-8.33L3.993 1.5l8.415.003L22.503 11.97v2.49l-8.785 7.919zm-6.313-8.56L6.07 12.455l6.41-6.19 1.336 1.366-6.41 6.19zm3.21 3.259L9.28 15.713l6.41-6.19 1.336 1.366-6.41 6.19zm-2.4-10.16c0 .75-.613 1.358-1.368 1.358a1.363 1.363 0 0 1-1.368-1.359c0-.75.613-1.359 1.368-1.359.755 0 1.368.609 1.368 1.36z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.2, width=21, height=21.54 -->
    <symbol id="icon-settings" viewBox="1.5 1.2 21 21.54">
        <path d="M21.981 13.87c.533.421.672 1.164.337 1.776l-1.965 3.4a1.373 1.373 0 0 1-1.715.616l-2.01-.807a8.44 8.44 0 0 1-.977.571l-.305 2.12a1.37 1.37 0 0 1-1.366 1.194h-3.952c-.69 0-1.281-.506-1.365-1.178l-.306-2.135a8.076 8.076 0 0 1-.982-.57l-2.033.816c-.628.228-1.356-.02-1.677-.608l-1.987-3.438a1.388 1.388 0 0 1 .352-1.759l1.697-1.327a7.266 7.266 0 0 1 0-1.142l-1.7-1.33a1.374 1.374 0 0 1-.338-1.775l1.965-3.4a1.373 1.373 0 0 1 1.715-.616l2.01.807a8.44 8.44 0 0 1 .978-.571l.304-2.12A1.37 1.37 0 0 1 10.028 1.2h3.952c.69 0 1.28.506 1.364 1.178l.306 2.135c.339.165.666.356.983.57l2.033-.816c.628-.228 1.356.02 1.676.608l1.987 3.438a1.388 1.388 0 0 1-.351 1.759l-1.698 1.327a7.19 7.19 0 0 1 0 1.142l1.701 1.33zm-3.179 4.305l.009-.015a.326.326 0 0 0-.009.015zm-5.218 3.135l.002-.015-.002.015zm-3.158.015a.444.444 0 0 0-.002-.015l.002.015zm-5.21-3.131a.46.46 0 0 0-.012-.02l.012.02zM3.225 9.19a.402.402 0 0 0 .003-.006l-.003.006zm15.567-3.445a.46.46 0 0 0 .011.02l-.011-.02zm1.815 9.308L18.4 13.328l.063-.5c.042-.338.062-.599.062-.858 0-.26-.02-.52-.062-.858l-.063-.5.397-.31 1.81-1.416-1.634-2.826-2.603 1.045-.403-.31a6.329 6.329 0 0 0-1.465-.85l-.47-.192-.073-.504-.325-2.27h-3.26l-.398 2.774-.47.192a6.69 6.69 0 0 0-1.474.857l-.4.3-.465-.186-2.132-.856L3.4 8.886l2.206 1.726-.062.5a6.893 6.893 0 0 0-.063.858c0 .253.021.527.063.858l.062.5-.397.31-1.81 1.416 1.634 2.826 2.604-1.045.402.31a6.37 6.37 0 0 0 1.465.85l.471.192.072.504.326 2.27h3.26l.397-2.774.471-.192a6.69 6.69 0 0 0 1.474-.857l.4-.3.465.186 2.132.856 1.634-2.826zm-8.603-.515a2.573 2.573 0 0 0 2.569-2.569 2.573 2.573 0 0 0-2.57-2.569 2.573 2.573 0 0 0-2.568 2.569 2.573 2.573 0 0 0 2.569 2.569zm0 1.779a4.351 4.351 0 0 1-4.348-4.348 4.351 4.351 0 0 1 4.348-4.348 4.351 4.351 0 0 1 4.347 4.348 4.351 4.351 0 0 1-4.347 4.348z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=12.5 -->
    <symbol id="icon-watch" viewBox="1.5 5.25 21 12.5">
        <path d="M14.744 16.177c-1.226 0-2.223-1.015-2.223-2.262s.997-2.262 2.223-2.262 2.224 1.015 2.224 2.262-.998 2.262-2.224 2.262m-9.452 0c-1.226 0-2.224-1.015-2.224-2.262s.998-2.262 2.224-2.262c1.225 0 2.223 1.015 2.223 2.262s-.998 2.262-2.223 2.262M21.958 5.434c-.775-.251-2.572-.184-3.164 1.636l-.283.872-.004.012-.027.083.003.001a1.54 1.54 0 0 0-.024.122l-.855 3.268c-.695-.816-1.712-1.344-2.86-1.344a3.778 3.778 0 0 0-3.171 1.74h-3.11a3.777 3.777 0 0 0-3.171-1.74c-.468 0-.91.097-1.325.254l.6-2.112.242-.747c.285-.88 1.18-.632 1.187-.63a.783.783 0 0 0 .988-.504.783.783 0 0 0-.503-.988c-.777-.253-2.572-.184-3.164 1.636L2.759 8.71l.036.012-1.176 4.149c-.018.06-.011.12-.014.18a3.86 3.86 0 0 0-.105.864c0 2.113 1.7 3.831 3.792 3.831 2.09 0 3.792-1.718 3.792-3.83 0-.18-.03-.35-.053-.522h1.973c-.024.172-.052.342-.052.521 0 2.113 1.702 3.831 3.792 3.831 2.008 0 3.641-1.59 3.769-3.586l1.533-5.867.24-.738c.286-.878 1.18-.63 1.187-.629a.784.784 0 1 0 .485-1.492"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=2.5, width=21, height=19.5 -->
    <symbol id="icon-save" viewBox="1.5 2.5 21 20">
        <path d="M16.725 2.25c-1.827 0-3.58.86-4.725 2.221-1.145-1.36-2.898-2.221-4.725-2.221C4.041 2.25 1.5 4.822 1.5 8.095c0 4.017 3.57 7.29 8.977 12.263L12 21.75l1.523-1.403C18.93 15.385 22.5 12.112 22.5 8.095c0-3.273-2.541-5.845-5.775-5.845zm-4.62 16.525L12 18.88l-.105-.106C6.897 14.195 3.6 11.165 3.6 8.095c0-2.126 1.575-3.72 3.675-3.72 1.617 0 3.192 1.052 3.748 2.508h1.964c.546-1.456 2.121-2.508 3.738-2.508 2.1 0 3.675 1.594 3.675 3.72 0 3.07-3.297 6.1-8.295 10.68z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.95, width=21.6, height=20.21 -->
    <symbol id="icon-save-bold" viewBox="1.2 1.95 22 21">
        <path d="M7.275 4.675c-1.924 0-3.375 1.47-3.375 3.419 0 2.925 3.219 5.893 8.1 10.37 4.881-4.475 8.099-7.444 8.099-10.37 0-1.949-1.45-3.419-3.374-3.419-1.5 0-2.954.972-3.458 2.313l-.072.195h-2.379l-.073-.193c-.513-1.341-1.971-2.315-3.468-2.315zM12 22.156l-1.725-1.578C4.793 15.537 1.2 12.234 1.2 8.094c0-3.446 2.669-6.144 6.075-6.144 1.763 0 3.502.768 4.725 2.07 1.221-1.302 2.963-2.07 4.725-2.07 3.406 0 6.075 2.698 6.075 6.144 0 4.146-3.605 7.455-9.062 12.46L12 22.156z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.95, width=21.6, height=20.21 -->
    <symbol id="icon-save-selected" viewBox="1.2 1.95 22 21">
        <path d="M12 22.156l-1.725-1.578C4.793 15.537 1.2 12.234 1.2 8.094c0-3.446 2.669-6.144 6.075-6.144 1.763 0 3.502.768 4.725 2.07 1.221-1.302 2.963-2.07 4.725-2.07 3.406 0 6.075 2.698 6.075 6.144 0 4.146-3.605 7.455-9.062 12.46L12 22.156z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=3, width=21, height=18 -->
    <symbol id="icon-camera" viewBox="1.5 3 21 18">
        <path d="M12 9.387c-1.82 0-3.3 1.432-3.3 3.194 0 1.76 1.48 3.193 3.3 3.193 1.82 0 3.3-1.433 3.3-3.193 0-1.762-1.48-3.194-3.3-3.194zm0 8.13c-2.812 0-5.1-2.215-5.1-4.936 0-2.722 2.288-4.936 5.1-4.936 2.813 0 5.1 2.214 5.1 4.936 0 2.72-2.287 4.935-5.1 4.935zM4.32 6.546c-.563 0-1.02.421-1.02.937v10.838c0 .516.457.936 1.02.936h15.36c.563 0 1.02-.42 1.02-.936V7.484c0-.516-.457-.936-1.02-.936h-3.246l-1.919-1.806h-5.03l-1.92 1.806H4.32zM19.68 21H4.32c-1.555 0-2.82-1.202-2.82-2.678V7.484c0-1.477 1.265-2.678 2.82-2.678h2.515L8.755 3h6.491l1.92 1.806h2.514c1.555 0 2.82 1.2 2.82 2.678v10.838c0 1.476-1.265 2.678-2.82 2.678z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.27, y=1.5, width=15.47, height=21 -->
    <symbol id="icon-mic" viewBox="4.27 1.5 15.47 21">
        <path d="M17.87 11.447c0 3.316-2.808 5.637-5.858 5.637s-5.858-2.32-5.858-5.637H4.275c0 3.77 3.006 6.886 6.632 7.428V22.5h2.21v-3.625c3.625-.542 6.632-3.659 6.632-7.428h-1.88zm-7.184-6.742c0-.73.596-1.326 1.326-1.326.73 0 1.326.597 1.326 1.326l-.01 6.853a1.32 1.32 0 0 1-1.316 1.326 1.33 1.33 0 0 1-1.326-1.326V4.705zm1.326 10.058a3.316 3.316 0 0 0 3.316-3.316V4.816a3.316 3.316 0 1 0-6.632 0v6.631a3.316 3.316 0 0 0 3.316 3.316z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1, y=1, width=22, height=22 -->
    <symbol id="icon-clear" viewBox="1 1 22 22">
        <path d="M12 10.542L8.575 7.117a1 1 0 0 0-1.414 0l-.044.044a1 1 0 0 0 0 1.414L10.542 12l-3.425 3.425a1 1 0 0 0 0 1.414l.044.044a1 1 0 0 0 1.414 0L12 13.458l3.425 3.425a1 1 0 0 0 1.414 0l.044-.044a1 1 0 0 0 0-1.414L13.458 12l3.425-3.425a1 1 0 0 0 0-1.414l-.044-.044a1 1 0 0 0-1.414 0L12 10.542zM12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.65, y=2.1, width=14.7, height=19.96 -->
    <symbol id="icon-top-seller" viewBox="4.65 2.1 14.7 19.96">
        <path d="M13.986 19.084h-.993v-3.079L12 15.012l-.993.993v3.08h-.993a1.986 1.986 0 0 0-1.987 1.986v.993h7.946v-.993a1.986 1.986 0 0 0-1.987-1.987m1.192-8.343l1.39 5.264L12 12.231l-4.569 3.774 1.39-5.164L4.65 7.364l5.364-.298L12 2.1l1.986 4.966 5.364.298-4.172 3.377"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.33, y=4, width=21.33, height=16 -->
    <symbol id="icon-fast-n-free" viewBox="1.33 4 21.33 16">
        <path d="M19.758 8h-2.91V4H3.273c-1.067 0-1.94.9-1.94 2v11h1.94c0 1.66 1.3 3 2.909 3 1.61 0 2.909-1.34 2.909-3h5.818c0 1.66 1.3 3 2.91 3 1.609 0 2.908-1.34 2.908-3h1.94v-5l-2.91-4zM6.182 18.5c-.805 0-1.455-.67-1.455-1.5s.65-1.5 1.455-1.5 1.454.67 1.454 1.5-.65 1.5-1.454 1.5zm13.09-9l1.901 2.5h-4.325V9.5h2.425zm-1.454 9c-.805 0-1.454-.67-1.454-1.5s.65-1.5 1.454-1.5c.805 0 1.455.67 1.455 1.5s-.65 1.5-1.455 1.5z"/>
    </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.

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