About
Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:
- Accessible
- Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup.
- Declarative
- Skin follows the BEM methodology of "Block, Element and Modifier" to ensure our HTML class name and structure is human readable and understandable.
- Decoupled
- Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework.
- Evergreen
- As the eBay design system evolves, so too does Skin, meaning apps only need to keep their Skin package updated to ensure the latest look and feel.
Skin is a pure CSS framework and is bundled with zero JavaScript. This website uses makeup-js to add interactivity to examples where needed.
![](static/skin-graphic.png)
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": "^18"
}
}
![](static/skin-graphic.png)
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": "^18",
},
"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/tokens",
"@ebay/skin/global",
"@ebay/skin/button",
"@ebay/skin/icon"
]
}
![](static/skin-graphic.png)
Token System
As of v14, Skin's token-based design system leverages CSS Custom Properties (previously it used LESS).
Tokens are grouped into three distinct sets, that cascade in the following order:
- Core tokens
- Semantic tokens for light mode
- Semantic tokens for dark mode
In order for Skin to render correctly, values for core tokens and light tokens are required.
The easiest way to satisfy this requirement is to include one of the following bundles:
It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.
![](static/skin-graphic.png)
Themes
CSS Custom Properties allow various aspects of the design system language to be dynamically "themed". Typically these aspects are colors, font, border-radius, spacing and grids.
Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.
![](static/skin-graphic.png)
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 });
}));
});
![](static/skin-graphic.png)
@ebay/skin/alert-dialog
DS v2.1An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.
The markup requirements are very strictly: a heading, description and button.
Alert!
You must acknowledge this alert to continue.
<div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" hidden role="alertdialog">
<div class="alert-dialog__window alert-dialog__window--fade">
<div class="alert-dialog__header">
<h2 id="alert-dialog-title" class="alert-dialog__title">Alert!</h2>
</div>
<div class="alert-dialog__main">
<p id="alert-description-0">You must acknowledge this alert to continue.</p>
</div>
<div class="alert-dialog__footer">
<button class="btn btn--primary alert-dialog__acknowledge" aria-describedby="alert-description-0">OK</button>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/avatar
DS v1.0Avatars are graphical assets that represent users’ identities across products.
Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.
NOTE: Avatars can be considered as decorative or informative depending on their context and surroundings. Typically, an avatar is displayed adjacent to the user's name, or a sign-in link, therefore making it decorative.
Default Avatar
The default avatar displays the first letter of the user's name.
<div class="avatar" role="img" aria-label="Profile picture - E">
<span>E</span>
</div>
The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.
<div class="avatar avatar--teal" role="img" aria-label="Profile picture - A">
<span>A</span>
</div>
<div class="avatar avatar--light-teal" role="img" aria-label="Profile picture - B">
<span>B</span>
</div>
<div class="avatar avatar--green" role="img" aria-label="Profile picture - C">
<span>C</span>
</div>
<div class="avatar avatar--lime" role="img" aria-label="Profile picture - D">
<span>D</span>
</div>
<div class="avatar avatar--yellow" role="img" aria-label="Profile picture - E">
<span>E</span>
</div>
<div class="avatar avatar--orange" role="img" aria-label="Profile picture - F">
<span>F</span>
</div>
<div class="avatar avatar--magenta" role="img" aria-label="Profile picture - G">
<span>G</span>
</div>
<div class="avatar avatar--pink" role="img" aria-label="Profile picture - G">
<span>H</span>
</div>
Custom Avatar
Avatars can be customized with an image.
NOTE: Sighted users can visually distinguish an avatar based on the image; for non-sighted users the equivalent experience is the name of the user (not a description of the image contents, e.g. "dog in car"!).
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
<div class="avatar" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
Signed-Out Avatar
The avatar-signed-out icon is used to a represent a user that is not signed in.
<div class="avatar" role="img" aria-label="Profile picture - Signed out">
<svg class="icon" aria-hidden="true">
<use href="#icon-avatar-signed-out"></use>
</svg>
</div>
Avatar Sizes
Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
![](https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg)
<div class="avatar avatar--32" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--40" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--48" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--56" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--64" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--96" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
<div class="avatar avatar--128" role="img" aria-label="Profile picture - Elizabeth">
<img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt=""/>
</div>
![](static/skin-graphic.png)
@ebay/skin/badge
DS v1.2A 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="2 notifications">2</span>
<span class="badge" role="img" aria-label="24 notifications">24</span>
<span class="badge" role="img" aria-label="99+ notifications">99+</span>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/carousel
DS v1.1Carousels 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--16" >
<use href="#icon-chevron-left-16"></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--16">
<use href="#icon-chevron-right-16"></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--16" >
<use href="#icon-chevron-left-16"></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--16">
<use href="#icon-chevron-right-16"></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--16" >
<use href="#icon-chevron-left-16"></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--16">
<use href="#icon-chevron-right-16"></use>
</svg>
</button>
</div>
<button class="carousel__playback" aria-label="Play - Top Products">
<svg class="icon icon--24" aria-hidden="true">
<use href="#icon-play-24"></use>
</svg>
</button>
</div>
![](static/skin-graphic.png)
@ebay/skin/calendar
DS v1.0The calendar module offers readonly and interactive calendar capabilities.
Both types of calendar are structured as data tables; each column representing a day of the week.
Readonly Calendar
A readonly calendar has cells containing static text or hypertext.
The current date is conveyed using calendar__cell--current and clipped text.
<div class="calendar">
<div class="calendar__body">
<div class="calendar__month">
<table>
<caption>August 2019</caption>
<thead>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
</tr>
<tr>
<td><span>6</span></td>
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td><span>10</span></td>
<td><span>11</span></td>
<td><span>12</span></td>
</tr>
<tr>
<td><span>13</span></td>
<td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
</tr>
<tr>
<td><a href="https://www.ebay.com">20</a></td>
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td><span>25</span></td>
<td><span>26</span></td>
</tr>
<tr>
<td><a href="https://www.ebay.com">27</a></td>
<td><span>28</span></td>
<td><a href="https://www.ebay.com">29</a></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
NOTE: for the eagle-eyed BEM afionados, we are saying each span has an implicit class of calendar__cell.
Read-Only Calendar with Inactive Dates
Inactive/unavailable dates are conveyed using calendar__cell--disabled and offscreen text.
<div class="calendar">
<div class="calendar__body">
<div class="calendar__month">
<table>
<caption>August 2023</caption>
<thead>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<td><span class="calendar__cell--disabled">1<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">2<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">3<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">4<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">5<span class="clipped"> - inactive</span></span></td>
</tr>
<tr>
<td><span class="calendar__cell--disabled">6<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">7<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">8<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">9<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">10<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">11<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">12<span class="clipped"> - inactive</span></span></td>
</tr>
<tr>
<td><span class="calendar__cell--disabled">13<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
</tr>
<tr>
<td><a href="https://www.ebay.com">20</a></td>
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td><span>25</span></td>
<td><span>26</span></td>
</tr>
<tr>
<td><a href="https://www.ebay.com">27</a></td>
<td><span>28</span></td>
<td><a href="https://www.ebay.com">29</a></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Read-Only Calendar with Date Range
Date ranges are conveyed using calendar__cell--selected, calendar__range, calendar__range--start, calendar__range-end and clipped text.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 - inactive | 2 - inactive | 3 - inactive | 4 - inactive | 5 - inactive | ||
6 - inactive | 7 - inactive | 8 - inactive | 9 - inactive | 10 - inactive | 11 - inactive | 12 - inactive |
13 - inactive | 14 - today | 15 | 16 | 17 - start of range | 18 - in range | 19 - in range |
20 - in range | 21 - in range | 22 - in range | 23 - in range | 24 - in range | 25 - end of range | 26 |
27 | 28 | 29 | 30 | 31 |
<div class="calendar">
<div class="calendar__body">
<div class="calendar__month">
<table>
<caption>August 2023</caption>
<thead>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<td><span class="calendar__cell--disabled">1<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">2<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">3<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">4<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">5<span class="clipped"> - inactive</span></span></td>
</tr>
<tr>
<td><span class="calendar__cell--disabled">6<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">7<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">8<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">9<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">10<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">11<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--disabled">12<span class="clipped"> - inactive</span></span></td>
</tr>
<tr>
<td><span class="calendar__cell--disabled">13<span class="clipped"> - inactive</span></span></td>
<td><span class="calendar__cell--current">14<span class="clipped"> - today</span></span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td class="calendar__cell--selected calendar__range calendar__range--start">
<span>17<span class="clipped"> - selected - start of range</span></span>
</td>
<td class="calendar__range">
<span>18<span class="clipped"> - in range</span></span>
</td>
<td class="calendar__range">
<span>19<span class="clipped"> - in range</span></span>
</td>
</tr>
<tr>
<td class="calendar__range">
<a href="#">20<span class="clipped"> - in range</span></a>
</td>
<td class="calendar__range">
<span>21<span class="clipped"> - in range</span></span>
</td>
<td class="calendar__range">
<span>22<span class="clipped"> - in range</span></span>
</td>
<td class="calendar__range">
<span>23<span class="clipped"> - in range</span></span>
</td>
<td class="calendar__range">
<span>24<span class="clipped"> - in range</span></span>
</td>
<td class="calendar__cell--selected calendar__range calendar__range--end">
<span>25<span class="clipped"> - selected - end of range</span></span>
</td>
<td><span>26</span></td>
</tr>
<tr>
<td><a href="https://www.ebay.com">27</a></td>
<td><span>28</span></td>
<td><a href="https://www.ebay.com">29</a></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Interactive Calendar
An interactive calendar uses toggle buttons to allow the input of single dates or date ranges.
NOTE: a fully functional and accessible interactive calendar requires JavaScript and is outside the scope of a CSS library such as eBay Skin. The examples below are NOT fully functional and serve to demonstrate the necessary HTML semantics and styling hooks only.
Interactive Calendar With Single Date Selection
A single date selection is conveyed using aria-pressed.
NOTE: in comparison to the readonly calendar, with buttons we can now leverage the disabled property and aria-current instead of clipped text.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
<div class="calendar">
<div class="calendar__body">
<div class="calendar__month">
<table>
<caption>August 2023</caption>
<thead>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<td><button disabled>1</button></td>
<td><button disabled>2</button></td>
<td><button disabled>3</button></td>
<td><button disabled>4</button></td>
<td><button disabled>5</button></td>
</tr>
<tr>
<td><button disabled>6</button></td>
<td><button disabled>7</button></td>
<td><button disabled>8</button></td>
<td><button disabled>9</button></td>
<td><button disabled>10</button></td>
<td><button disabled>11</button></td>
<td><button disabled>12</button></td>
</tr>
<tr>
<td><button disabled>13</button></td>
<td><button aria-current="date">14</button></td>
<td><button>15</button></td>
<td><button>16</button></td>
<td class="calendar__cell--selected">
<button aria-pressed="true">17</button>
</td>
<td><button>18</button></td>
<td><button>19</button></td>
</tr>
<tr>
<td><button>20</button></td>
<td><button>21</button></td>
<td><button>22</button></td>
<td><button>23</button></td>
<td><button>24</button></td>
<td><button>25</button></td>
<td><button>26</button></td>
</tr>
<tr>
<td><button>27</button></td>
<td><button>28</button></td>
<td><button>29</button></td>
<td><button>30</button></td>
<td><button>31</button></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Interactive Calendar With Date Range Selection
Date ranges are bookended by two buttons with the aria-pressed property. All buttons in between these dates leverage clipped text for assistive technology.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
<div class="calendar">
<div class="calendar__body">
<div class="calendar__month">
<table>
<caption>August 2023</caption>
<thead>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<td><button disabled>1</button></td>
<td><button disabled>2</button></td>
<td><button disabled>3</button></td>
<td><button disabled>4</button></td>
<td><button disabled>5</button></td>
</tr>
<tr>
<td><button disabled>6</button></td>
<td><button disabled>7</button></td>
<td><button disabled>8</button></td>
<td><button disabled>9</button></td>
<td><button disabled>10</button></td>
<td><button disabled>11</button></td>
<td><button disabled>12</button></td>
</tr>
<tr>
<td><button disabled>13</button></td>
<td><button aria-current="date">14</button></td>
<td><button>15</button></td>
<td><button>16</button></td>
<td class="calendar__cell--selected calendar__range calendar__range--start">
<button aria-label="17 - start of range" aria-pressed="true">17</button>
</td>
<td class="calendar__range">
<button aria-label="18 - in range">18</button>
</td>
<td class="calendar__range">
<button aria-label="19 - in range">19</button>
</td>
</tr>
<tr>
<td class="calendar__range">
<button aria-label="20 - in range">20</button>
</td>
<td class="calendar__range">
<button aria-label="21 - in range">21</button>
</td>
<td class="calendar__range">
<button aria-label="22 - in range">22</button>
</td>
<td class="calendar__range">
<button aria-label="23 - in range">23</button>
</td>
<td class="calendar__range">
<button aria-label="24 - in range">24</button>
</td>
<td class="calendar__cell--selected calendar__range calendar__range--end">
<button aria-label="25 - end of range" aria-pressed="true">25</span>
</td>
<td><button>26</button></td>
</tr>
<tr>
<td><button>27</button></td>
<td><button>28</button></td>
<td><button>29</button></td>
<td><button>30</button></td>
<td><button>31</button></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Calendar With Header Pagination
The calendar module allows an optional header section for pagination between months.
<div class="calendar">
<div class="calendar__header">
<div class="calendar__header--inner">
<button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Previous Month - July 2023">
<svg aria-hidden="true" class="icon icon--24">
<use href="#icon-chevron-left-24"></use>
</svg>
</button>
<h3>August 2023</h3>
<button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Next Month - September 2023">
<svg aria-hidden="true" class="icon icon--24">
<use href="#icon-chevron-right-24"></use>
</svg>
</button>
</div>
</div>
<div class="calendar__body">
<div class="calendar__month">
<!-- readonly or interactive table goes here -->
</div>
</div>
</div>
Multi-month Calendar with Header Pagination
Multiple instances of calendar__month can be rendered inside of the calendar__body.
July 2023
August 2023
September 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 - today | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
<div class="calendar">
<div class="calendar__header">
<div class="calendar__header--inner">
<button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Previous Month - July 2019">
<svg aria-hidden="true" class="icon icon--24">
<use href="#icon-chevron-left-24"></use>
</svg>
</button>
<h3>July 2023</h3>
<h3>August 2023</h3>
<h3>September 2023</h3>
<button variant="icon" class="icon-btn icon-btn--small icon-btn--transparent" aria-label="Next Month - November 2019">
<svg aria-hidden="true" class="icon icon--24">
<use href="#icon-chevron-right-24"></use>
</svg>
</button>
</div>
</div>
<div class="calendar__body">
<div class="calendar__month">
<!-- readonly or interactive table goes here -->
</div>
<div class="calendar__month">
<!-- readonly or interactive table goes here -->
</div>
<div class="calendar__month">
<!-- readonly or interactive table goes here -->
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/checkbox
DS v2.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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></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-18.
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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-mixed-18"></use>
</svg>
</span>
</span>
Large Checkbox
For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-24, #icon-checkbox-checked-24 and #icon-checkbox-unchecked-24 icons.
<span class="checkbox checkbox--large">
<input class="checkbox__control" type="checkbox" checked />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" height="24" width="24" aria-hidden="true">
<use href="#icon-checkbox-unchecked-24"></use>
</svg>
<svg class="checkbox__checked" height="24" width="24" aria-hidden="true">
<use href="#icon-checkbox-checked-24"></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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></use>
</svg>
</span>
</span>
Grouped Checkboxes
A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).
A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.
The following example uses the field module for simple layout of checkbox fields and labels.
<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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></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" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-checkbox-3">Option 3</label>
</span>
</fieldset>
TIP: For large checkboxes, wrap each label and control inside of a field__group element to maintain vertical alignment.
To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.
<fieldset>
<legend>Choose an Option</legend>
<div class="field">
<span class="checkbox field__control">
<input class="checkbox__control" id="group-checkbox-4" type="checkbox" value="1" name="checkbox-group" checked />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-checkbox-4">Option 1</label>
</div>
<div class="field">
<span class="checkbox field__control">
<input class="checkbox__control" id="group-checkbox-5" type="checkbox" value="2" name="checkbox-group" />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-checkbox-5">Option 2</label>
</div>
<div class="field">
<span class="checkbox field__control">
<input class="checkbox__control" id="group-checkbox-6" type="checkbox" value="3" name="checkbox-group" />
<span class="checkbox__icon" hidden>
<svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-unchecked-18"></use>
</svg>
<svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-checkbox-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-checkbox-6">Option 3</label>
</div>
</fieldset>
![](static/skin-graphic.png)
@ebay/skin/chart-legend
DS v1.0A representation of legend keys and their values on the plotted area of any chart or graph.
- Portion 1
- 10%
- Portion 2
- 20%
- Portion 3
- 30%
- Portion 4
- 30%
- Portion 5
- 10%
<div style="width: 250px">
<div class="chart-legend">
<dl aria-label="Example donut chart legend">
<div class="chart-legend__item chart-legend__item">
<dt class="chart-legend__label">Portion 1</dt>
<dd class="chart-legend__value">10%</dd>
</div>
<div class="chart-legend__item chart-legend__item">
<dt class="chart-legend__label">Portion 2</dt>
<dd class="chart-legend__value">20%</dd>
</div>
<div class="chart-legend__item chart-legend__item">
<dt class="chart-legend__label">Portion 3</dt>
<dd class="chart-legend__value">30%</dd>
</div>
<div class="chart-legend__item chart-legend__item">
<dt class="chart-legend__label">Portion 4</dt>
<dd class="chart-legend__value">30%</dd>
</div>
<div class="chart-legend__item chart-legend__item">
<dt class="chart-legend__label">Portion 5</dt>
<dd class="chart-legend__value">10%</dd>
</div>
</dl>
<div>
</div>
![](static/skin-graphic.png)
@ebay/skin/chip
DS v1.0.0A chip represents a descrete highlighted value.
Static Chip
A static chip simply for informational purposes.
<span class="chip">
<span class="chip__text">Football</span>
</span>
Interactive Chip
An interactive chip has a delete button inside for chip removal.
<span class="chip">
<span id="chip-interactive-1-text" class="chip__text">Football</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="icons.svg#icon-close-12"></use>
</svg>
</button>
</span>
Chip Containers
When chips appear next to each other in a set, spacing and positioning adjustments should be made on the container, and if necessary, margins adjusted as such. Please review design documentation and follow the guidance here for appropriate specifications.
Note on Chips in Containers
Chips have a display of inline-flex so they will naturally inherit some native inline attributes. One of those is the implied white space between each one. Bear this mind when creating your container.
Here is an example of a container constrained to 300px (for vertical spacing demo reasons) that uses flex with wrapping to remove the whitespace and provide a clean set of chips (whitespace-free) within a container using the appropriate spacing conventions.
![](static/skin-graphic.png)
@ebay/skin/chips-combobox
DS v1.0.0Chips Combobox are creators and managers of chip components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.
Empty Chips Combobox
This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.
NOTE: For empty Chips Combobox implementations, to avoid layout issues, make sure .chips-combobox__items does NOT have any whitespace.
<span class="chips-combobox">
<ul class="chips-combobox__items" aria-label="Selected sports"></ul>
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Soccer</span>
</div>
<div class="combobox__option" role="option">
<span>Hockey</span>
</div>
<div class="combobox__option" role="option">
<span>Tennis</span>
</div>
</div>
</div>
</span>
</span>
Fluid Chips Combobox
Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.
<span class="chips-combobox chips-combobox--fluid">
<ul class="chips-combobox__items" aria-label="Selected sports"></ul>
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Soccer</span>
</div>
<div class="combobox__option" role="option">
<span>Hockey</span>
</div>
<div class="combobox__option" role="option">
<span>Tennis</span>
</div>
</div>
</div>
</span>
</span>
Prefilled Chips Combobox
This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.
- Football
- Basketball
- Baseball
<span class="chips-combobox">
<ul class="chips-combobox__items" aria-label="Selected sports">
<li>
<span class="chip">
<span id="chip-interactive-1-1-text" class="chip__text">Football</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
</ul>
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Soccer</span>
</div>
<div class="combobox__option" role="option">
<span>Hockey</span>
</div>
<div class="combobox__option" role="option">
<span>Tennis</span>
</div>
</div>
</div>
</span>
</span>
Chips Combobox in Disabled State
When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.
To turn on this state, add aria-disabled="true" to the outer element of the module. Additonally, you'll need to add the disabled attribute to all the buttons inside as well as the input element for combobox.
- Football
- Basketball
- Baseball
<span class="chips-combobox" aria-disabled="true">
<ul class="chips-combobox__items" aria-label="Selected sports">
<li>
<span class="chip">
<span id="chip-interactive-1-1-text" class="chip__text">Football</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
</ul>
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Soccer</span>
</div>
<div class="combobox__option" role="option">
<span>Hockey</span>
</div>
<div class="combobox__option" role="option">
<span>Tennis</span>
</div>
</div>
</div>
</span>
</span>
Chips Combobox in Error State
When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.
To turn on the error state, add a class of chips-combobox--error to the outer element of the module. To turn off the error state, remove the class.
In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per a11y rules, color alone should not be used to indicate an error. For more information, please see the field error state docs.
- Football
- Basketball
- Baseball
<span class="chips-combobox chips-combobox--error">
<ul class="chips-combobox__items" aria-label="Selected sports">
<li>
<span class="chip">
<span id="chip-interactive-1-1-text" class="chip__text">Football</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
<li>
<span class="chip">
<span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
<button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
<svg class="icon icon--12" width="13" height="12" aria-hidden="true">
<use href="#icon-close-12"></use>
</svg>
</button>
</span>
</li>
</ul>
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Soccer</span>
</div>
<div class="combobox__option" role="option">
<span>Hockey</span>
</div>
<div class="combobox__option" role="option">
<span>Tennis</span>
</div>
</div>
</div>
</span>
</span>
![](static/skin-graphic.png)
@ebay/skin/combobox
DS v2.2A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal, or via selection from the listbox options, or a combination of both.
TIP: A combobox can be further enhanced with autocomplete behaviour.
Default Combobox
Selecting an option should simply fill the textbox with that value. Options may not have state or any other kind of secondary behaviour.
<span class="combobox">
<span class="combobox__control">
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-1" />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
Disabled Combobox
Apply the disabled property to disable the combobox.
<span class="combobox">
<span class="combobox__control">
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-2" disabled />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-2" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
![](static/skin-graphic.png)
@ebay/skin/confirm-dialog
DS v2.1A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action.
The markup requirements are very strictly: a heading, description and two buttons.
Delete Address?
You will permanently lose this address.
<div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade" hidden role="dialog">
<div class="confirm-dialog__window confirm-dialog__window--fade">
<div class="confirm-dialog__header">
<h2 id="confirm-dialog-title" class="confirm-dialog__title">Delete Address?</h2>
</div>
<div class="confirm-dialog__main">
<p id="confirm-dialog__description">You will permanently lose this address.</p>
</div>
<div class="confirm-dialog__footer">
<button class="btn confirm-dialog__reject">Cancel</button>
<button class="btn btn--primary confirm-dialog__confirm" aria-describedby="confirm-dialog__description">Delete</button>
</div>
</div>
</div>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/date-textbox
DS v1.0The date textbox offers a calendar based "date picker" as an alternative to manual text entry.
Single Select Date Textbox
The single select date textbox consists of a textbox plus icon button. The icon button launches an interactive calendar inside of a flyout.
The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify.
NOTE: a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version.
August 2023
September 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
<span class="date-textbox">
<span class="textbox">
<input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
<button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
<svg aria-hidden="true" class="icon icon--24" width="16" height="16">
<use href="#icon-calendar-24"></use>
</svg>
</button>
</span>
<div class="date-textbox__popover">
<div class="calendar">
<!-- see calendar module -->
</div>
</div>
</span>
Disabled Date Textbox
The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the disabled attribute on the input as well as button.
<span class="date-textbox">
<span class="textbox textbox--disabled">
<input class="textbox__control" placeholder="YYYY-MM-DD" type="text" disabled />
<button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar" disabled>
<svg aria-hidden="true" class="icon icon--24" width="16" height="16">
<use href="#icon-calendar-24"></use>
</svg>
</button>
</span>
<div class="date-textbox__popover">
<div class="calendar">
<!-- see calendar module -->
</div>
</div>
</span>
Date Range Textbox
Selecting a date range requires two textboxes; one for the start date and one for the end date.
August 2023
September 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
<span class="date-textbox">
<span class="textbox">
<input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
</span>
<span class="textbox">
<input class="textbox__control" type="text" />
<button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
<svg aria-hidden="true" class="icon icon--24" width="16" height="16">
<use href="#icon-calendar-24"></use>
</svg>
</button>
</span>
<div class="date-textbox__popover">
<div class="calendar">
<!-- see calendar module -->
</div>
</div>
</span>
![](static/skin-graphic.png)
@ebay/skin/details
DS v1.2A 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--12" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</summary>
<p>Sample content</p>
</details>
![](static/skin-graphic.png)
@ebay/skin/donut-chart
DS v1.0ALPHA: APIs are subject to change
The donut chart is a data visualization module designed to display comparative data in an easily digestible and visually appealing format. Our donut chart is composed of four sections: the title, metric, graph, and legend, each serving a distinct purpose to enhance the user's understanding of the data presented.
In practice, the .donut-chart__graph is where we will load in the third-party donut chart.
Small container
Donut chart title
- Portion 1
- 10%
- Portion 2
- 20%
- Portion 3
- 30%
<div class="donut-chart" style="width: 200px;"">
<div class="donut-chart__grid">
<div class="donut-chart__title">
Donut chart title
</div>
<div class="donut-chart__metric">
<div class="donut-chart__metric-value">
175
</div>
<div class="donut-chart__metric-label">
Returns processed
</div>
</div>
<div class="donut-chart__graph">
<div>Graph placeholder</div>
</div>
<div class="donut-chart__legend">
<div class="chart-legend">
<dl aria-label="Example donut chart legend">
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 1</dt>
<dd class="chart-legend__value">10%</dd>
</div>
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 2</dt>
<dd class="chart-legend__value">20%</dd>
</div>
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 3</dt>
<dd class="chart-legend__value">30%</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
Variable width container
Donut chart title
- Portion 1
- 10%
- Portion 2
- 20%
- Portion 3
- 30%
<div class="donut-chart">
<div class="donut-chart__grid">
<div class="donut-chart__title">
Donut chart title
</div>
<div class="donut-chart__metric">
<div class="donut-chart__metric-value">
175
</div>
<div class="donut-chart__metric-label">
Returns processed
</div>
</div>
<div class="donut-chart__graph">
<div>Graph placeholder</div>
</div>
<div class="donut-chart__legend">
<div class="chart-legend">
<dl aria-label="Example donut chart legend">
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 1</dt>
<dd class="chart-legend__value">10%</dd>
</div>
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 2</dt>
<dd class="chart-legend__value">20%</dd>
</div>
<div class="chart-legend__item">
<dt class="chart-legend__label">Portion 3</dt>
<dd class="chart-legend__value">30%</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/education-notice
DS v1.0Education Notice
The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.
Education notice can use any large 24x24 program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.
Did you know?
You can now split payments on two cards.
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
Education Notice with a Prominent Icon
Default educational notice (gray background) can use a blue icon by adding an icon--prominent modifier on the icon element.
Did you know?
You can now split payments on two cards.
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24 icon--prominent" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
Prominent Education Notice
The prominent education notice includes a background color that pops a bit more. It can be used with a education-notice--prominent modifier.
Authenticity Guaranteed
Authenticity Guarantee means your item is authentic or your money back.
<section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24" height="24" width="24" aria-label="Education">
<use href="#icon-authenticity-guarantee-24"></use>
</svg>
<h3 class="education-notice__title">Authenticity Guaranteed</h3>
</div>
<div class="education-notice__main">
<p>Authenticity Guarantee means your item is authentic or your money back.</p>
</div>
</section>
Dismissable Education Notice
A close button can be placed in a education-notice__header element.
Did you know?
You can now split payments on two cards.
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
<button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
Actionable Education Notice
Link or button actions can be placed in the education-notice__footer element.
Actionable Education Notice Using Link
The Vault
You can now use the Vault to store items like this securely.
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24" height="24" width="24" aria-label="Education">
<use href="#icon-the-ebay-vault-24"></use>
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<a href="https://www.ebay.com">Learn more link</a>
</div>
</section>
Actionable Education Notice Using Fake Button
The Vault
You can now use the Vault to store items like this securely.
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--24" height="24" width="24" aria-label="Education">
<use href="#icon-the-ebay-vault-24"></use>
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<button class="fake-link">Learn more button</button>
</div>
</section>
![](static/skin-graphic.png)
@ebay/skin/eek
DS v1.1EEKs have two parts, a range, and a rating. The following ranges are available:
EEK MIN | EEK MAX | ICON |
---|---|---|
D | A+++ | |
E | A+++ | |
G | A+++ | |
E | A++ | |
G | A++ | |
F | A+ | |
E | A+ | |
G | A |
And for each range, making sure each rating exists within that given range, the EEK can have the following ratings:
Then each rating needs to have a different color. This depends on the distance it is from the upper range
EEK RATING NAME | ||||
---|---|---|---|---|
.eek--rating-1 | .eek--rating-1 | .eek--rating-1 | ||
.eek--rating-2 | .eek--rating-2 | .eek--rating-2 | .eek--rating-1 | |
.eek--rating-3 | .eek--rating-3 | .eek--rating-3 | .eek--rating-2 | |
.eek--rating-4 | .eek--rating-4 | .eek--rating-4 | .eek--rating-3 | |
.eek--rating-5 | .eek--rating-5 | .eek--rating-5 | .eek--rating-4 | |
.eek--rating-6 | .eek--rating-6 | .eek--rating-6 | .eek--rating-5 | |
.eek--rating-7 | .eek--rating-7 | .eek--rating-7 | .eek--rating-6 | |
.eek--rating-7 | .eek--rating-7 | .eek--rating-7 | ||
.eek--rating-7 | ||||
EEK RATING NAME | ||||
---|---|---|---|---|
.eek--rating-1 | ||||
.eek--rating-2 | .eek--rating-1 | .eek--rating-1 | ||
.eek--rating-3 | .eek--rating-2 | .eek--rating-2 | .eek--rating-1 | |
.eek--rating-4 | .eek--rating-3 | .eek--rating-3 | .eek--rating-2 | |
.eek--rating-5 | .eek--rating-4 | .eek--rating-4 | .eek--rating-3 | |
.eek--rating-6 | .eek--rating-5 | .eek--rating-5 | .eek--rating-4 | |
.eek--rating-7 | .eek--rating-6 | .eek--rating-6 | .eek--rating-5 | |
.eek--rating-7 | .eek--rating-7 | .eek--rating-7 | .eek--rating-6 | |
.eek--rating-7 | .eek--rating-7 | .eek--rating-7 |
<div class="eek eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">D</span>
</span>
<span class="eek__rating" aria-hidden="true">
A+++
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
B
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
<div class="eek eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
G
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
![](static/skin-graphic.png)
@ebay/skin/field
The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).
Unstacked Field
The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.
Multiple fields can be laid out inline by using the span tag with field class, as per the example below.
<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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
</span>
<span class="field">
<label class="field__label" for="field3">Field 3</label>
<span class="field__control switch">
<input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
<span class="switch__button"></span>
</span>
</span>
Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.
<div class="field">
<label class="field__label" for="field1">Field 1</label>
<span class="field__control textbox">
<input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
</span>
</div>
<div class="field">
<label class="field__label" for="field2">Field 2</label>
<span class="field__control">
<span class="select">
<select name="field2" id="field2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
</div>
<div class="field">
<label class="field__label" for="field3">Field 3</label>
<span class="field__control switch">
<input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
<span class="switch__button"></span>
</span>
</div>
For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.
<span class="field field--align-top">
<label class="field__label" for="field-textarea-1">Field 1</label>
<span class="field__control textbox">
<textarea class="textbox__control" id="field-textarea-1"></textarea>
</span>
</span>
Stacked Field
For a label stacked above the control, use the field__label--stacked element modifier.
Again, multiple fields can be laid out inline by using a span tag, as per the example below.
<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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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.
<div class="field">
<label class="field__label field__label--stacked" for="field1">Field 1</label>
<span class="textbox">
<input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
</span>
</div>
<div class="field">
<label class="field__label field__label--stacked" for="field2">Field 2</label>
<span class="field__control">
<span class="select">
<select name="field2" id="field2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
</div>
<span class="field">
<label class="field__label field__label--stacked">Field 3</label>
<span class="field__control switch">
<input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
<span class="switch__button"></span>
</span>
</div>
Field Font-Size
The field label will honour any font-size cascade. Wrap the label and control in a field__group element to maintain vertical alignment.
NOTE: form controls do not inherit the font-size cascade. This is default browser behaviour.
<span class="field" style="font-size: 18px;">
<span class="field__group">
<label class="field__label" for="email">Field 1</label>
<span class="field__control textbox">
<input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
</span>
</span>
</span>
<span class="field" style="font-size: 18px;">
<span class="field__group">
<label class="field__label" for="size">Field 2</label>
<span class="field__control">
<span class="select">
<select name="size" id="size">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
</span>
</span>
<span class="field" style="font-size: 18px;">
<span class="field__group">
<label class="field__label" for="field3">Field 3</label>
<span class="field__control switch">
<input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
<span class="switch__button"></span>
</span>
</span>
</span>
Disabled Field
The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.
<span class="field">
<label class="field__label field__label--disabled" 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 field__label--disabled" 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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
</span>
<span class="field">
<label class="field__label field__label--disabled" 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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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>
Listbox Button with Label in Error State
You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.
<span class="field">
<label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button 1</label>
<div class="field__control textbox">
<span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
<button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
<span class="btn__cell">
<span class="btn__label">Color: </span>
<span class="btn__text">-</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Red</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Blue</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value">Yellow</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">Green</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
<select id="field-listbox-button-1" hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
</span>
</div>
<div class="field__description field__description--attention" id="field-listbox-button-1-description">
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an error</span>
</div>
</span>
Textbox in Error State
You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.
Textbox in Error State
You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.
<span class="field">
<label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
<div class="field__control textbox">
<input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
</div>
<div class="field__description field__description--attention" id="field-textbox-1-description">
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an 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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</div>
</div>
<span class="field__description">
<span>Field description or error</span>
</span>
</div>
</span>
</div>
Field Character Count
A field may have a character count section typically under the input and aligned to the right.
This variant adds a top-level container that houses both the field description and the character count, though field description or error is not necessary.In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, aria-live should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.
Field with Character Count Only
Character character can be added by utlising CSS grid via the field__description--group modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right
<span class="field">
<label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
<span class="field__control textbox">
<input type="text" aria-describedby="field-character-2" class="textbox__control" id="field-character-2-input" aria-live="off" />
</span>
<div class="field__description field__description--group">
<span id="field-character-2">
0 of 140
<span class="clipped"> charaters</span>
</span>
</span>
</span>
Field Description and Character Count
A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.
<span class="field">
<label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
<span class="field__control textbox">
<input type="text" aria-describedby="field-describe-3 field-character-3" class="textbox__control" aria-live="off"/>
</span>
<div class="field__description field__description--group">
<span id="field-describe-3">Field description or error</span>
<span id="field-character-3">
0 of 140
<span class="clipped"> charaters</span>
</span>
</div>
</span>
Field Description and Character Count with Text area
A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.
<span class="field">
<label class="field__label field__label--stacked" for="field-textarea-2">Field 2</label>
<span class="field__control textbox">
<textarea class="textbox__control" id="field-textarea-2" aria-describedby="field-describe-4 field-character-4" aria-live="off"></textarea>
</span>
<div class="field__description field__description--group">
<span id="field-describe-4">Field description or error</span>
<span id="field-character-4">
0 of 140
<span class="clipped"> charaters</span>
</span>
</div>
</span>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/flag
DS v1.0The flag module is a bundle that provides full access to all the country flags via the <svg> and <use> tags.
<svg class="flag flag--us" height="48" width="64">
<use href="#flag-us"></use>
</svg>
Including an Flag
A flag can be referenced from the flags svg file. We also provide individual flags as SVGs located in this directory. You can include these on your page as raw SVGs as needed.
<div hidden>
<svg class="flag flag--us" height="48" width="64">
<use href="#flag-us"></use>
</svg>
</div>
NOTE: the SVG tag does not support the hidden attribute, hence a hidden wrapper element is needed.
- af Afghanistan
- ax Aland Islands
- al Albania
- dz Algeria
- as American Samoa
- ad Andorra
- ao Angola
- ai Anguilla
- aq Antarctica
- ag Antigua and Barbuda
- ar Argentina
- am Armenia
- aw Aruba
- ac Ascension Island
- au Australia
- at Austria
- az Azerbaijan
- bs Bahamas
- bh Bahrain
- bd Bangladesh
- bb Barbados
- es-pv Basque Country
- by Belarus
- be Belgium
- bz Belize
- bj Benin
- bm Bermuda
- bt Bhutan
- bo Bolivia
- bq Bonaire, Sint Eustatius and Saba
- ba Bosnia and Herzegovina
- bw Botswana
- bv Bouvet Island
- br Brazil
- io British Indian Ocean Territory
- bn Brunei Darussalam
- bg Bulgaria
- bf Burkina Faso
- bi Burundi
- cv Cabo Verde
- kh Cambodia
- cm Cameroon
- ca Canada
- ic Canary Islands
- es-ct Catalonia
- ky Cayman Islands
- cf Central African Republic
- cefta Central European Free Trade Agreement
- td Chad
- cl Chile
- cn China
- cx Christmas Island
- cp Clipperton Island
- cc Cocos (Keeling) Islands
- co Colombia
- km Comoros
- ck Cook Islands
- cr Costa Rica
- hr Croatia
- cu Cuba
- cw Curaçao
- cy Cyprus
- cz Czech Republic
- ci Côte d'Ivoire
- cd Democratic Republic of the Congo
- dk Denmark
- dg Diego Garcia
- dj Djibouti
- dm Dominica
- do Dominican Republic
- ec Ecuador
- eg Egypt
- sv El Salvador
- gb-eng England
- gq Equatorial Guinea
- er Eritrea
- ee Estonia
- sz Eswatini
- et Ethiopia
- eu Europe
- fk Falkland Islands
- fo Faroe Islands
- fm Federated States of Micronesia
- fj Fiji
- fi Finland
- fr France
- gf French Guiana
- pf French Polynesia
- tf French Southern Territories
- ga Gabon
- es-ga Galicia
- gm Gambia
- ge Georgia
- de Germany
- gh Ghana
- gi Gibraltar
- gr Greece
- gl Greenland
- gd Grenada
- gp Guadeloupe
- gu Guam
- gt Guatemala
- gg Guernsey
- gn Guinea
- gw Guinea-Bissau
- gy Guyana
- ht Haiti
- hm Heard Island and McDonald Islands
- va Holy See
- hn Honduras
- hk Hong Kong
- hu Hungary
- is Iceland
- in India
- id Indonesia
- ir Iran
- iq Iraq
- ie Ireland
- im Isle of Man
- il Israel
- it Italy
- jm Jamaica
- jp Japan
- je Jersey
- jo Jordan
- kz Kazakhstan
- ke Kenya
- ki Kiribati
- xk Kosovo
- kw Kuwait
- kg Kyrgyzstan
- la Laos
- lv Latvia
- lb Lebanon
- ls Lesotho
- lr Liberia
- ly Libya
- li Liechtenstein
- lt Lithuania
- lu Luxembourg
- mo Macau
- mg Madagascar
- mw Malawi
- my Malaysia
- mv Maldives
- ml Mali
- mt Malta
- mh Marshall Islands
- mq Martinique
- mr Mauritania
- mu Mauritius
- yt Mayotte
- mx Mexico
- md Moldova
- mc Monaco
- mn Mongolia
- me Montenegro
- ms Montserrat
- ma Morocco
- mz Mozambique
- mm Myanmar
- na Namibia
- nr Nauru
- np Nepal
- nl Netherlands
- nc New Caledonia
- nz New Zealand
- ni Nicaragua
- ne Niger
- ng Nigeria
- nu Niue
- nf Norfolk Island
- kp North Korea
- mk North Macedonia
- gb-nir Northern Ireland
- mp Northern Mariana Islands
- no Norway
- om Oman
- pk Pakistan
- pw Palau
- pa Panama
- pg Papua New Guinea
- py Paraguay
- pe Peru
- ph Philippines
- pn Pitcairn
- pl Poland
- pt Portugal
- pr Puerto Rico
- qa Qatar
- cg Republic of the Congo
- ro Romania
- ru Russia
- rw Rwanda
- re Réunion
- bl Saint Barthélemy
- sh Saint Helena, Ascension and Tristan da Cunha
- kn Saint Kitts and Nevis
- lc Saint Lucia
- mf Saint Martin
- pm Saint Pierre and Miquelon
- vc Saint Vincent and the Grenadines
- ws Samoa
- sm San Marino
- st Sao Tome and Principe
- sa Saudi Arabia
- gb-sct Scotland
- sn Senegal
- rs Serbia
- sc Seychelles
- sl Sierra Leone
- sg Singapore
- sx Sint Maarten
- sk Slovakia
- si Slovenia
- sb Solomon Islands
- so Somalia
- za South Africa
- gs South Georgia and the South Sandwich Islands
- kr South Korea
- ss South Sudan
- es Spain
- lk Sri Lanka
- ps State of Palestine
- sd Sudan
- sr Suriname
- sj Svalbard and Jan Mayen
- se Sweden
- ch Switzerland
- sy Syria
- tw Taiwan
- tj Tajikistan
- tz Tanzania
- th Thailand
- tl Timor-Leste
- tg Togo
- tk Tokelau
- to Tonga
- tt Trinidad and Tobago
- ta Tristan da Cunha
- tn Tunisia
- tm Turkmenistan
- tc Turks and Caicos Islands
- tv Tuvalu
- tr Türkiye
- ug Uganda
- ua Ukraine
- ae United Arab Emirates
- gb United Kingdom
- un United Nations
- um United States Minor Outlying Islands
- us United States of America
- xx Unknown
- uy Uruguay
- uz Uzbekistan
- vu Vanuatu
- ve Venezuela
- vn Vietnam
- vg Virgin Islands (British)
- vi Virgin Islands (U.S.)
- gb-wls Wales
- wf Wallis and Futuna
- eh Western Sahara
- ye Yemen
- zm Zambia
- zw Zimbabwe
![](static/skin-graphic.png)
@ebay/skin/floating-label
DS v2.2Floating 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 textbox--disabled">
<input class="textbox__control" id="first-name" type="text" disabled />
</span>
</span>
Floating Label with Placeholder
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 textbox--invalid">
<input class="textbox__control" id="first-name" type="text" aria-invalid="true" />
</span>
</span>
Floating Label with Textarea
Use the textarea tag for a multi-line textbox.
A multi-line textbox allows line breaks and has a minimum height of 200px.
In order to prevent overlap for floating label, use .floating-label--opaque class
<span class="floating-label floating-label--opaque">
<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--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox1" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
Floating Label with long text
This example shows how the floating label will truncate with long text
<span class="floating-label">
<label class="floating-label__label" for="first-name">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>
<span class="textbox">
<input class="textbox__control" id="first-name" type="text" />
</span>
</span>
Floating Label with select
<span class="floating-label">
<label class="floating-label__label">Select Option</label>
<span class="select">
<select name="options">
<option value="">Choose an option</option>
<option value="item1">Pick Option 1 (default)</option>
<option value="item2">Pick Option 2</option>
<option value="item3">Pick Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
Floating Label with large select
<span class="floating-label floating-label--large">
<label class="floating-label__label">Select Option</label>
<span class="select select--large">
<select name="options">
<option value="">Choose an option</option>
<option value="item1">Pick Option 1</option>
<option value="item2">Pick Option 2</option>
<option value="item3">Pick Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</span>
Floating Label with Phone input
For phone input, the label always remains in floating state above the input. This state ensures that the label does not obscure the phone number.
<span class="phone-input">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: ">
<span class="btn__cell">
<span class="btn__text">
<svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
<use href="#flag-us"></use>
</svg>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<svg class="flag flag--al" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="355">
<use href="#flag-al"></use>
</svg>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
<use href="#flag-us"></use>
</svg>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="field floating-label">
<label class="floating-label__label" for="field1"><span class="clipped">Area code + </span>Phone
Number</label>
<span class="textbox">
<span id="floating-phone-prefix-0">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number"
autocomplete="tel-national" aria-describedby="floating-phone-prefix-0"/>
</span>
</span>
</span>
Floating Label Transitions
By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.
When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.
You will also need to add the floating-label__label--focus class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.
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.
![](static/skin-graphic.png)
@ebay/skin/global
The global module defines the styles of any common page aspects, such as font family, font size, background color, text color and link states.
![](static/skin-graphic.png)
@ebay/skin/icon
DS v1.3The icon module is a bundle that provides full access to the entire range of eBay iconography via the <svg> and <use> tags.
Base Icons Only
Only base icons should be used. No state-based icons, such as disabled icons or even possibly an icon relaying an error state (likely red), should be used. Those state modifications on icons should be handled downstream using css modifiers to allow for those variations.General Markup Approach
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--24" height="24" width="24">
<use href="#icon-information-24"></use>
</svg>
NOTE: Skin removes all pointer events on icons (via pointer-events: none) due to a bug in IE. To add events to these icons you should wrap them in another element and attach your events there.
Including an Icon
An icon symbol declaration can be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of an SVG block.
We also provide individual icons as SVGs located in this directory. You can include these on your page as raw SVGs as needed.
<div hidden>
<svg>
<symbol id="icon-information-24" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10Zm-1-11a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6Zm1-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
</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--24" height="24" width="24" aria-hidden="true">
<use href="#icon-information-24"></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--24" height="24" width="24" role="img" aria-label="Information">
<use href="#icon-information-24"></use>
</svg>
Icon Classes
Each icon can have a class that corresponds to its width. For example, icon--24 corresponds to the 24px width icon. These correspond with the size associated with each icon.
For colored icons use icon--24-colored These will set the height, and the width will align with the aspect ratio
Icons have a name postfix that corresponds to the width of the icon. For example, "icon-information-24" corresponds to the information icon of the 24px width. Heights may differ depending on the icon.
Disabled Icons
Most icons can be given a disabled appearance by adding the icon--disabled modifier.
Simple Icons
Icons that are simple and have only a stroke/fill of a single color simply inherit color and are disabled by inheriting that color as the stroke/fill.
<svg class="icon icon--24 icon--disabled" height="24" width="24">
<use href="#icon-chevron-right-24"></use>
</svg>
Filled Icons
There are certain filled icons that show up black by default. In order to color these icons, apply the icon--{name}-filled modifier.
<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16">
<use href="#icon-confirmation-filled-16"></use>
</svg>
<svg class="icon icon--16 icon--attention-filled" height="16" width="16">
<use href="#icon-attention-filled-16"></use>
</svg>
<svg class="icon icon--16 icon--information-filled" height="16" width="16">
<use href="#icon-information-filled-16"></use>
</svg>
Complex Icons
Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.
<svg class="icon icon--24-colored icon--disabled" height="24" width="24">
<use href="#icon-mastercard-24-colored"></use>
</svg>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/image-placeholder
Image placeholder should be used when an image is not present. By default this is 300x300px, but can be resized to it a container.
This asset can be found either in dist/svg/icons/image-placeholder.svg or in the icons bundle
<svg aria-label="image not found" class="image-placeholder">
<use href="#image-placeholder"></use>
</svg>
Variable widths with borders
<div style="border: 1px solid var(--color-stroke-information); height: 50px; width: 50px">
<svg aria-label="image not found" class="image-placeholder" role="img">
<use href="#image-placeholder"></use>
</svg>
</div>
<svg aria-label="image not found" class="image-placeholder"
style="border: 1px solid var(--color-stroke-attention); height: 150px; width: 10px" role="img">
<use href="#image-placeholder"></use>
</svg>
<svg aria-label="image not found" class="image-placeholder"
style="border: 1px dotted var(--color-stroke-attention); height: 250px; width: 250px" role="img">
<use href="#image-placeholder"></use>
</svg>
![](static/skin-graphic.png)
@ebay/skin/infotip
DS v2.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 icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--16" width="16" height="16" aria-hidden="true">
<use href="#icon-information-16"></use>
</svg>
</button>
<div class="infotip__overlay" style="top: 30px; left: -6px">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
<h3 class="infotip__heading">Infotip</h3>
<p>Here's a tip to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</div>
</div>
</span>
By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.
In order to get this to work with floating-ui, you need to remove pointer position infotip__pointer--top-left and remove any style positioning
<span class="infotip">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--16" width="16" height="16" aria-hidden="true">
<use href="#icon-information-16"></use>
</svg>
</button>
<div class="infotip__overlay">
<span class="infotip__pointer"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
<h3 class="infotip__heading">Infotip</h3>
<p>Here's a tip to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-close-16"></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 icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--16" width="16" height="16" aria-hidden="true">
<use href="#icon-information-16"></use>
</svg>
</button>
<span class="infotip__overlay">
<span class="infotip__pointer"></span>
<span class="infotip__mask">
<span class="infotip__cell">
<span class="infotip__content">
<span class="infotip__heading" role="heading" aria-level=5>Infotip</span>
<span>Here's a tip to help you be successful at your task.</span>
</span>
<button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
</span>
</span>
</span>
</span>
</p>
Modal Infotip
On small screens, the infotip should launch a modal lightbox-dialog.
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span class="infotip">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--16" width="16" height="16" aria-hidden="true">
<use href="#icon-information-16"></use>
</svg>
</button>
</span>
<div aria-labelledby="lightbox-dialog-title" aria-modal="true" hidden class="lightbox-dialog" role="dialog">
<div class="lightbox-dialog__window">
<button class="lightbox-dialog__handle" type="button"></button>
<div class="lightbox-dialog__header">
<h2>Info</h2>
<button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></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>
![](static/skin-graphic.png)
@ebay/skin/inline-notice
DS v2.2The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.
An inline-level notice provides tips, guidance and feedback on individual elements and form controls.
An inline-level notice may have a status of general (default), confirmation, information or attention.
Your price has been updated.
Your price has been updated.
Send offers to interested buyers.
Add required aspects to keep item alive.
<div class="inline-notice">
<span class="inline-notice__main">
<p>Your price has been updated. <button class="fake-link" type="button">Dismiss</button></p>
</span>
</div>
<div class="inline-notice inline-notice--confirmation">
<span class="inline-notice__header">
<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</span>
<span class="inline-notice__main">
<p>Your price has been updated.</p>
</span>
</div>
<div class="inline-notice inline-notice--information">
<span class="inline-notice__header">
<svg class="icon icon--16 icon--information-filled" height="16" width="16" role="img" aria-label="Information">
<use href="#icon-information-filled-16"></use>
</svg>
</span>
<span class="inline-notice__main">
<p><a href="https://www.ebay.com">Send offers</a> to interested buyers.</p>
</span>
</div>
<div class="inline-notice inline-notice--attention">
<span class="inline-notice__header">
<svg class="icon icon--16 icon--attention-filled" height="16" width="16" role="img" aria-label="Attention">
<use href="#icon-attention-filled-16"></use>
</svg>
</span>
<span class="inline-notice__main">
<p><a href="https://www.ebay.com">Add required aspects</a> to keep item alive.</p>
</span>
</div>
![](static/skin-graphic.png)
@ebay/skin/less
DS v1.0DEPRECATED. Use SASS mixins and variables instead
In comparison to past versions, Skin now offers a very minimal public LESS API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system.
Also, our Less module is not intended as a general-purpose library of utility mixins and variables such as LessHat.
NOTE: Lasso requires the additional lasso-less plugin dependency in your app package.json.
{
"dependencies": {
"lasso": "^3",
"lasso-less": "^3",
"@ebay/skin": "^18"
}
}
Spacing Tokens (deprecated)
Skin uses a proportional spacing system anchored around a base value of 8px.
NOTE: Spacing variables in LESS are deprecated. In a future release, they will become part of the new CSS Custom Property API.
NAME | SIZE |
---|---|
spacing-25 | spacing-100 * 0.25 |
spacing-50 | spacing-100 * 0.50 |
spacing-100 | 8 |
spacing-200 | spacing-100 * 2 |
spacing-400 | spacing-100 * 4 |
spacing-600 | spacing-100 * 6 |
spacing-800 | spacing-100 * 8 |
Typography Mixins
- .typography-giant-3();
- .typography-giant-2();
- .typography-giant-1();
- .typography-large-2();
- .typography-large-2-secondary();
- .typography-large-1();
- .typography-large-1-secondary();
- .typography-medium-bold();
- .typography-medium();
- .typography-medium-secondary();
- .typography-regular-bold();
- .typography-regular();
- .typography-regular-secondary();
- .typography-small-bold();
- .typography-small();
- .typography-small-secondary();
![](static/skin-graphic.png)
@ebay/skin/lightbox-dialog
DS v2.1A lightbox dialog is a modal window spawned by the main web page or application.
The lightbox-dialog is fully responsive. On large screens it will be aligned to the center of the screen; on small screens at the bottom. Small screens display an additional "handle" button, used to expand the dialog height.
Lightbox Dialog
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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://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.
Scrolling Lightbox Dialog
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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Previous button in header Lightbox
If you want to add a previous button to the lightbox, add the icon button before the dialog heading tag.
Lightbox Dialog
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">
<button aria-label="Go back" class="icon-btn lightbox-dialog__prev" type="button">
<svg aria-hidden="true" class="icon icon--chevron-left-16" height="16" width="16">
<use href="#icon-chevron-left-16"></use>
</svg>
</button>
<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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Wide Lightbox
To have a wider lightbox add lightbox-dialog--wide to the dialog
On small screens, a wide lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog
Lightbox Dialog
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--wide" hidden role="dialog">
<div class="lightbox-dialog__window">
<div class="lightbox-dialog__header">
<button aria-label="Go back" class="icon-btn lightbox-dialog__prev" type="button">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-chevron-left-16"></use>
</svg>
</button>
<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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Narrow Lightbox
To have a thinner lightbox add lightbox-dialog--narrow to the dialog
Lightbox Dialog
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--narrow" 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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Large Lightbox
To have a large lightbox add lightbox-dialog--large to the dialog
On small screens, a large lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog
Lightbox Dialog
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--large" 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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Transitioned Lightbox
Any lightbox can be transitioned in and out, using the lightbox-dialog__window--animate and lightbox-dialog--mask-fade modifiers. On large screens, animate will fade in and on small screens the panel will slide in from the bottom.
The default fade duration is 16ms.
Transitioned Lightbox
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--animate">
<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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a>
</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--16" height="16" width="16">
<use href="#icon-close-16"></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>
Expressive Lightbox
An image may be added to the lightbox header for a more expressive experience. Image will be cropped to a hardcoded height as per design standards.
Lightbox Dialog
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--expressive" hidden role="dialog">
<div class="lightbox-dialog__window">
<div class="lightbox-dialog__image" style="background-image:url(static/img/tb-landscape-pic.jpg)"></div>
<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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/link
DS v2.0The link module itself does not provide any base styling of anchor tags, that styling instead comes from the global module.
Nested Link
When nested amongst paragraphs of text, the anchor tag's default underline gives visual affordance that this selection of text is a hyperlink. The color of the link alone would not be sufficient affordance in this context and therefore the underline is required and must not be removed.
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>
Nav Link
Nav links are typically used in blocks of navigation within sidebars, allowing the user to navigate the site hierarchy.
Nav links remove the default underline. The "color alone" principle mentioned above is not violated, because in this context there are other visual affordances (e.g. heading, placement, spacing and surrounding elements) that these elements are interactive.
<nav aria-labelledby="nav-link-heading" role="navigation">
<h2 id="nav-link-heading">Navigation</h2>
<ul>
<li><a class="nav-link" href="#link1">Link 1</a></li>
<li><a class="nav-link" href="#link2">Link 2</a></li>
<li><a class="nav-link" href="#link3">Link 3</a></li>
<li><a class="nav-link" href="#link4">Link 4</a></li>
<li><a class="nav-link" href="#link5">Link 5</a></li>
</ul>
</nav>
Fake Link
To style a button to look like a link, use the fake-link class.
<button class="fake-link" type="button">Button</button>
![](static/skin-graphic.png)
@ebay/skin/listbox
DS v2.2A listbox is intended for use as a custom, non-form based implementation of the native HTML select element.
Unselected Listbox
By default, no option is selected until interacting with the widget. This matches the behaviour of a native HTML select element.
<span class="listbox">
<div aria-label="Listbox demo 1" class="listbox__options" role="listbox" tabindex="0">
<div class="listbox__option" role="option" aria-selected="false">
<span class="listbox__value">Option 1</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="false">
<span class="listbox__value">Option 2</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="false" aria-disabled="true">
<span class="listbox__value">Option 3</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="false">
<span class="listbox__value">Option 4</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</span>
Selected Listbox
An initial selection can be specified by applying the aria-selected state to a single option.
<div class="listbox">
<div aria-label="Listbox demo 2" class="listbox__options" role="listbox" tabindex="0">
<div class="listbox__option" role="option" aria-selected="true">
<span class="listbox__value">Option 1</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="true">
<span class="listbox__value">Option 2</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="false">
<span class="listbox__value">Option 3</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
Listbox with subtitles
You can add a subtitle to an option by adding a .listbox__description element.
<div class="listbox">
<div aria-label="Listbox demo 2" class="listbox__options" role="listbox" tabindex="0">
<div class="listbox__option" role="option" aria-selected="true">
<span class="listbox__value">Option 1</span>
<span class="listbox__description">
<span class="clipped">.</span>
More info about option 1
</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="true">
<span class="listbox__value">Option 2</span>
<span class="listbox__description">
<span class="clipped">.</span>
More info about option 2
</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" aria-selected="false">
<span class="listbox__value">Option 3</span>
<span class="listbox__description">
<span class="clipped">.</span>
More info about option 3
</span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@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.
![](static/skin-graphic.png)
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/page-grid
DS v1.0.0The page grid module establishes the rows, columns and areas onto which child elements can be placed. The page grid is fully responsive.
Setting up a responsive page grid requires two key elements: a container element, and the grid element itself.
The container element takes care of positioning the grid in relation to the page (typically center-justified) and adds outer margins.
The grid element creates the actual columns (and gutters); eight columns for small viewports, sixteen for large.
<div class="page-grid-container">
<div class="page-grid">
<!-- grid content goes here -->
</div>
</div>
Any content that is off-grid, a full bleed banner for example, should be placed outside of these two elements.
Grid areas are definable with CSS Grid syntax.
Responsive Methodology
When working with responsive web pages, the mindset should always be mobile-first. This means that your default styles (outside of media queries) should be targeting phones - the smallest of screens. As such, there is no need to have a minimum threshold by wrapping mobile styles inside a media query.
Though our minimum screen width support starts at 320px, in theory this means that default styles will support devices much narrower than that since we don't set a minimum. The 320px is, at best, an implied breakpoint.
Subsequent media queries should increase in screen width and alter the UI styling additively avoiding style declaration duplications when possible. The following CSS shows the grid layout of the Skin website itself.
nav {
display: none;
}
main {
grid-area: ~"1 / 1 / span 1 / span 8";
}
footer {
grid-area: ~"2 / 1 / span 1 / span 8";
}
/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-SM */
/* See below for all the references. */
@media screen and (min-width: 512px) {
nav {
grid-area: ~"1 / 1 / span 1 / span 3";
}
main {
grid-area: ~"1 / 4 / span 1 / span 13";
}
footer {
grid-area: ~"2 / 1 / span 1 / span 16";
}
}
/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-MD */
/* See below for all the references. */
@media screen and (min-width: 768px) {
nav {
grid-area: ~"1 / 1 / span 1 / span 2";
}
main {
grid-area: ~"1 / 3 / span 1 / span 14";
}
}
You can see that for small screens, our top-level landmark elements simply span the full width of the grid. For large screens, things are a little more interesting, and we specify exactly how many rows and columns each landmark should occupy on the grid.
Here is the corresponding HTML.
<body>
<header>
<!-- header content (off-grid) -->
</header>
<div class="page-grid-container">
<div class="page-grid">
<nav>
<!-- nav content -->
</nav>
<main>
<!-- main content -->
</main>
<footer>
<!-- footer content -->
</footer>
</div>
</div>
</body>
You can see how it looks on this page by enabling our debug mode, which gives a quick visual indication of the grid columns.
Page Grid LESS/CSS Properties
We've set up CSS properties and LESS constants to provide developers with easy reference for responsive adjustments of UIs. The CSS properties allow for customization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have.
The CSS properties to allow for customization
These properties allow for costumization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have.
--page-grid-number-cols /* The number of columns. */
--page-grid-outside-margins /* The left/right margins outside page grid. */
--page-grid-column-gaps /* The gaps between grid columns.*/
--page-grid-row-gaps /* The gaps between grid rows.*/
--page-grid-column-widths /* The widths of grid columns. If columns is changed, this will need a new calculation to distribute evenly withing the grid.*/
--page-grid-max-width /* The maximum width of the page.*/
Additionally, we've set up LESS constants for easier reference of the current breakpoints as well as some other dimension/spacing values.
Please do NOT overwrite these!
They are meant to be consumed ONLY as constants for read-only purposes as references.
@_screen-size-XS: 320px;
@_screen-size-SM: 512px;
@_screen-size-MD: 768px;
@_screen-size-LG: 1024px;
@_screen-size-XL: 1280px;
@_screen-size-XL2: 1440px;
@_screen-size-XL3: 1680px;
@_screen-size-XL4: 1920px;
@_page-grid-max-width: 1584px;
@_page-grid-number-cols-small: 8;
@_page-grid-number-cols-large: 16;
@_page-grid-outside-margins-small: 16px;
@_page-grid-outside-margins-large: 32px;
@_page-grid-outside-margins-max: 48px;
@_page-grid-column-gaps-small: var(--spacing-100);
@_page-grid-column-gaps-large: var(--spacing-200);
@_page-grid-row-gaps-small: var(--spacing-100);
@_page-grid-row-gaps-large: var(--spacing-200);
Subgrids
Subgrids allow you to create alignment of child elements on the same grid as page grid. Currently, subgrid only has partial support (with and without CSS Subgrid support), but fallbacks allow for a seamless implementation. You will need to add a bit of CSS on your implementation side to accomplish this.
Firstly, you will need to add a class of page-grid__subgrid to the internal subgrid:
<div class="page-grid-container">
<div class="page-grid">
<main>
<!-- main grid content here -->
</main>
<article id="featured-1" class="featured page-grid__subgrid">
<div class="featured__article">
<h2>Featured Post 1</h2>
<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="featured__thumbnail">
Thumbnail
</div>
</article>
</div>
</div>
Additionally, you will need to set up the corresponding subgrid CSS as such to allow for support of subgrids in browsers that do not yet have support:
/* Set up subgrid columns */
@supports not (grid-template-columns: subgrid) {
.featured {
column-gap: var(--spacing-large);
grid-template-columns: repeat(8, 1fr);
}
}
Page Grid Templates
To see how the page grid system (engine) works in conjunction with various types of implementations (templates), check out our set of templates utilizing page grid and subgrid.
Page Grid Templates![](static/skin-graphic.png)
@ebay/skin/page-notice
DS v3.0A page notice appears prominently at the top of the page, for high priority use cases, conveying the next course of action for a task or flow.
To aid discoverabilty for assistive technology, each page notice is a labelled landmark region with a level-2 heading.
A page notice can have a status of general (default), confirmation, attention or information.
We've updated the look and feel of this page. Customize anytime in settings.
You have opted into eBay Pay and will now get paid directly.
Your selling account has been deactivated.
Opt into eBay payments before Jan 12th to pay no selling fees.
<section class="page-notice" role="region" aria-label="Notice">
<div class="page-notice__main">
<h2 class="page-notice__title">We've updated the look and feel of this page. Customize anytime in settings.</h2>
</div>
</section>
<section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
<div class="page-notice__header">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</div>
<div class="page-notice__main">
<h2 class="page-notice__title">You have opted into eBay Pay and will now get paid directly.</h2>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com">Dismiss</a>
</div>
</section>
<section class="page-notice page-notice--attention" role="region" aria-label="Attention">
<div class="page-notice__header">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Attention">
<use href="#icon-attention-filled-16"></use>
</svg>
</div>
<div class="page-notice__main">
<h2 class="page-notice__title">Your selling account has been deactivated.</h2>
</div>
<div class="page-notice__footer">
<button class="fake-link">Learn More</button>
</div>
</section>
<section class="page-notice page-notice--information" role="region" aria-label="Information">
<div class="page-notice__header">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
<use href="#icon-information-filled-16"></use>
</svg>
</div>
<div class="page-notice__main">
<h2 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h2>
</div>
<div class="page-notice__footer">
<a href="https://www.ebay.com">Opt in</a>
</div>
</section>
Dismissable Page Notice With Title
Notice Title
Opt into eBay payments before Jan 12th to pay no selling fees.
<h3 id="page-notice-dismissable-title">Dismissable Page Notice With Title</h3>
<section class="page-notice page-notice--information" role="region" aria-label="Information">
<div class="page-notice__header">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
<use href="#icon-information-filled-16"></use>
</svg>
</div>
<div class="page-notice__main">
<h3 class="page-notice__title">Notice Title</h3>
<p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
</div>
<p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
<div class="page-notice__footer">
<button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="10" width="10">
<use href="#icon-close"></use>
</svg>
</a>
</div>
</section>
Form Error Page Notice
<section class="page-notice page-notice--attention" role="region" aria-label="Attention">
<div class="page-notice__header">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Attention">
<use href="#icon-attention-filled-16"></use>
</svg>
</div>
<div class="page-notice__main">
<h2 class="page-notice__title">We found problems with your form.</h2>
<p><a href="#">Error 1</a>, <a href="#">Error 2</a>, <a href="#">Error 3</a>.</p>
</div>
</section>
![](static/skin-graphic.png)
@ebay/skin/pagination
DS v2.0Pagination allows a user to navigate back and forth through a URL based dataset, or jump directly to any specific URL in that set.
The pagination set has a maximum of seven items. An item can be a page number or an overflow element (see next section).
Traditional MPA pagination uses links to reload the entire page when clicked. For SPAs, this default click event behaviour can be prevented with JavaScript (aria-live should also be set from "off" to "on").
<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="https://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-left-16"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=6" class="pagination__item">6</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=7" class="pagination__item">7</a>
</li>
</ol>
<a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-right-16"></use>
</svg>
</a>
</nav>
Anchor tags can be replaced with buttons if the result set is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!
Overflow Rules for Pagination
A leading and/or trailing overflow element may occupy a slot in the pagination if the total number of pages is greater than seven.
This overflow element can be a static icon (see below) or an interactive menu button (see next section).
<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="https://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-left-16"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
</li>
<li>
<span class="pagination__item" role="separator">
<svg class="icon icon--24" width="8" height="8" aria-hidden="true">
<use href="#icon-overflow-horizontal-24"></use>
</svg>
</span>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">80</a>
</li>
</ol>
<a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-right-16"></use>
</svg>
</a>
</nav>
In the following example, the first overflow slot is occupied.
Our last example shows both overflow-horizontal-24 slots occupied.
Overflow Control for Pagination
A static overflow icon provides no mechanism to jump to any page that is not immediately available in the pagination's current view. This mechanism can either be deferred to another control outside of the pagination (e.g. a menu button) or, as described in this section, the static overflow icon can be switched out for a fake menu button.
<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
</span>
<a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="https://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-left-16"></use>
</svg>
</a>
<ol class="pagination__items">
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item" aria-current="page">1</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4" class="pagination__item">4</a>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5" class="pagination__item">5</a>
</li>
<li>
<span class="pagination__item">
<span class="fake-menu-button">
<button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
<svg class="icon icon--24" width="8" height="8" aria-hidden="true">
<use href="#icon-overflow-horizontal-24"></use>
</svg>
</button>
<ul class="fake-menu-button__menu">
<li>
<a class="fake-menu-button__item" href="https://www.ebay.com">
<span>6</span>
</a>
</li>
<li>
<a href="https://www.ebay.com" class="fake-menu-button__item">
<span>7<span>
</a>
</li>
<li>
<a href="https://www.ebay.com" class="fake-menu-button__item">
<span>8<span>
</a>
</li>
<li>
<a href="https://www.ebay.com" class="fake-menu-button__item">
<span>9<span>
</a>
</li>
</ul>
</span>
</span>
</li>
<li>
<a href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">10</a>
</li>
</ol>
<a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
<svg class="icon icon--16" height="24" width="24" aria-hidden="true">
<use href="#icon-arrow-right-16"></use>
</svg>
</a>
</nav>
![](static/skin-graphic.png)
@ebay/skin/panel-dialog
DS v2.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" 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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
Panel dialog with footer
<div aria-labelledby="dialog-title" aria-modal="true" class="panel-dialog" hidden role="dialog">
<div class="panel-dialog__window">
<div class="panel-dialog__header">
<h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
<button aria-label="Close dialog" class="icon-btn panel-dialog__close" type="button">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
<div class="panel-dialog__footer">
<button class="btn btn--primary">Submit</button>
<button class="btn">Cancel</button>
</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" 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">
<h2 id="dialog-title" class="panel-dialog__title large-text-1 bold-text">Heading</h2>
<button class="fake-link panel-dialog__reset" type="button">Done</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="https://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--16" height="16" width="16">
<use href="#icon-close-16"></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="https://www.ebay.com">www.ebay.com</a></p>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/phone-input
The phone input pattern is a progressive enhancement of a textbox that allows users to select the country associated with their phone number.
Default Phone input
Use the phone-input class to create the default phone input. The phone input consists of a listbox button and a textbox with type=tel. The listbox button is used to select the country code and the textbox is used to enter the local phone number.
<span class="phone-input">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" aria-hidden="true"
data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--in" aria-hidden="true"
data-country-code="91">
</span>
<span>India</span>
<span>(+91)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--sh" aria-hidden="true"
data-country-code="290">
</span>
<span>Saint Helena, Ascension and Tristan da Cunha</span>
<span>(+290)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--gb" aria-hidden="true"
data-country-code="44">
</span>
<span>United Kingdom</span>
<span>(+44)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-0">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-0" />
</span>
</span>
With Group Label
Use ARIA to provide a grouping role, similar to fieldset and legend, for more flexibility when using field classes. For label inline usage, please see the field module.
<span class="field" role="group" aria-labelledby="phone-number-label-1">
<label class="field__label field__label--stacked" id="phone-number-label-1">Phone number</label>
<span class="phone-input">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-1">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-1" />
</span>
</span>
</span>
Large Phone input
Use the phone-input--large modifier to increase the size of the phone input. Also, use btn--large, btn--large-fixed-height and textbox--large for the button and textbox respectively.
<span class="phone-input phone-input--large">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start btn--large btn--large-fixed-height" aria-expanded="false"
aria-haspopup="listbox" type="button" data-listbox-button-prefix="Country: ">
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" data-country-code="1"
aria-label="Country: United States of America (+1)">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" aria-hidden="true"
data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-2">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-2" />
</span>
</span>
Readonly Phone input
Use the phone-input--readonly modifier to make the control readonly. The listbox button is disabled and readonly attribute is added on the textbox to prevent any modification of its value.
<span class="phone-input phone-input--readonly">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America" disabled>
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" aria-hidden="true"
data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-3">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-3" value="123456789" readonly />
</span>
</span>
Disabled Phone Input
Use the phone-input--disabled modifier to turn on the disabled state. Besides modifier, disabled attribute on both the listbox button and textbox input to completely disable the phone input.
<span class="phone-input phone-input--disabled">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America" disabled>
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" aria-hidden="true"
data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-4">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-4" disabled />
</span>
</span>
Error Phone Input
Using the listbox-button--error modifier, turns on the error state to the listbox button and aria-invalid="true" to the textbox.
<span class="field" role="group" aria-labelledby="phone-number-label-2">
<label class="field__label field__label--stacked" id="phone-number-label-2">Phone number</label>
<span class="phone-input phone-input--error">
<span class="listbox-button listbox-button--form listbox-button--error">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-5">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-5 field-phone-number-1-description" aria-invalid="true" />
</span>
</span>
<div class="field__description field__description--attention" id="field-phone-number-1-description">
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16"></use>
</svg>
<span>There was an error</span>
</div>
</span>
Fluid Phone input
Using the phone-input--fluid modifier makes the component fluid and expands it to the width of its container.
<span class="phone-input phone-input--fluid">
<span class="listbox-button listbox-button--form">
<button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
<span class="btn__cell">
<span class="btn__text">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
</span>
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" aria-hidden="true"
data-country-code="355">
</span>
<span>Albania</span>
<span>(+355)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span class="fflag fflag--us" aria-hidden="true"
data-country-code="1">
</span>
<span>United States of America</span>
<span>(+1)</span>
</span>
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-6">+1</span>
<input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
aria-describedby="phone-prefix-6" />
</span>
</span>
![](static/skin-graphic.png)
@ebay/skin/progress-bar
DS v3.1The progress bar gives an immediate, real-time visualisation of the current task completion status.
Initial State
A value of 0 reflects an initial state, with zero progress.
<progress class="progress-bar" value="1" max="100">0%</progress>
Loading State
Any value between 0 and 100 reflects a loading state.
<progress class="progress-bar" value="50" max="100">50%</progress>
Completed State
A value of 100 reflects a completed state.
<progress class="progress-bar" value="100" max="100">100%</progress>
Fluid Progress Bar
To fill the entire width of the container, use the progress-bar--fluid modifier.
<progress class="progress-bar progress-bar--fluid" value="50" max="100">50%</progress>
Animated Progress Bar
Use the buttons below to see an example of the progress bar value being animated.
![](static/skin-graphic.png)
@ebay/skin/progress-bar-expressive
DS v1.1The expressive progress bar can replace our traditional spinner to feel faster during periods of longer loading. To portray responsive and quicker loads, the expressive loader's design uses visual momentum to indicate progression across refreshing, page loading and user actions.
This pattern consists of an animated progress bar in various colors and an optional set of messages that are cycled into view. These messages render in an element with role="status", which announces new content to assistive technology. The live examples that follow use aria-live="off" to prevent the status element from proactively announcing new content. This is only for demo purposes, so that this documentation page does not overwhelm the viewer with example status updates. The aria-live override should not be included in implementations of this pattern.
The expressive progress bar also renders different experiences depending on the prefers-reduced-motion media query. Toggle your reduced motion settings to view examples with the default behavior and reduced motion behavior.
Default Expressive Progress Bar
The base expressive loader consists of a progressbar with 12 lines of varying widths. Each line has a width of 10% - 40% of its container, with each set of four lines adding up to 100% width. You can use JavaScript to randomly generate the line widths, though it's not required.
In the default behavior, lines scale up from 0% to their defined width and move horizontally across the screen. When the user prefers reduced motion, the lines still animate. However, instead of growing from 0% to their defined width, they stay a fixed size and scroll more slowly across the screen.
<div class="progress-bar-expressive">
<div role="progressbar" aria-label="Loading..." class="progress-bar-expressive__progress">
<div class="progress-bar-expressive__lines">
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
</div>
</div>
</div>
Expressive Progress Bar with Single Message
If there is only one message, add the progress-bar-expressive__message--in class to its status element to animate it in.
<div class="progress-bar-expressive">
<div class="progress-bar-expressive__messages">
<div role="status" id="progress-bar-expressive-message-3"
class="progress-bar-expressive__message progress-bar-expressive__message--in">
Hang tight.
</div>
</div>
<div role="progressbar" aria-label="Loading..." aria-describedby="progress-bar-expressive-message-3"
class="progress-bar-expressive__progress">
<div class="progress-bar-expressive__lines">
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
</div>
</div>
</div>
Expressive Progress Bar with Multiple Messages
The following examples demonstrate cycling through messages using JavaScript. Note that JavaScript is not bundled with Skin, so you will need to write your own js implementation of this pattern. We have outlined the steps below so you can recreate them in your JavaScript framework of choice.
Default behavior
To cycle a message into view in the default mode:
- Animate in the message:
- Put the message content in the aria-hidden element with class progress-bar-expressive__message. This element is used just for the visual message animation; it is not read to screen readers.
- Add the progress-bar-expressive__message--in class to animate that message into view.
-
After the message animates in:
- Put the message content in the status element with class progress-bar-expressive__message. This will read the message aloud to screen reader users.
- Remove the progress-bar-expressive__message--in class from the aria-hidden element.
- After a fixed amount of time, add the expressive_loader__message--out class to the current message to animate it out of view. This can happen concurrently with the next message animating in.
Reduced motion behavior
When @media (prefers-reduced-motion: reduce), there is no transition state between messages, so the aria-hidden message is not needed. To fade in the first message, add the progress-bar-expressive__message--initial class to the status element. For all subsequent messages, remove the progress-bar-expressive__message--initial class and simply update the content in the status element.
<div class="progress-bar-expressive">
<div class="progress-bar-expressive__messages">
<div aria-hidden="true" class="progress-bar-expressive__message">
We're finishing your order.
</div>
<div role="status" id="progress-bar-expressive-message-2" class="progress-bar-expressive__message">
Hang tight.
</div>
</div>
<div role="progressbar" aria-label="Loading..." aria-describedby="progress-bar-expressive-message-2" class="progress-bar-expressive__progress">
<div class="progress-bar-expressive__lines">
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
</div>
</div>
</div>
Medium text
By default, the expressive progress bar displays with large text. For smaller text, apply the progress-bar-expressive--medium class to the message container.
<div class="progress-bar-expressive progress-bar-expressive-messages-example">
<div class="progress-bar-expressive__messages progress-bar-expressive__messages--medium">
<div aria-hidden="true" class="progress-bar-expressive__message ">
We're finishing your order.
</div>
<div role="status" id="progress-bar-expressive-message-5" class="progress-bar-expressive__message">
Hang tight.
</div>
</div>
<div role="progressbar" aria-label="Loading..." aria-describedby="progress-bar-expressive-message-5" class="progress-bar-expressive__progress">
<div class="progress-bar-expressive__lines">
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
<div class="progress-bar-expressive__line"></div>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/progress-spinner
DS v3.1A progress-spinner animation is used to convey a busy or loading state.
A progress-spinner is considered a critical graphic, therefore an img role and aria-label property are required.
<span class="progress-spinner" aria-label="Busy" role="img">
<svg aria-hidden="true" class="icon icon--24">
<use href="#icon-spinner-24"></use>
</svg>
</span>
Small Progress Spinner
Use the progress-spinner--small modifier class to create a small progress spinner.
<span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
<svg aria-hidden="true" class="icon icon--20">
<use href="#icon-spinner-20"></use>
</svg>
</span>
Large Progress Spinner
Use the progress-spinner--large modifier class to create a large progress spinner.
<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
<svg aria-hidden="true" class="icon icon--30">
<use href="#icon-spinner-30"></use>
</svg>
</span>
![](static/skin-graphic.png)
@ebay/skin/progress-stepper
DS v4.0Steppers portray progress through a sequence of steps.
Default Progress Stepper
The default stepper has a horizontal layout. The stepper fills all available space and evenly distributes its steps.
Use the aria-current attribute to denote the current step in the list. All items after the current will be shown in progress.
The default state for each item will be the complete or active state until it reaches [aria-current] element. Then the rest will be upcoming state. You can also use .progress-stepper__items--upcoming on the progress-stepper__items container to show upcoming state for all items.
Shipment Progress
Started
July 3rd
Shipped
July 4th
Transit
July 5th
Delivered
July 6th
<div class="progress-stepper" aria-labelledby="progress-stepper-header">
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="current" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
The stepper can be sized and aligned using standard CSS:
Shipment Progress
Started
July 3rd
Shipped
July 4th
Transit
July 5th
Delivered
July 6th
<div class="progress-stepper" aria-labelledby="progress-stepper-header" style="margin: 16px auto; width: 390px;">
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="current" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
Vertical Progress Stepper
Use the progress-stepper--vertical modifier for a stepper with vertical layout.
Order placed
New Mens Addidas Ultra Boost
Preparing for shipment
We will notify you once it ships.
Delivered
Guaranteed Wednesday, October 09.
<div class="progress-stepper progress-stepper--vertical">
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h3>Order placed</h3>
<p>New Mens Addidas Ultra Boost</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="current" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h3>Preparing for shipment</h3>
<p>We will notify you once it ships.</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
</span>
<span class="progress-stepper__text">
<h3>Delivered</h3>
<p>Guaranteed Wednesday, October 09.</p>
</span>
</div>
</div>
</div>
Shipment Progress
Started
July 3rd
Blocked
July 5th
Delivery
July 6th
<div class="progress-stepper" aria-labelledby="progress-stepper-header">
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="complete" class="icon" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="blocked" class="icon" height="24" width="24">
<use href="#icon-stepper-attention-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Blocked</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/radio
DS v2.0A radio button is a form control that allows a single selection from a group of choices.
The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.
The radio is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!
Default Radio
Use the radio base class to create a styled radio.
NOTE: Skin uses SVG to give a custom radio button appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default radio button in a non-CSS state.
<span class="radio">
<input class="radio__control" type="radio" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
Large Radio
For a larger radio button, use the radio--large modifier plus the #icon-radio-unchecked-24 and #icon-radio-checked-24 icons.
<span class="radio radio--large">
<input class="radio__control" type="radio" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="24" width="24" aria-hidden="true">
<use href="#icon-radio-unchecked-24"></use>
</svg>
<svg class="radio__checked" height="24" width="24" aria-hidden="true">
<use href="#icon-radio-checked-24"></use>
</svg>
</span>
</span>
Disabled Radio
Use the disabled attribute to disable any radio input.
<span class="radio">
<input class="radio__control" type="radio" checked disabled />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
Grouped Radio
A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select).
A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.
The following example uses the field module for simple layout of radio button fields and labels.
<fieldset>
<legend>Choose an Option</legend>
<span class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-1">Option 1</label>
</span>
<span class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-2">Option 2</label>
</span>
<span class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-3">Option 3</label>
</span>
</fieldset>
TIP: For large radios, wrap each label and control inside of a field__group element to maintain vertical alignment.
To stack radio buttons vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.
<fieldset>
<legend>Choose an Option</legend>
<div class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-4" type="radio" value="1" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-4">Option 1</label>
</div>
<div class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-5" type="radio" value="2" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-5">Option 2</label>
</div>
<div class="field">
<span class="field__control radio">
<input class="radio__control" id="group-radio-6" type="radio" value="3" name="radio-group" />
<span class="radio__icon" hidden>
<svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-unchecked-18"></use>
</svg>
<svg class="radio__checked" height="18" width="18" aria-hidden="true">
<use href="#icon-radio-checked-18"></use>
</svg>
</span>
</span>
<label class="field__label field__label--end" for="group-radio-6">Option 3</label>
</div>
</fieldset>
![](static/skin-graphic.png)
@ebay/skin/section-notice
DS v3.0A section notice conveys either system status and feedback to users about their actions and options or, for educational section notices, contextually educates users about programs, features and opportunities.
To aid discoverabilty for assistive technology, each section notice is a labelled landmark region.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="section-notice" role="region" aria-label="Notice" aria-roledescription="Notice">
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
Status Section Notice
A status-based section notice has a 16x16 icon representing confirmation, attention or information.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-confirmation">
<svg class="icon icon--16" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
<section class="section-notice" role="region" aria-label="Attention" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-attention">
<svg class="icon icon--16 icon--attention-filled" height="16" width="16" aria-label="Attention">
<use href="#icon-attention-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
<section class="section-notice" role="region" aria-label="Information" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-information">
<svg class="icon icon--16 icon--information-filled" height="16" width="16" aria-label="Information">
<use href="#icon-information-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
Titled Section Notice
Use a heading element to create a titled section notice.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-confirmation">
<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<h3 class="section-notice__title">Notification title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
Dismissable Section Notice
A close button can be placed in a section-notice__footer element.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-confirmation">
<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<h3 class="section-notice__title">Notification title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section-notice__footer">
<button aria-label="Close notice" class="fake-link section-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</section>
Actionable Section Notice
Link or button actions can be placed in a section-notice__cta element.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
<div class="section-notice__header">
<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
<use href="#icon-confirmation-filled-16"></use>
</svg>
</div>
<div class="section-notice__main">
<h3 class="section-notice__title">Notification title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<p class="section-notice__cta">
<a href="https://www.ebay.com">Action</a>
</p>
<div class="section-notice__footer">
<button aria-label="Close notice" class="fake-link section-notice__dismiss">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</section>
![](static/skin-graphic.png)
@ebay/skin/section-title
DS v4.0Section titles function as identifiers for groups of elements.
Static Section Title
The standard, static section title is designed to support a single line on desktop and wrap only when displayed on narrow screens such as mWeb or native.
Static Section Title
<div class="section-title">
<div class="section-title__title-container">
<h2 class="section-title__title">Static Section Title</h2>
</div>
</div>
Subtitled Section Title
The subtitle is designed to support any additional information. This text should be concise and fit onto a single line.
Subtitled Section Title
Plus, guaranteed best prices.<div class="section-title">
<div class="section-title__title-container">
<h2 class="section-title__title">Subtitled Section Title</h2>
<span class="section-title__subtitle">Plus, guaranteed best prices.</span>
</div>
</div>
Linked Section Title
An arrow icon gives visual affordance that the title is a link. A linked section title can also have a subtitle.
Linked Section Title
<div class="section-title">
<div class="section-title__title-container">
<h2 class="section-title__title">Linked Section Title</h2>
</div>
<a class="section-title__cta" href="https://www.ebay.com">Link</a>
</div>
Section Title with Favorite
Section Title with Favorite
<div class="section-title">
<div class="section-title__title-container">
<h2 class="section-title__title">Section Title with Favorite</h2>
</div>
<div class="section-title__info">
<span class="infotip">
<button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
<svg aria-hidden="true" class="icon icon--16" width="16" height="14">
<use href="#icon-save-16"></use>
</svg>
</button>
</span>
</div>
</div>
Overflow Section Title
The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback).
Overflow Section Title
<div class="section-title">
<div class="section-title__title-container">
<h2 class="section-title__title">Overflow Section Title</h2>
</div>
<div class="section-title__overflow">
<span class="menu-button">
<button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" aria-label="Options" type="button">
<svg class="icon icon--16" width="3" height="13" aria-hidden="true">
<use href="#icon-overflow-vertical-16"></use>
</svg>
</button>
<div class="menu-button__menu menu-button__menu--reverse">
<div class="menu-button__items" role="menu">
<div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
<div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
<div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
</div>
</div>
</span>
</div>
</div>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/select
DS v2.2A select allows the user to select one item from a list of options. A select is exactly the same as a normal HTML select (because it is one), but Skin's version uses a wrapper to style it.
The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a menu maybe a better choice.
IMPORTANT: The examples below show the select in isolation, without any label. Please see the field module for details on labeling controls. Remember: every select requires a label!
Default select
<span class="select">
<select name="options">
<option value="item1">Option 1</option>
<option value="item2">Option 2</option>
<option value="item3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Disabled select
<span class="select">
<select name="options" disabled>
<option value="item1">Option 1</option>
<option value="item2" selected>Option 2</option>
<option value="item3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Selected option
<span class="select">
<select name="options">
<option value="item1">Option 1</option>
<option value="item2" selected>Option 2</option>
<option value="item3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Unselected Select
If no suitable default value exists, the first option in the list can be used as a prompt and set to disabled & selected.
<span class="select">
<select>
<option value="0" disabled selected>-select-</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Fluid select
<span class="select select--fluid">
<select name="options">
<option value="item1">Option 1</option>
<option value="item2" selected>Option 2</option>
<option value="item3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Borderless select
<span class="select select--borderless">
<select name="options" id="options">
<option value="item1">Option 1</option>
<option value="item2" selected>Option 2</option>
<option value="item3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Large Select
For a large select, apply the select--large modifier.
<span class="select select--large">
<select>
<option value="0" disabled selected>Choose a Size</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
![](static/skin-graphic.png)
@ebay/skin/signal
DS v1.0Signals are data-backed recommendations to help customers make more informed decisions.
There are four signal types, each with its own corresponding modifier class: trustworthy, recent, time-sensitive & neutral.
<span class="signal signal--trustworthy">Trustworthy</span>
<span class="signal signal--recent">Recent</span>
<span class="signal signal--time-sensitive">Time Sensitive</span>
<span class="signal signal--neutral">Neutral</span>
![](static/skin-graphic.png)
@ebay/skin/skeleton BETA
A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the progress spinner in many situations.
A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve.
A skeleton is NOT appropriate as a placeholder for content if rendering that content or placeholder would cause unexpected page layout shift (see below for more details).
Cumulative Layout Shift (CLS)
It is the developer's responsibility to ensure the CLS metric of a page is not negatively impacted by the introduction of a skeleton placeholder; a poor CLS score will occur whenever content shifts unexpectedly. Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Skeletons can help mask these problems if they reserve the correct amount of physical space, but can compound the problem when they do not.
The skeleton examples page illustrates various techniques for implementing skeletons across some common loading scenarios.
Skeleton Types
Skeleton | Default | On-Secondary | Purple | Green | Blue |
---|---|---|---|---|---|
Avatar |
|
|
|
|
|
Button |
|
|
|
|
|
Textbox |
|
|
|
|
|
Image |
|
|
|
|
|
Text |
|
|
|
|
|
On large screens, skeleton loaders use a solid fill for background color; on small screens, a shimmer is applied.
The color can be changed to purple, green or blue by applying the appropriate modifier, e.g. skeleton--green. View the composite skeletons examples for further details.
Avatar Skeleton
Use the skeleton__avatar class to create a skeleton placeholder for an avatar.
<div class="skeleton" role="img" aria-label="loading">
<div class="skeleton__avatar"></div>
</div>
Button Skeleton
Use the skeleton__button class to create a skeleton placeholder for the default button shape.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__button"></div>
</div>
Use the small modifier to match the shape of a small button.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__button skeleton__button--small"></div>
</div>
Use the large modifier to match the shape of a large button.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__button skeleton__button--large"></div>
</div>
Textbox Skeleton
Use the skeleton__textbox class to create a skeleton placeholder for a textbox.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__textbox"></div>
</div>
Image Skeleton
Use the skeleton__image class to create a skeleton placeholder for an image.
<div class="skeleton" role="img" aria-label="loading">
<div class="skeleton__image" style="height: 50px; width: 50px;"></div>
</div>
Notice that the height and width must be set on the skeleton__image element.
<div class="skeleton" role="img" aria-label="loading">
<div class="skeleton__image" style="height: 200px; width: 200px;"></div>
</div>
Text Block Skeleton
Use the skeleton__text class to create a skeleton for a single block of text.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__text skeleton__text--small"></div>
</div>
Use the skeleton__text--large modifier to match the shape of a large block of text.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__text skeleton__text--large"></div>
</div>
Use the skeleton__text--multiline mofifier to create a skeleton for two lines of text.
<div class="skeleton" role="img" aria-label="loading" style="width: 200px;">
<div class="skeleton__text skeleton__text--multiline"></div>
</div>
Composite Skeleton
Combinations of skeletons can form a custom placeholder for more complex content, such as a typical eCommerce item tile in the example below.
<div class="skeleton skeleton--purple" role="img" aria-label="loading" style="width: 225px;">
<div class="skeleton__image" style="width: 225px; height: 225px"></div>
<div class="skeleton__text skeleton__text--multiline"></div>
</div>
Here is a skeleton for a compact user profile. Notice that a div tag can be replaced with a span tag for inline-block layout of elements.
<div class="skeleton skeleton--blue" role="img" aria-label="loading">
<span class="skeleton__avatar"></span>
<span class="skeleton__text skeleton__text--multiline" style="width: 200px; vertical-align: top;"></span>
</div>
Skeleton Variables EXPERIMENTAL
The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes.
- --skeleton-background
![](static/skin-graphic.png)
@ebay/skin/snackbar-dialog
DS v2.0A snackbar is a non-modal dialog that appears in response to a lightweight user action. It dissapears automatically after a minimum of 6 seconds.
The display of the snackbar should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the snackbar-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.
NOTE: A toast is non-modal and therefore should not capture or trap keyboard focus when opened.
Default Snackbar
The default snackbar displays a short, non-interactive message.
<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
<div class="snackbar-dialog__window">
<div class="snackbar-dialog__main">
<p>1 item deleted from watch list.</p>
</div>
</div>
</aside>
Action Snackbar
A snackbar can contain a single shortcut action. Typically this is an "undo".
In order to give all users adequate time to find and reach the action, the snackbar DOM position must be placed closely after the users current location (i.e. document.activeElement). This ensures a natual reading and keyboard order. In addition, an accesskey attribute allows quick access via the operating system's access keys.
<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
<div class="snackbar-dialog__window">
<div class="snackbar-dialog__main">
<p>1 item deleted from watch list.</p>
</div>
<div class="snackbar-dialog__actions">
<button accesskey="u" class="fake-link snackbar-dialog__cta">Undo<span class="clipped"> - Access Key: U</span></button>
</div>
</div>
</aside>
Stacked Snackbar
The content and action can be stacked vertically by using the snackbar-dialog__window--column modifier.
<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog snackbar-dialog--transition" role="dialog" hidden>
<div class="snackbar-dialog__window snackbar-dialog__window--column">
<div class="snackbar-dialog__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="snackbar-dialog__actions">
<button accesskey="u" class="fake-link snackbar-dialog__cta">Undo<span class="clipped"> - Access Key: U</span></button>
</div>
</div>
</aside>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/star-rating
DS v1.0This is a non-interactive, display-only star rating pattern. For an interactive user-selectable star rating selection pattern, please refer to Star Rating Select.
Method 1: Combined Stars
This is the simplest method for displaying star rating. To have more flexibility over individual stars, consider using Method 2 - Independent Stars.
Each non-interactive star-rating is available as an SVG symbol.
Below is the code example for how to use the "star-rating-2-5" symbol. Please refer to the icon section for full guidance on how to include and use SVG symbols.
<svg role="img" aria-label="Rating: 2.5/5" class="star-rating" height="16">
<use href="#star-rating-2-5"></use>
</svg>
Method 2: Independent Stars
This is built using fine-grained pieces (individual stars) for optimal flexibility and for allowing potential independant star treatments (i.e. animations).
<div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
<svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
<svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
<svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
<svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
<svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</div>
![](static/skin-graphic.png)
@ebay/skin/star-rating-select
DS v1.0Star rating select allows users to interact with and set a star rating.
Star rating select uses radio buttons under the hood so even in the absence of CSS, its gracefully degradation should allow for full accessible interactivity and use.
NOTE: JavaScript is required to handle the filled visual marking of all stars previous to the currently selected star rating.
Star Rating Select with Visual Semantic Grouping
This instance of star rating select uses visible HTML fieldset
and legend
for semantic grouping.
<div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
<fieldset>
<legend>Rate this product</legend>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="1 Star" type="radio" value="1">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="2 Stars" type="radio" value="2">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="3 Stars" type="radio" value="3">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="4 Stars" type="radio" value="4">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="5 Stars" type="radio" value="5">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
</fieldset>
</div>
Star Rating Select with Invisible ARIA Semantic Grouping
This instance of star rating select uses an invisible ARIA radio group for semantic grouping.
<div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="1 Star" type="radio" value="1">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="2 Stars" type="radio" value="2">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="3 Stars" type="radio" value="3">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="4 Stars" type="radio" value="4">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
<span class="star-rating-select__radio">
<input class="star-rating-select__control" aria-label="5 Stars" type="radio" value="5">
<span class="star-rating-select__radio-icon">
<svg height="16" width="16" aria-hidden="true">
<use href="#icon-star-dynamic"></use>
</svg>
</span>
</span>
</div>
![](static/skin-graphic.png)
@ebay/skin/svg
The SVG module imports an external SVG source containing all symbol definitions.
![](static/skin-graphic.png)
@ebay/skin/switch
DS v2.1A switch behaves a bit like a checkbox - it can be on or off (i.e checked or unchecked). The key difference is that a switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload) rather than storing form data to be sent to the server.
Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options.
A switch requires the switch role and aria-checked attribute for assistive technology.
REMEMBER: every switch requires a visible, programmatic label to indicate its purpose.
Default Switch
The default version of the switch requires JavaScript to maintain the aria-checked state when clicked.
The switch__control child element requires a tabindex value of 0 (zero) to be keyboard focusable.
<span class="switch">
<span class="switch__control" role="switch" tabindex="0" aria-checked="false"></span>
<span class="switch__button"></span>
</span>
Disabled Switch
To disable a switch, apply the aria-disabled attribute.
The tabindex property must be set to -1 (negative one) to prevent keyboard focus.
<span class="switch">
<span class="switch__control" role="switch" tabindex="-1" aria-checked="false" aria-disabled="true"></span>
<span class="switch__button"></span>
</span>
Checkbox Switch
This version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead.
<span class="switch">
<input class="switch__control" role="switch" type="checkbox" aria-checked="false" />
<span class="switch__button"></span>
</span>
Disabled Checkbox Switch
To disable a checkbox switch, apply the disabled attribute.
<span class="switch">
<input class="switch__control" role="switch" type="checkbox" aria-checked="false" disabled />
<span class="switch__button"></span>
</span>
Custom Properties of Switch EXPERIMENTAL
The following custom properties (aka CSS Variables) are available for system color-scheme appearance (i.e. light-mode & dark-mode) and other general theming purposes:
- --switch-unchecked-background-color
- --switch-checked-background-color
- --switch-disabled-background-color
- --switch-foreground-color
- --switch-unchecked-hover-background-color
- --switch-checked-hover-background-color
<style>
.switch--theme-1 {
--switch-unchecked-background-color: orange;
--switch-checked-background-color: green;
--switch-unchecked-hover-background-color: coral;
--switch-checked-hover-background-color: limegreen;
}
@media (prefers-color-scheme: dark) {
.switch--theme-1 {
--switch-unchecked-background-color: blue;
--switch-checked-background-color: red;
--switch-unchecked-hover-background-color: purple;
--switch-checked-hover-background-color: indianred;
}
}
</style>
<span class="switch switch--theme-1">
<span class="switch__control" role="switch" tabindex="0" aria-checked="false"></span>
<span class="switch__button"></span>
</span>
![](static/skin-graphic.png)
@ebay/skin/tabs
DS v2.1Tabs allow the user to switch between multiple panels of content. By decluttering the user-interface in this way, we say that tabs follow the principal of progressive disclosure.
Selecting a tab should update the visible panel without a full page reload. If a full page load is required instead (i.e. acting like a link), please see the fake tab section below for more details.
Default Tabs
When a tab is selected, the aria-selected state of all tabs in the list must be updated in order for the CSS to reflect the change. Only one tab can be selected and in the tab order at any moment in time. Likewise, only one tabpanel can be visible at any time, and it must correspond to the currently selected tab.
Use child element modifier tabs__items--large to opt into larger font-size for tabs.
NOTE: JavaScript is required to handle tab selection state, panel visibility, focus management and arrow-key navigation. For detailed behaviour requirements, please visit the eBay MIND Pattern for Tabs.
Panel 1 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Panel 2 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Panel 3 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="tabs">
<div class="tabs__items" role="tablist">
<div aria-controls="default-tabpanel-1" aria-selected="true" class="tabs__item" id="default-tab-1" role="tab">
<span>Tab 1</span>
</div>
<div aria-controls="default-tabpanel-2" aria-selected="false" class="tabs__item" id="default-tab-2" role="tab">
<span>Tab 2</span>
</div>
<div aria-controls="default-tabpanel-3" aria-selected="false" class="tabs__item" id="default-tab-3" role="tab">
<span>Tab 3</span>
</div>
</div>
<div class="tabs__content">
<div aria-labelledby="default-tab-1" class="tabs__panel" id="default-tabpanel-1" role="tabpanel">
<div class="tabs__cell">
<h3>Panel 1 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
</div>
</div>
<div aria-labelledby="default-tab-2" class="tabs__panel" hidden id="default-tabpanel-2" role="tabpanel">
<div class="tabs__cell">
<h3>Panel 2 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
</div>
</div>
<div aria-labelledby="default-tab-3" class="tabs__panel" hidden id="default-tabpanel-3" role="tabpanel">
<div class="tabs__cell">
<h3>Panel 3 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
</div>
</div>
</div>
</div>
Fake Tabs
A fake tab looks like a normal tab, but is actually a hyperlink to a new page. Therefore a set of fake tabs behaves more like a simple navigational widget, rather than a dynamic user interface control.
A valid HREF attribute is required for all anchor tags. A value of "javascript" (or any such variant) is not a valid URL!
The aria-current attribute is used to programmatically denote the current page state and current link.
Use child element modifier fake-tabs__items--large to opt into larger font-size for fake tabs.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="fake-tabs">
<ul class="fake-tabs__items">
<li class="fake-tabs__item">
<a aria-current="page" href="https://www.ebay.com">Page 1</a>
</li>
<li class="fake-tabs__item">
<a href="https://www.ebay.com">Page 2</a>
</li>
<li class="fake-tabs__item">
<a href="https://www.ebay.com">Page 3</a>
</li>
</ul>
<div class="fake-tabs__content">
<div class="fake-tabs__cell">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?</p>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/textbox
DS v2.2A textbox (also known as an input) allows the user to enter data.
The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button.
IMPORTANT: The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label!
Single-Line Textbox
Use an input tag for a single-line textbox.
<span class="textbox">
<input class="textbox__control" type="text" placeholder="placeholder text" />
</span>
Readonly Textbox
Use the readonly attribute to prevent any modification of the value.
<span class="textbox textbox--readonly">
<input class="textbox__control" type="text" value="Readonly textbox" readonly />
</span>
Disabled Textbox
Use the disabled attribute to completely disable the input and any value.
<span class="textbox textbox--disabled">
<input class="textbox__control" type="text" placeholder="placeholder text" disabled />
</span>
Error-State Textbox
Use the aria-invalid attribute to highlight any input with error.
<span class="textbox textbox--invalid">
<input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" />
</span>
Multi-line Textbox
Use the textarea tag for a multi-line textbox.
A multi-line textbox allows line breaks and has a minimum height of 200px.
<span class="textbox">
<textarea class="textbox__control" placeholder="placeholder text"></textarea>
</span>
Fluid Textbox
Apply the textbox--fluid modifier (or fluid utility class) to fill the width of the parent element.
<div class="textbox textbox--fluid">
<input class="textbox__control" type="text" placeholder="placeholder text" />
</div>
Textbox with Icon
Single-line textboxes can be augmented with any SVG icon.
<span class="textbox">
<svg class="icon icon--24" width="16" height="16" aria-hidden="true">
<use href="#icon-mail-24"></use>
</svg>
<input class="textbox__control" type="text" placeholder="placeholder text" />
</span>
To display the icon at the end of the control, position the svg tag after the input.
<span class="textbox">
<input class="textbox__control" type="text" placeholder="placeholder text" />
<svg class="icon icon--24" width="16" height="16" aria-hidden="true">
<use href="#icon-mail-24"></use>
</svg>
</span>
NOTE: The icon is presentational, and therefore hidden from assistive technology using aria-hidden. Remember, the purpose of the field must be conveyed using a label.
Textbox with Icon Button
Single-line textboxes also support an icon button in the end position.
<span class="textbox">
<input class="textbox__control" type="text" placeholder="placeholder text" />
<button class="icon-btn icon-btn--transparent" type="button" aria-label="Clear text">
<svg aria-hidden="true" class="icon icon--24" width="16" height="16">
<use href="#icon-clear-24"></use>
</svg>
</button>
</span>
An icon button in the end position can also be teamed up with a static icon in the start position.
<span class="textbox">
<svg class="icon icon--24" width="16" height="16" aria-hidden="true">
<use href="#icon-search-24"></use>
</svg>
<input aria-label="Textbox demo" class="textbox__control" type="text" placeholder="placeholder text" />
<button class="icon-btn icon-btn--transparent" type="button" aria-label="Clear text">
<svg aria-hidden="true" class="icon icon--24" width="16" height="16">
<use href="#icon-clear-24"></use>
</svg>
</button>
</span>
Large Textbox
Use textbox--large modifier to style the textbox to be large size
<span class="textbox">
<input class="textbox__control" type="text" />
</span>
Textbox Prefix
Add a span containing text before the input to show it as a prefix text.
<span class="textbox">
<span>$</span>
<input class="textbox__control" type="text" />
</span>
Textbox Postfix
Add a span containing text after the input to show it as a postfix text.
<span class="textbox">
<input class="textbox__control" type="text" />
<span>in.</span>
</span>
Mixed icons and static text
Postfix/prefix icons can be mixed with static text in the textbox.
<span class="textbox">
<span>$</span>
<input class="textbox__control" type="text" placeholder="0.00" />
<button class="icon-btn icon-btn--transparent icon-btn--small" type="button" aria-label="Clear text">
<svg aria-hidden="true" class="icon icon--clear-16" width="16" height="16">
<use href="#icon-clear-16"></use>
</svg>
</button>
</span>
![](static/skin-graphic.png)
@ebay/skin/toast-dialog
DS v2.2A toast is a non-modal dialog that appears in response to a system-level action.
The display of the toast should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the toast-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.
NOTE: A toast is non-modal and therefore should not capture or trap keyboard focus when opened. Keyboard users require a way to quickly access the actions within the toast. This is achieved via the accesskey attribute.
Default Toast
The default toast displays a single, primary call-to-action.
<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast-dialog toast-dialog--transition" hidden role="dialog">
<div class="toast-dialog__window">
<div class="toast-dialog__header">
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
<button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
<svg class="icon icon--close icon--close-16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="toast-dialog__main">
<p>We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we recommend you change the password.</p>
</div>
<div class="toast-dialog__footer">
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
</div>
</div>
</aside>
Toast Secondary Action
A secondary action is also supported.
<aside aria-label="Notification" aria-live="polite" aria-modal="false" class="toast-dialog toast-dialog--transition" hidden role="dialog">
<div class="toast-dialog__window">
<div class="toast-dialog__header">
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
<button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
<svg class="icon icon--close icon--close-16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="toast-dialog__main">
<p>We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we recommend you change the password.</p>
</div>
<div class="toast-dialog__footer">
<button accesskey="l" class="btn btn--secondary">Later</button>
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
</div>
</div>
</aside>
![](static/skin-graphic.png)
![](static/skin-graphic.png)
![](static/skin-graphic.png)
@ebay/skin/tokens
Contains all custom properties necessary to correctly render the Evo Design System, in accordance with the token system.
Core, light and dark token sets are individually exposed via the following submodules:
- @ebay/skin/tokens/evo-core
- eBay default primitives
- @ebay/skin/tokens/evo-light
- eBay semantic aliases for light mode
- @ebay/skin/tokens/evo-dark*
- eBay semantic aliases for dark mode
*This sub-module will not be included automatically by it's parent module; it must be explicitly included by any page that is itself dark-mode compatible.
Primitive Color Tokens
- color-avocado-100
- color-avocado-200
- color-avocado-300
- color-avocado-400
- color-avocado-500
- color-avocado-600
- color-avocado-700
- color-avocado-800
- color-marigold-100
- color-marigold-200
- color-marigold-300
- color-marigold-400
- color-marigold-500
- color-marigold-600
- color-marigold-700
- color-marigold-800
- color-blue-100
- color-blue-200
- color-blue-300
- color-blue-400
- color-blue-500
- color-blue-600
- color-blue-700
- color-blue-800
- color-coral-100
- color-coral-200
- color-coral-300
- color-coral-400
- color-coral-500
- color-coral-600
- color-coral-700
- color-coral-800
- color-orange-100
- color-orange-200
- color-orange-300
- color-orange-400
- color-orange-500
- color-orange-600
- color-orange-700
- color-orange-800
- color-dijon-100
- color-dijon-200
- color-dijon-300
- color-dijon-400
- color-dijon-500
- color-dijon-600
- color-dijon-700
- color-dijon-800
- color-pink-100
- color-pink-200
- color-pink-300
- color-pink-400
- color-pink-500
- color-pink-600
- color-pink-700
- color-pink-800
- color-green-100
- color-green-200
- color-green-300
- color-green-400
- color-green-500
- color-green-600
- color-green-700
- color-green-800
- color-red-100
- color-red-200
- color-red-300
- color-red-400
- color-red-500
- color-red-600
- color-red-700
- color-red-800
- color-indigo-100
- color-indigo-200
- color-indigo-300
- color-indigo-400
- color-indigo-500
- color-indigo-600
- color-indigo-700
- color-indigo-800
- color-teal-100
- color-teal-200
- color-teal-300
- color-teal-400
- color-teal-500
- color-teal-600
- color-teal-700
- color-teal-800
- color-jade-100
- color-jade-200
- color-jade-300
- color-jade-400
- color-jade-500
- color-jade-600
- color-jade-700
- color-jade-800
- color-yellow-100
- color-yellow-200
- color-yellow-300
- color-yellow-400
- color-yellow-500
- color-yellow-600
- color-yellow-700
- color-yellow-800
- color-kiwi-100
- color-kiwi-200
- color-kiwi-300
- color-kiwi-400
- color-kiwi-500
- color-kiwi-600
- color-kiwi-700
- color-kiwi-800
- color-violet-100
- color-violet-200
- color-violet-300
- color-violet-400
- color-violet-500
- color-violet-600
- color-violet-700
- color-violet-800
- color-lilac-100
- color-lilac-200
- color-lilac-300
- color-lilac-400
- color-lilac-500
- color-lilac-600
- color-lilac-700
- color-lilac-800
- color-neutral-100
- color-neutral-200
- color-neutral-300
- color-neutral-400
- color-neutral-500
- color-neutral-600
- color-neutral-700
- color-neutral-800
- color-neutral-900
Semantic Color Tokens
- color-background-primary
- color-background-secondary
- color-background-disabled
- color-background-inverse
- color-background-attention
- color-background-confirmation
- color-background-information
- color-background-accent
- color-background-invalid
- color-foreground-primary
- color-foreground-secondary
- color-foreground-disabled
- color-foreground-attention
- color-foreground-confirmation
- color-foreground-information
- color-foreground-accent
- color-foreground-visited
- color-foreground-on-primary
- color-foreground-on-secondary
- color-foreground-on-disabled
- color-foreground-on-inverse
- color-foreground-on-accent
- color-foreground-on-attention
- color-foreground-on-confirmation
- color-foreground-on-information
- color-stroke-default
- color-stroke-accent
- color-stroke-attention
- color-stroke-confirmation
- color-stroke-information
- color-stroke-disabled
- color-stroke-strong
- color-stroke-subtle
- color-state-visited
- color-state-primary-hover
- color-state-primary-active
- color-state-secondary-hover
- color-state-secondary-active
- color-state-inverse-hover
- color-state-inverse-active
- color-state-accent-hover
- color-state-accent-active
- color-state-attention-hover
- color-state-attention-active
- color-scrim-image
- color-scrim-background
- color-ai-gradient-full-spectrum
- color-ai-gradient-green-strong
- color-ai-gradient-blue-strong
- color-ai-gradient-purple-strong
- color-ai-gradient-green-subtle
- color-ai-gradient-blue-subtle
- color-ai-gradient-purple-subtle
![](static/skin-graphic.png)
@ebay/skin/tooltip
DS v2.0A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.
The tooltip must be programmatically associated with the button by using the aria-describedby property and tooltip role.
Toggle the aria-expanded state of the button to expand or collapse its associated tooltip.
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--24" height="16" width="16" aria-hidden="true">
<use href="#icon-settings-24"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="top: 48px; left: 4px">
<span class="tooltip__pointer tooltip__pointer--top-left"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.
In order to get this to work with floating-ui, you need to remove pointer position tooltip__pointer--top-left and remove any style positioning
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--24" height="16" width="16" aria-hidden="true">
<use href="#icon-settings-24"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip">
<span class="tooltip__pointer"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
![](static/skin-graphic.png)
@ebay/skin/tourtip
DS v2.0A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.
Toggle the tourtip--expanded modifier to expand or collapse the tourtip.
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label" style="bottom: -125px; left: -6px; top: auto;">
<span class="tourtip__pointer tourtip__pointer--top-left"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
<h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
<p>Here's something new to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.
In order to get this to work with floating-ui, you need to remove pointer position tourtip__pointer--top-left and remove any style positioning
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
<h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
<p>Here's something new to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
With footer
Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
<h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
<p>Here's something new to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
<div class="tourtip__footer">
<span class="tourtip__index">1 / 3</span>
<button class="fake-link">Back</button>
<button class="btn btn--primary">Next</button>
</div>
</div>
</div>
</div>
</div>
![](static/skin-graphic.png)
@ebay/skin/typography
Static sites without access to the LESS preprocessor can leverage the Skin type ramp via the typography module.
Giant text and large text are always bold. Other entries in the type ramp can be set to bold-text or secondary-text using the relevant class.
- .giant-text-3
- .giant-text-2
- .giant-text-1
- .large-text-2
- .large-text-1
- .medium-text
- .regular-text
- .small-text
Product Titles
Product titles are regular font weight, use the Market Sans font and are responsive based on a small or large screen size.
- .giant-product-title
- .large-product-title
- .medium-product-title
- .small-product-title
Section Titles
Section titles are bold font weight, use the Market Sans font and are responsive based on a small or large screen size.
- .giant-section-title
- .large-section-title
- .medium-section-title
- .small-section-title
![](static/skin-graphic.png)
@ebay/skin/utility
The utility module provides a small set of common, utility classes. It is not intended as an exhaustive library of utility classes or functions (i.e. it is not Funcssion!).
Class | Properties |
---|---|
.clearfix | Clear floated elements |
.clipped | Element visible to screen reader only |
.clipped--stealth | Clipped element becomes visible on focus (modifier) |
.image-treatment | Applied on an image container. Will apply a grey background to the image inside container. |
.image-stretch | Image will stretch up and down |
.image-center | Vertically and horizontally center an image |
.image-scale | Image will scale up and down |
.text-truncate | Truncate single-line text |
Utility Notes
Item | Notes |
---|---|
will-change | There are known performance issues using this approach to indicate imminent element style changes for browsers. It's recommended to use this sparingly and only to remedy known performance issues and not anticipate them. |