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": "^12"
}
}
Bundling
Skin supports Webpack and Lasso.js.
Webpack
Add @ebay/skin and @ebay/browserslist-config as dependencies to package.json.
The Skin webpack modules will import CSS so make sure to also have css-loader and style-loader as dev dependencies.
{
"dependencies": {
"@ebay/browserslist-config": "^1",
"@ebay/skin": "^12",
},
"devDependencies": {
"css-loader": "^3",
"style-loader": "^1"
}
}
Webpack configuration:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
],
},
};
Usage:
import "@ebay/skin/button";
Lasso.js
Add the @ebay/skin module as a browser.json dependency to include the entire set of Skin modules.
{
"dependencies": [
"@ebay/skin"
]
}
Or, alternatively, by specifying modules on a per-need basis.
{
"dependencies": [
"@ebay/skin/less",
"@ebay/skin/global",
"@ebay/skin/button",
"@ebay/skin/icon"
]
}
Flags
Skin has the ability to switch between different, yes you guessed it, skins. Two skins are currently supported: default and legacy.
Both skins are visual expressions of eBay's design system language. All modules have identical markup, whichever skin is chosen; however, not all icons, variables and mixins are supported across versions, therefore be sure to reference the appropriate documentation.
To access the older legacy skin, a flag must be used.
Webpack Setup
To support flags, arc-webpack must be installed:
npm add -D arc-webpack
Configure Webpack like so:
const AdaptivePlugin = require("arc-webpack");
...
...
plugins: [
new AdaptivePlugin({ flags: { "ds-4": true } })
]
Lasso.js Setup
To opt into the legacy DS4 skin, Lasso.js requires the ds-4 conditional dependency flag
myLasso.lassoPage({
flags: ['ds-4']
});
Or, alternatively, using the Marko Taglib.
<lasso-page flags=['ds-4']>
...
</lasso-page>
CDN
A CSS file containing the full collection of modules is available via the following url:
https://ir.ebaystatic.com/cr/v/c1/skin/v12.3.1/ds6/skin.min.css
Themes
CSS Custom Properties allow various aspects of the design system language to be dynamically "themed". Typically these aspects are colors, font, border-radius, spacing and grids.
Legacy Border-Radius
Our very first theme allows apps to opt out of the new rounded corner look and feel that was introduced in version 12. This legacy "theme" is intended only for teams wishing to upgrade their version of Skin, but who are not ready to take this particular change.
In order to use the theme, and switch off rounded corners, include the module @ebay/skin/rounded-off.
NOTE: Make sure to have this module loaded LAST so that it will properly override the rounded styles.
Animation
This section provides information on CSS animations/transitions that are common across one or more modules.
Dialog Transitions
Skin currently supports two types of dialog transition: fade and slide. Because CSS cannot transition an element to and from hidden (i.e. "display:none"), transitions are acheived using two classes applied during different stages of the animation. Before applying an animation class to the dialog component you must first apply the primer class which will be $name-init where $name is the base class. The dialog component has two different animation base classes dialog--show and dialog--hide.
Firstly the -init postfix must be applied to dialog component to prime animation. One animation frame later the -init postfix must be removed and the base class applied to start the animation. Finally once the animation has completed remove the base class.
An example implementation is shown below.
const dialogEl = document.querySelector(".dialog");
const windowEl = dialogEl.querySelector(".dialog__window");
const openBtnEl = document.querySelector("#dialog-open");
const closeBtnEl = dialogEl.querySelector(".dialog__close");
// Trigger dialog show animation.
openBtnEl.addEventListener("click", () => {
dialogEl.classList.add("dialog--show-init");
dialogEl.removeAttribute("hidden");
requestAnimationFrame(() => requestAnimationFrame(() => {
// Two RAFS to ensure this happens on the next animation frame.
dialogEl.classList.remove("dialog--show-init");
dialogEl.classList.add("dialog--show");
windowEl.addEventListener("transitionend", () => {
/**
* The window animation is the longest, so we wait for it to
* finish before removing the classes.
*/
dialogEl.classList.remove("dialog--show");
}, { once: true });
}));
});
// Trigger dialog hide animation. (In the real world the dialog mask) should also be handled.
closeBtnEl.addEventListener("click", () => {
dialogEl.classList.add("dialog--hide-init");
dialogEl.setAttribute("hidden", "");
requestAnimationFrame(() => requestAnimationFrame(() => {
// Two RAFS to ensure this happens on the next animation frame.
dialogEl.classList.remove("dialog--hide-init");
dialogEl.classList.add("dialog--hide");
windowEl.addEventListener("transitionend", () => {
/**
* The window animation is the longest, so we wait for it to
* finish before removing the classes.
*/
dialogEl.classList.remove("dialog--hide");
}, { once: true });
}));
});

