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.
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.
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.
Webpack configuration:
Usage:
Lasso.js
Add the @ebay/skin module as a browser.json dependency to include the entire set of Skin modules.
Or, alternatively, by specifying modules on a per-need basis.
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.
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.
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.
@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.
@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.
The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.
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"!).
Signed-Out Avatar
The avatar-signed-out icon is used to a represent a user that is not signed in.
Avatar Sizes
Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.
@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.
@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.
Slide Carousel
A slide carousel has a discrete number of items in the viewport. Each group of items constitutes a "slide".
For visual affordance, instead of a faded mask, slide carousels are always able to show a "peek" of more content.
A slide carousel requires an ARIA live-region (typically also a heading) to convey slide updates to assistive technology.
Slideshow Carousel
A slideshow carousel is a discrete carousel that shows exactly one item per slide; it requires no other visual affordance than a play/pause button.
A slideshow carousel can be set to autoplay, but must loop no more than once.
@ebay/skin/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.
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.
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 |
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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
Calendar With Header Pagination
The calendar module allows an optional header section for pagination between months.
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 |
@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.
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.
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.
Disabled Checkbox
Use the disabled attribute to disable any checkbox input.
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.
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.
@ebay/skin/chip
DS v1.0.0A chip represents a descrete highlighted value.
Static Chip
A static chip simply for informational purposes.
Interactive Chip
An interactive chip has a delete button inside for chip removal.
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.
@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.
Fluid Chips Combobox
Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.
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
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
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
@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.
Disabled Combobox
Apply the disabled property to disable the combobox.
@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.
@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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
@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.
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.
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.
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.
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.
@ebay/skin/drawer-dialog
DS v2.0** DEPRECATED ** Use lightbox-dialog instead
The drawer is a modal dialog that opens and slides out from the bottom of the screen. It is intended for small, mobile screens.
When opened, a drawer will slide out only as far as its content, up to a maximum screen height of 50%.
An opened drawer can be expanded beyond 50%, all the way to 95% screen height, by applying the .drawer-dialog__window--expanded modifier class. This class should be added with JavaScript when scrolling the content or clicking the handle button.
Drawer with text close button
@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.
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.
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.
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.
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.
Actionable Education Notice Using Fake Button
The Vault
You can now use the Vault to store items like this securely.
@ebay/skin/fullscreen-dialog
DS v2.1A fullscreen dialog is a child window that takes up the entire viewport. Typically used on small screens.
The dialog must remain in a hidden state for all users and devices until opened.
Fullscreen 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.
Fullscreen Dialog with footer
Sliding Fullscreen Dialog
The fullscreen dialog should slide in and out, using the fullscreen-dialog__window--slide modifier.
You can use fullscreen-dialog__window--slide-end modifier, to slide in from the right side of the screen.
@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 |
@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.
Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.
For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.
Stacked Field
For a label stacked above the control, use the field__label--stacked element modifier.
Again, multiple fields can be laid out inline by using a span tag, as per the example below.
Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.
Field Font-Size
The field label will honour any font-size cascade. 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.
Disabled Field
The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.
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.
Required Field
A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.
Invalid Field
An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.
IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.
Field 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.
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.
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.
Text Below Floating label
When you use a floating label, you can have the description text below
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.
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.
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.
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.
TIP: You may want to experiment with sizes other than 100%, and also the flexbox justify-content property.
For a fluid control and description, those elements can be wrapped in a field__group container to create flex layout.
Field 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
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.
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.
@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.
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.
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
@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.
Floating Label with Value
If the textbox has a value, the label must be positioned above the textbox.
Large floating label
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.
Floating Label with Placeholder
The placeholder should only be shown when the textbox is focused and there is no text
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.
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
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.
Floating Label with long text
This example shows how the floating label will truncate with long text
Floating Label with select
Floating Label with large select
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.
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.
@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.
@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.
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.
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.
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.
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.
Complex Icons
Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.
@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
Variable widths with borders
@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.
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
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
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.
@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.
@ebay/skin/less
DS v1.0In 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.
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();
@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.
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.
Expanded Lightbox
For small screens you can use .lightbox-dialog__window--expanded class to expand the viewport. This is generally controlled by the handle.
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.
Wide Lightbox
To have a wider lightbox add lightbox-dialog--wide 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.
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.
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.
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.
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.
@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.
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.
Fake Link
To style a button to look like a link, use the fake-link class.
@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.
Selected Listbox
An initial selection can be specified by applying the aria-selected state to a single option.
Listbox with subtitles
You can add a subtitle to an option by adding a .listbox__description element.
@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
TIP: The Market Sans font-family, and all fallbacks, can also be applied using the Less variable @font-family-market-sans.
@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.
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.
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.
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.
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.
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:
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:
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@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.
Dismissable Page Notice With Title
Notice Title
Opt into eBay payments before Jan 12th to pay no selling fees.
Form Error Page Notice
@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").
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).
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.
@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.
Panel dialog with footer
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.
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.
@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.
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.
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__control--large for the button and textbox respectively.
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.
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.
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.
Fluid Phone input
Using the phone-input--fluid modifier makes the component fluid and expands it to the width of its container.
@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.
Loading State
Any value between 0 and 100 reflects a loading state.
Completed State
A value of 100 reflects a completed state.
Fluid Progress Bar
To fill the entire width of the container, use the progress-bar--fluid modifier.
Animated Progress Bar
Use the buttons below to see an example of the progress bar value being animated.
@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.
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.
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.
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.
@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.
Small Progress Spinner
Use the progress-spinner--small modifier class to create a small progress spinner.
Large Progress Spinner
Use the progress-spinner--large modifier class to create a large progress spinner.
@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
The stepper can be sized and aligned using standard CSS:
Shipment Progress
Started
July 3rd
Shipped
July 4th
Transit
July 5th
Delivered
July 6th
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.
Shipment Progress
Started
July 3rd
Blocked
July 5th
Delivery
July 6th
@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.
Large Radio
For a larger radio button, use the radio--large modifier plus the #icon-radio-unchecked-24 and #icon-radio-checked-24 icons.
Disabled Radio
Use the disabled attribute to disable any radio input.
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.
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.
@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.
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.
Titled Section Notice
Use a heading element to create a titled section notice.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
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.
@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
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.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
Section Title with Favorite
Section Title with Favorite
Overflow Section Title
The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback).
Overflow Section Title
@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
Disabled select
Selected option
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.
Fluid select
Borderless select
Large Select
For a large select, apply the select--large modifier.
@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.
@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.
Button Skeleton
Use the skeleton__button class to create a skeleton placeholder for the default button shape.
Use the small modifier to match the shape of a small button.
Use the large modifier to match the shape of a large button.
Textbox Skeleton
Use the skeleton__textbox class to create a skeleton placeholder for a textbox.
Image Skeleton
Use the skeleton__image class to create a skeleton placeholder for an image.
Notice that the height and width must be set on the skeleton__image element.
Text Block Skeleton
Use the skeleton__text class to create a skeleton for a single block of text.
Use the skeleton__text--large modifier to match the shape of a large block of text.
Use the skeleton__text--multiline mofifier to create a skeleton for two lines of text.
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.
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.
Skeleton Variables EXPERIMENTAL
The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes.
- --skeleton-background
@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.
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.
Stacked Snackbar
The content and action can be stacked vertically by using the snackbar-dialog__window--column modifier.
@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.
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).
@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.
Star Rating Select with Invisible ARIA Semantic Grouping
This instance of star rating select uses an invisible ARIA radio group for semantic grouping.
@ebay/skin/svg
The SVG module imports an external SVG source containing all symbol definitions.
@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.
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.
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.
Disabled Checkbox Switch
To disable a checkbox switch, apply the disabled attribute.
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
@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.
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.
@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.
Readonly Textbox
Use the readonly attribute to prevent any modification of the value.
Disabled Textbox
Use the disabled attribute to completely disable the input and any value.
Error-State Textbox
Use the aria-invalid attribute to highlight any input with error.
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.
Fluid Textbox
Apply the textbox__control--fluid modifier (or fluid utility class) to fill the width of the parent element.
Textbox with Icon
Single-line textboxes can be augmented with any SVG icon.
To display the icon at the end of the control, position the svg tag after the input, and use textbox--icon-end modifier.
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.
An icon button in the end position can also be teamed up with a static icon in the start position.
Large Textbox
Use textbox__control--large modifier to style the textbox to be large size
@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.
Toast Secondary Action
A secondary action is also supported.
@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-blue-1
- color-blue-2
- color-blue-3
- color-blue-4
- color-blue-5
- color-blue-6
- color-blue-7
- color-green-1
- color-green-2
- color-green-3
- color-green-4
- color-green-5
- color-green-6
- color-green-7
- color-red-1
- color-red-2
- color-red-3
- color-red-4
- color-red-5
- color-red-6
- color-red-7
- color-magenta-1
- color-magenta-2
- color-magenta-3
- color-magenta-4
- color-magenta-5
- color-magenta-6
- color-magenta-7
- color-teal-1
- color-teal-2
- color-teal-3
- color-teal-4
- color-teal-5
- color-teal-6
- color-teal-7
- color-neutral-1
- color-neutral-2
- color-neutral-3
- color-neutral-4
- color-neutral-5
- color-neutral-6
- color-neutral-7
- color-neutral-8
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
@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.
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
@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.
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
With footer
Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page
@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
@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. |