@ebay/skin/badge
DS v1.2.0A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.
The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the icon button and menu modules.
<span class="badge" role="img" aria-label="1 notification">1</span>



@ebay/skin/carousel
DS v1.1.0Carousels 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.
<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.
<div class="carousel carousel--slides">
<div class="carousel__container">
<h2 class="clipped" aria-live="polite">
<span>Top Products - Slide 1 of 2</span>
</h2>
<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">
<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>
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.
<div class="carousel carousel--slides">
<div class="carousel__container">
<h2 class="clipped" aria-live="polite">
<span>Top Products - Slide 1 of 4</span>
</h2>
<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">
<ul class="carousel__list">
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</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>
<button class="carousel__playback" aria-label="Play - Top Products">
<svg class="icon icon--play" focusable="false" aria-hidden="true">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</div>

@ebay/skin/checkbox
DS v1.2.0A checkbox is a form control that allows multiple selections from a group of choices.
The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.
The checkbox is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!
Default Checkbox
Use the checkbox base class to create a checkbox.
NOTE: Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state.
<span class="checkbox">
<input class="checkbox__control" type="checkbox" checked />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" focusable="false" height="18" width="18">
<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>
Mixed Checkbox
For a mixed checkbox, that is partially checked, or indeterminate, apply the aria-checked="mixed" state and use icon-checkbox-mixed.
NOTE: JavaScript is required to toggle the aria-checked state.
<span class="checkbox">
<input aria-checked="mixed" class="checkbox__control" type="checkbox" checked />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-unchecked"></use>
</svg>
<svg class="checkbox__checked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-mixed"></use>
</svg>
</span>
</span>
Large Checkbox
For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-large, #icon-checkbox-checked-large and #icon-checkbox-partial-large icons.
<span class="checkbox checkbox--large">
<input class="checkbox__control" type="checkbox" checked />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" focusable="false" height="24" width="24">
<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.
<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
DS v2.2.0Static sites that do not have access to the LESS variables can leverage the product palette via the color module class names.
- color-background-default
- color-text-default
- color-text-secondary, color-action-secondary
- color-text-confirmation
- color-separator, color-image-border
- color-action-primary, color-link-default
- color-text-disabled, color-action-disabled
- color-action-hover, color-link-hover
- color-link-visited
- color-status-confirmation
- color-status-attention, color-action-destroy
- color-status-information

@ebay/skin/combobox
DS v2.0.3An 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>
Icon Button Combobox
In some cases, the suggestion overlay might be controlled by an icon button. Use an 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/details
DS v1.2.0A 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details" open>
<summary class="details__summary">
<span class="details__label">Details</span>
<span class="details__icon" hidden>
<svg class="icon icon--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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details">
<summary class="details__summary details__summary--center">
<span class="details__label">Details</span>
<span class="details__icon" hidden>
<svg class="icon icon--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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details">
<summary class="details__summary details__summary--small">
<span class="details__label">Details</span>
<span class="details__icon" hidden>
<svg class="icon icon--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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details" dir="rtl">
<summary class="details__summary">
<span class="details__label">Details</span>
<span class="details__icon" hidden>
<svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
<use xlink:href="#icon-dropdown"></use>
</svg>
</span>
</summary>
<p>Sample content</p>
</details>

@ebay/skin/drawer-dialog
DS v1.2.0The drawer is a modal dialog that opens and slides out from the bottom of the screen. It is intended for small, mobile screens.
When opened, a drawer will slide out only as far as its content, up to a maximum screen height of 50%.
An opened drawer can be expanded beyond 50%, all the way to 95% screen height, by applying the .drawer-dialog__window--expanded modifier class. This class should be added with JavaScript when scrolling the content or clicking the handle button.
<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog" hidden role="dialog">
<div class="drawer-dialog__window">
<div class="drawer-dialog__window drawer-dialog__window--slide">
<button aria-label="Expand Dialog" class="drawer-dialog__handle" type="button"></button>
<div class="drawer-dialog__header">
<h2 id="drawer-dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="drawer-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<!-- content removed for brevity -->
</div>
</div>
</div>
</div>

@ebay/skin/fullscreen-dialog
DS v2.1.0A fullscreen dialog is a child window that takes up the entire viewport. Typically used on small screens.
The dialog must remain in a hidden state for all users and devices until opened.
Heading
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.
<div aria-labelledby="dialog-title" aria-modal="true" class="fullscreen-dialog" hidden role="dialog">
<div class="fullscreen-dialog__window">
<div id="dialog-title-fade-1" class="fullscreen-dialog__header">
<button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<h2 class="large-text-1 bold-text">Heading</h2>
</div>
<div class="fullscreen-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Sliding Fullscreen Dialog
The fullscreen dialog should slide in and out, using the fullscreen-dialog__window--slide modifier.
<div aria-labelledby="dialog-title" aria-modal="true" class="fullscreen-dialog" hidden role="dialog">
<div class="fullscreen-dialog__window dialog__window--slide">
<div class="fullscreen-dialog__header">
<h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn fullscreen-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="fullscreen-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>


@ebay/skin/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.
<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.
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.
Stacked Field
For a label stacked above the control, use the field__label--stacked element modifier.
Again, multiple fields can be laid out inline by using a span tag, as per the example below.
<span class="field">
<label class="field__label field__label--stacked" for="field1">Field 1</label>
<span class="textbox">
<input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
</span>
</span>
<span class="field">
<label class="field__label field__label--stacked" for="field2">Field 2</label>
<span class="field__control">
<span class="select">
<select name="field2" id="field2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--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 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.
<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.
<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.
<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.
<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.
<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.
<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.
Text Below Stacked Field
A description can be placed underneath a stacked field simply by using a block-level tag, such as div.
<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.
<span class="field field--table">
<div class="field__row">
<span><!-- empty cell--></span>
<span class="field__description" id="field1-description">
<span>Field description or error</span>
</span>
</div>
<div class="field__row">
<label class="field__label" for="field1">Field Label</label>
<span class="textbox">
<input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
</span>
</div>
</span>
Text Below Floating label
When you use a floating label, you can have the description text below
<span class="field floating-label">
<label class="floating-label__label" for="field1">Field 1</label>
<div class="field__control textbox">
<input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
</div>
<div class="field__description" id="field1-description">
<span>Field description or error</span>
</div>
</span>
Fluid Field
Form control elements (such as select and input) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.
For a stacked field the control must be set to 100% width (using the fluid utility class) to fill all available space.
<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.
<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.
<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/floating-label
DS v2.0.3Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.
Floating Label with no Value
If the textbox has no value, the label can be positioned inside the textbox.
<span class="floating-label">
<label class="floating-label__label" for="first-name">First Name</label>
<span class="textbox">
<input class="textbox__control" id="first-name" type="text" />
</span>
</span>
Floating Label with Value
If the textbox has a value, the label must be positioned above the textbox.
<span class="floating-label">
<label class="floating-label__label" for="last-name">Last Name</label>
<span class="textbox">
<input class="textbox__control" id="last-name" type="text" value="Smith" />
</span>
</span>
Large floating label
<span class="floating-label floating-label--large">
<label class="floating-label__label" for="dob">Date Of Birth</label>
<span class="textbox">
<input class="textbox__control" id="dob" type="text" />
</span>
</span>
Floating Label with Disabled Textbox
Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.
<span class="floating-label">
<label class="floating-label__label floating-label__label--disabled" for="first-name">First Name</label>
<span class="textbox">
<input class="textbox__control" id="first-name" type="text" disabled />
</span>
</span>
Floating Label with placeholders
The placeholder should only be shown when the textbox is focused and there is no text
<span class="floating-label">
<label class="floating-label__label" for="first-name">First Name</label>
<span class="textbox">
<input class="textbox__control" id="first-name" type="text" placeholder="No spaces or numbers allowed"/>
</span>
</span>
Floating Label with Invalid Textbox
Set the aria-invalid property to true and add floating-label__label--invalid to the label to semantically and visually highlight the invalid state.
<span class="floating-label">
<label class="floating-label__label floating-label__label--invalid" for="first-name">First Name</label>
<span class="textbox">
<input class="textbox__control" id="first-name" type="text" aria-invalid="true" />
</span>
</span>
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="floating-label">
<label class="floating-label__label" for="first-name">Enter list of users</label>
<span class="textbox">
<textarea aria-label="Textbox demo" class="textbox__control"></textarea>
</span>
</span>
Floating label with combobox
Use the textarea tag for a multi-line textbox.
A multi-line textbox allows line breaks and has a minimum height of 200px.
<span class="combobox floating-label">
<label class="floating-label__label" for="first-name">Enter list of users</label>
<span class="combobox__control">
<input name="combobox-default" id="first-name" role="combobox" type="text" aria-haspopup="listbox"
aria-label="Combobox demo" aria-owns="listbox1" />
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
<use xlink:href="static/ds6/icons.svg#icon-dropdown"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
Floating Label Transitions
By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.
When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.
To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.
The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.

@ebay/skin/global
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
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/icon
DS v1.3.0The icon module is a bundle that provides full access to the entire range of eBay iconography via the <svg> and <use> tags.
To avoid gigantic icons when in a non-CSS state, we use the SVG width and height attributes to override the browser's default 300x150 size.
<svg class="icon icon--information" focusable="false" height="24" width="24">
<use xlink:href="#icon-information"></use>
</svg>
NOTE: Skin removes all pointer events on icons (via pointer-events: none) due to a bug in IE. To add events to these icons you should wrap them in another element and attach your events there.
Including an Icon
An icon symbol declaration can be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of a hidden SVG block.
<div hidden>
<svg>
<symbol id="icon-information" viewBox="0 0 24 24">
<path d="M0 12C0 5.373 5.373 0 12 0c6.625.006 11.994 5.375 12 12 0 6.627-5.373 12-12 12S0 18.627 0 12zm2 0c0 5.523 4.477 10 10 10 5.52-.006 9.994-4.48 10-10 0-5.523-4.477-10-10-10S2 6.477 2 12zm10-2a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1zm1-3a1 1 0 11-2 0 1 1 0 012 0z"/>
</symbol>
</svg>
</div>
NOTE: the SVG tag does not support the hidden attribute, hence a hidden wrapper element is needed.
Presentational Icons
A presentational icon provides no additional content, context or affordance to a page, section or widget.
Presentational icons require aria-hidden="true", in order to hide them from assistive technology.
<svg class="icon icon--information" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-information"></use>
</svg>
Non-Presentational Icons
A non-presentational icon provides essential content, context or affordance to a page, section or widget.
Non-presentational icons require both role="img" and an aria-label for assistive technology.
<svg class="icon icon--information" focusable="false" height="24" width="24" role="img" aria-label="Information">
<use xlink:href="#icon-information"></use>
</svg>
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 | ||||||
photo-contrast | ||||||
photo-flash | ||||||
photo-flip-camera | ||||||
photo-sharpen | ||||||
play | ||||||
profile | ||||||
purchases | ||||||
red-laser | ||||||
refresh | ||||||
remove | ||||||
save | ||||||
save-bold | ||||||
save-selected | ||||||
search | ||||||
search-bold | ||||||
selling | ||||||
send | ||||||
settings | ||||||
share | ||||||
star-empty | ||||||
star-full | ||||||
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/infotip
DS v1.1.0An infotip is a button which can be clicked to display information about another element or area on the page.
Toggle the aria-expanded state of the button to expand or collapse the infotip.
<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="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</span>
If nesting an infotip inside of a paragraph element, make sure that there are no block level elements, such as div, h1-6, or p elements.
Inside paragraph
<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="icon-btn 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>
Modal Infotip
On small screens, the infotip should launch a modal dialog.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" hidden class="lightbox-dialog lightbox-dialog--mini" id="lightbox-dialog-mini-default-0" role="dialog">
<div class="lightbox-dialog__window lightbox-dialog__window--mini">
<div class="lightbox-dialog__header">
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main" id="lightbox-dialog-title">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>

@ebay/skin/inline-notice
DS v1.3.0The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.
An inline-level notice provides tips, guidance and feedback on individual elements and form controls.
An inline-level notice may have a status of confirmation, information or attention.
Delivered on May 1, 2017
Global Shipping Program transaction.
Update your credit card.
<div class="inline-notice inline-notice--confirmation">
<span class="inline-notice__header">
<svg focusable="false" class="icon 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__main">
<p>Delivered on May 1, 2017</p>
</span>
</div>
<div class="inline-notice inline-notice--information">
<span class="inline-notice__header">
<svg focusable="false" class="icon 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__main">
<p>Global Shipping Program transaction.</p>
</span>
</div>
<div class="inline-notice inline-notice--attention">
<span class="inline-notice__header">
<svg focusable="false" class="icon 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__main">
<p>Update your credit card.</p>
</span>
</div>

@ebay/skin/less
DS vThe 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": "^12"
}
}
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();
- .typography-large-2-secondary();
- .typography-large-1();
- .typography-large-1-secondary();
- .typography-medium-bold();
- .typography-medium();
- .typography-medium-secondary();
- .typography-regular-bold();
- .typography-regular();
- .typography-regular-secondary();
- .typography-small-bold();
- .typography-small();
- .typography-small-secondary();
Grey Color Variables
- @color-white
- @color-grey1
- @color-grey2
- @color-grey3
- @color-grey4
- @color-grey5
- @color-grey6
- @color-grey7
- @color-black
Product Color Variables
- @color-background-default
- @color-text-default
- @color-text-secondary, @color-action-secondary
- @color-text-disabled, @color-action-disabled
- @color-text-confirmation
- @color-separator, @color-image-border
- @color-action-primary, @color-link-default
- @color-text-disabled, @color-action-disabled
- @color-action-hover, @color-link-hover
- @color-link-visited
- @color-status-confirmation
- @color-status-attention, @color-action-destroy
- @color-status-information
Product Color Variables (dark mode)
- @color-background-default-dark-mode
- @color-text-default-dark-mode
- @color-text-secondary-dark-mode, @color-action-secondary-dark-mode
- @color-text-disabled-dark-mode, @color-action-disabled-dark-mode
- @color-text-confirmation-dark-mode
- @color-separator-dark-mode, @color-image-border-dark-mode
- @color-action-primary-dark-mode, @color-link-default-dark-mode
- @color-text-disabled-dark-mode, @color-action-disabled-dark-mode
- @color-action-hover-dark-mode, @color-link-hover-dark-mode
- @color-link-visited-dark-mode
- @color-status-confirmation-dark-mode
- @color-status-attention-dark-mode, @color-action-destroy-dark-mode
- @color-status-information-dark-mode
Palette Color Variables
- @color-b1
- @color-b2
- @color-b3
- @color-b4
- @color-b5
- @color-b6
- @color-b7
- @color-g1
- @color-g2
- @color-g3
- @color-g4
- @color-g5
- @color-g6
- @color-g7
- @color-l1
- @color-l2
- @color-l3
- @color-l4
- @color-l5
- @color-l6
- @color-l7
- @color-m1
- @color-m2
- @color-m3
- @color-m4
- @color-m5
- @color-m6
- @color-m7
- @color-o1
- @color-o2
- @color-o3
- @color-o4
- @color-o5
- @color-o6
- @color-o7
- @color-r1
- @color-r2
- @color-r3
- @color-r4
- @color-r5
- @color-r6
- @color-r7
- @color-t1
- @color-t2
- @color-t3
- @color-t4
- @color-t5
- @color-t6
- @color-t7
- @color-y1
- @color-y2
- @color-y3
- @color-y4
- @color-y5
- @color-y6
- @color-y7

@ebay/skin/lightbox-dialog
DS v2.1.0A lightbox dialog is a modal window spawned by the main web page or application.
Heading
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.
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" hidden role="dialog">
<div class="lightbox-dialog__window">
<div class="lightbox-dialog__header">
<h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Scrolling Lightbox
The lightbox scales vertically and adds scrollbars when content overflows the viewport.
Heading
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<div aria-labelledby="dialog-title" aria-modal="true" class="dialog dialog--no-mask" hidden role="dialog">
<div class="lightbox-dialog__window lightbox-dialog__window--full">
<div class="lightbox-dialog__header">
<h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="static/ds6/icons.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ... 1</p>
<p>Lorem ... 2</p>
<p>(you get the idea)</p>
<p>Lorem ... n</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Fading Lightbox
Any lightbox can be faded in and out, using the lightbox-dialog__window--fade and lightbox-dialog--mask-fade modifiers.
The default fade duration is 16ms.
Heading
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.
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden role="dialog">
<div class="lightbox-dialog__window lightbox-dialog__window--fade">
<div class="lightbox-dialog__header">
<h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<a href="http://www.ebay.com">www.ebay.com</a>
</p>
</div>
</div>
</div>
Mini Lightbox
A mini lightbox is used primarily as an infotip for small devices. The dialog must be labelled using aria-label.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div aria-label="Mini Lightbox Example" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden role="dialog">
<div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
<div class="lightbox-dialog__header">
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
Footer in Lightbox
Call to action buttons can be placed in an optional footer section. They will be aligned to the end of the horizontal axis by default.
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" hidden role="dialog">
<div class="lightbox-dialog__window">
<div class="large-text-1 lightbox-dialog__header">
<h2 class="large-text-1 bold-text" id="lightbox-dialog-title">Heading</h2>
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="lightbox-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="lightbox-dialog__footer">
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
</div>
</div>
</div>
Confirmation Lightbox
A confirmation dialog prompts for a negative or affirmative action.
The markup requirements are very strictly: a heading, description and two buttons.
Delete Address?
You will permanently lose this address.
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden role="dialog">
<div class="lightbox-dialog__window lightbox-dialog__window--fade">
<div class="lightbox-dialog__compact-window lightbox-dialog__compact-window--fade">
<div class="lightbox-dialog__header">
<h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Delete Address?</h2>
</div>
<div class="lightbox-dialog__main">
<p id="confirmation-description">You will permanently lose this address.<p>
</div>
<div class="lightbox-dialog__footer">
<button class="btn lightbox-dialog__reject">Cancel</button>
<button class="btn btn--primary lightbox-dialog__confirm" aria-describedby="confirmation-description">Delete</button>
</div>
</div>
</div>
</div>
Alert Lightbox
An alert dialog prompts for an acknowledgement.
The markup requirements are very strictly: a heading, description and button.
NOTE: This dialog has a role of alertdialog.
Alert!
You must acknowledge this alert to continue.
<div aria-labelledby="lightbox-dialog-alert-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" hidden id="lightbox-dialog-alert-0" role="alertdialog">
<div class="lightbox-dialog__compact-window lightbox-dialog__compact-window--fade">
<div class="lightbox-dialog__header">
<h2 id="lightbox-dialog-alert-title" class="large-text-1 bold-text">Alert!</h2>
</div>
<div class="lightbox-dialog__main">
<p id="alert-description-0">You must acknowledge this alert to continue.</p>
</div>
<div class="lightbox-dialog__footer">
<button class="btn btn--primary lightbox-dialog__confirm" aria-describedby="alert-description-0">OK</button>
</div>
</div>
</div>

@ebay/skin/link
DS v1.4.0The 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.
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>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.
<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
DS v1.2.0A 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>
Long 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 lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</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/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
<style>
p {
font-family: 'Market Sans', 'Helvetica Neue', Helvetica, Arial, Roboto, sans-serif;
}
</style>
TIP: The Market Sans font-family, and all fallbacks, can also be applied using the Less variable @font-family-market-sans.



@ebay/skin/page-notice
DS v1.3.0The 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 page notice appears prominently at the top of the page for high priority use cases; often including one or more calls to action.
To aid discoverabilty of such prominent content for assistive technology, we ensure that each page notice is a labelled, landmark region.
A page notice can have a status of confirmation, attention, information or celebration.
Title copy goes here
Details...
Title copy goes here
Details...
Title copy goes here
Details...
Title copy goes here
Details...
<section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
<div class="page-notice__header">
<svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
<use xlink:href="#icon-confirmation-filled"></use>
</svg>
</div>
<div class="page-notice__main">
<h3 class="page-notice__title">Title copy goes here</h3>
<p>Details...</p>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com" class="fake-btn fake-btn--secondary fake-btn--transparent">Action</a>
</div>
</section>
<section class="page-notice page-notice--attention" role="region" aria-label="Attention">
<div class="page-notice__header">
<svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
<use xlink:href="#icon-attention-filled"></use>
</svg>
</div>
<div class="page-notice__main">
<h3 class="page-notice__title">Title copy goes here</h3>
<p>Details...</p>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com" class="fake-btn fake-btn--secondary fake-btn--transparent">Action</a>
</div>
</section>
<section class="page-notice page-notice--information" role="region" aria-label="Information">
<div class="page-notice__header">
<svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
<use xlink:href="#icon-information-filled"></use>
</svg>
</div>
<div class="page-notice__main">
<h3 class="page-notice__title">Title copy goes here</h3>
<p>Details...</p>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com" class="fake-btn fake-btn--secondary fake-btn--transparent">Action</a>
</div>
</section>
<section class="page-notice page-notice--celebration" role="region" aria-label="Success">
<div class="page-notice__header">
<svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Success">
<use xlink:href="#icon-confirmation-filled"></use>
</svg>
</div>
<div class="page-notice__main">
<h3 class="page-notice__title">Title copy goes here</h3>
<p>Details...</p>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com" class="fake-btn fake-btn--secondary fake-btn--transparent">Action</a>
</div>
</section>

@ebay/skin/pagination
DS v1.1.0Pagination allows a user to navigate back and forwards through a URL based dataset, or jump directly to any specific URL in that set.
Pagination controls may reload the entire page, or update the results immediately on the client via JavaScript.
Server-Side Pagination
Server-side pagination uses links that reload the entire page when clicked.
<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-prev"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a 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="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-next"></use>
</svg>
</a>
</nav>
Client-Side Pagination
Client-side pagination uses buttons that immediately re-render the page when clicked. The ARIA live-region must now be set to "polite".
NOTE: No JavaScript behaviour or state has been implemented in this simple demo.
<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="icon-btn 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="icon-btn 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="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-prev"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a 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="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-next"></use>
</svg>
</a>
</nav>
Pagination with dots
Apply an extra item with … before the last item in the pagination lists. Then you should hide all extra items and only show them when in the correct range. The dots and the last page should always be visible, unless there is a clear range to the last page.
<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-prev"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a 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>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=6" class="pagination__item">6</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=7" class="pagination__item">7</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=8" class="pagination__item">8</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=9" class="pagination__item">9</a>
</li>
<li>
<span class="pagination__item">…</span>
</li>
<li>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=10" class="pagination__item">10</a>
</li>
</ol>
<a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-next"></use>
</svg>
</a>
</nav>
<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-prev"></use>
</svg>
</a>
<ol class="pagination__items">
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">1</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
</li>
<li hidden>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
</li>
<li>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=6" class="pagination__item">6</a>
</li>
<li>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=7" class="pagination__item">7</a>
</li>
<li>
<a aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=8" class="pagination__item">8</a>
</li>
<li>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=9" class="pagination__item">9</a>
</li>
<li hidden>
<span class="pagination__item">…</span>
</li>
<li>
<a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=10" class="pagination__item">10</a>
</li>
</ol>
<a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
<use xlink:href="#icon-pagination-next"></use>
</svg>
</a>
</nav>

@ebay/skin/panel-dialog
DS v2.1.0Panel dialogs are modal and require a close button. They fill the entire y-axis of the screen and a portion of the x-axis.
The dialog must remain in a hidden state for all users and devices until opened.
Heading
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.
<div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog" hidden role="dialog">
<div class="panel-dialog__window">
<div class="panel-dialog__header">
<h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="panel-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
End Panel
Apply the panel-dialog__window--end modifier to display the panel at the end of the x-axis.
End panels typically contain an additional CTA button.
Heading
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.
<div aria-labelledby="dialog-title-right" aria-modal="true" class="panel-dialog" hidden id="dialog-right-panel-1" role="dialog">
<div class="panel-dialog__window panel-dialog__window--end">
<div class="panel-dialog__header">
<button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<h2 id="dialog-title-default" class="panel-dialog__title panel-dialog__title--center large-text-1 bold-text">Heading</h2>
<button class="fake-link panel-dialog__reset" type="button">Reset</button>
</div>
<div class="panel-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Sliding Panel
Panels can slide in and out, using the dialog__window--slide modifier.
The slide transition duration is 32ms. An accompanying dialog--mask-fade-slow modifier on the panel-dialog should also be applied. This slower fade matches the 32ms of the slide transition.
<div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog panel-dialog--mask-fade-slow" hidden role="dialog">
<div class="panel-dialog__window panel-dialog__window--slide">
<div class="panel-dialog__header">
<h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>