- An accordion is a series of expandable sections of content. Each section has a summary header that is used to toggle the display of its related content.
-
-
-
Default Accordion
-
By default, each section is rendered as closed. When opened, the section will stay open until explicitly closed.
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Text wraps on small screen with this long text
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Description
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 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 Accordion
-
Apply the open property to render a section in an open state.
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Description
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Description
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
Large Accordion
-
- Apply the
-
- accordion--large
-
- modifier to increase the size of each section summary.
-
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Description
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
- Description
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
Auto-Collapsing Accordion
-
Use the name attribute to ensure only one section can be open at a time, with other sections automatically closing.
-
NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.
-
-
-
-
-
-
-
- Shipping and returns
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Text wraps on small screen with this long text
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Specifications
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- Avatars 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.
-
-
-
-
- E
-
-
-
-
-
- E
-
-
-
-
- The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.
-
-
-
-
-
- A
-
-
- B
-
-
- C
-
-
- D
-
-
- E
-
-
- F
-
-
- G
-
-
- H
-
-
-
-
-
-
- A
-
-
- B
-
-
- C
-
-
- D
-
-
- E
-
-
- F
-
-
- G
-
-
- H
-
-
-
-
- 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.
- A 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.
-
Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.
-
Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.
-
-
-
-
-
-
-
-
-
-
If the last breadcrumb is not the current page, then that link must have a valid href.
-
-
-
-
-
-
-
-
-
-
-
Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!
-
-
Long Breadcrumbs with Overflows
-
-
Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs will need to get an overflow treatment in the second node with an overflow button and menu items.
-
-
If there are 4 or more nodes for breadcrumbs, an overflow on node 2 should be used instead of various additional nodes between that node and the final one. The list of items in the overflow menu should include content from node 2 until last node minus 2 nodes so that there are always 4 nodes on screen including the overflow button node. You cannot show more than 3 breadcrumbs + overflow, or 4 breadcrumbs. The minimum amount to show is 1 leading item, overflow, and the current page you are on.
-
-
Additionally, to account for smaller screens, there is a maximum width limit on each node label. Please check the CSS for details (not specified here intentionally to avoid doc/code misalignment).
A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.
-
A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.
-
Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.
-
-
Default Button
-
Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.
Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Destructive Button
-
Use the destructive modifier to create a destructive button style used for removing data.
Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.
-
-
-
-
-
-
-
-
-
-
-
-
-
Busy State for Button
-
Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.
-
-
-
-
-
-
-
-
-
-
-
-
Click the button below for an interactive example.
-
-
-
-
-
-
-
-
NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.
-
-
Flexible Button
-
-
Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.
-
-
-
-
-
-
-
-
-
-
-
-
Fixed Height Button
-
-
To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Fixed Width Button
-
-
Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.
-
-
-
-
-
-
-
-
-
-
Fixed Width and Height Button
-
-
Of course, with a constrained width and a fixed height, the text will begin to overflow.
-
-
-
-
-
-
-
-
-
-
The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.
-
-
-
-
-
-
-
-
-
-
Expandable Buttons
-
Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.
-
-
-
-
-
-
-
-
-
-
-
-
Use the borderless modifier to remove the border from the expandable button.
-
-
-
-
-
-
-
-
-
-
-
-
Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).
-
-
-
-
-
-
-
-
-
-
-
Use the btn--slim modifier, in conjunction with btn--form, if displaying an icon only.
-
-
-
-
-
-
-
-
-
-
-
-
For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.
-
-
-
-
-
-
-
-
-
-
-
-
In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript
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.
-
-
-
-
-
-
-
-
August 2023
-
-
-
Su
Mo
Tu
We
Th
Fr
Sa
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
August 2023
-
-
-
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.
-
-
-
-
-
-
-
-
August 2023
-
-
-
Su
Mo
Tu
We
Th
Fr
Sa
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
August 2023
-
-
-
Su
Mo
Tu
We
Th
Fr
Sa
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Calendar With Header Pagination
-
The calendar module allows an optional header section for pagination between months.
Carousels 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.
-
-
-
-
-
-
-
-
-
Card 1
-
Card 2
-
Card 3
-
Card 4
-
Card 5
-
Card 6
-
Card 7
-
Card 8
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Card 1
-
Card 2
-
Card 3
-
Card 4
-
Card 5
-
Card 6
-
Card 7
-
Card 8
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
- Top Products - Slide 1 of 2
-
-
-
-
-
Card 1
-
Card 2
-
Card 3
-
Card 4
-
Card 5
-
Card 6
-
Card 7
-
Card 8
-
-
-
-
-
-
-
-
-
-
-
- Top Products - Slide 1 of 2
-
-
-
-
-
Card 1
-
Card 2
-
Card 3
-
Card 4
-
Card 5
-
Card 6
-
Card 7
-
Card 8
-
-
-
-
-
-
-
-
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.
- A CCD (Common Charger Directive) is a pictogram to display if a charger is included with a product or not. It also displays the Wattage of the charger in an easy way to allow users to know if this charger is compatible with their plugs.
-
-
- CCD consists of two icons. The first represents if the charger is included or not. The second is the label that details the actual rating and fast charging specifications
-
-
In the rating, the range is always shown as Watts (W).
-
-
Charger included with USB PD
-
- When charger is included, use the
-
- ccd-charger-included
-
- icon.
-
-
-
-
-
-
-
-
-
-
1001 - 2000
-
W
-
USB PD
-
-
-
-
-
-
-
-
-
-
-
-
-
1001 - 2000
-
W
-
USB PD
-
-
-
-
-
-
Charger not included
-
- When charger is not included, use the
-
- ccd-charger-not-included
-
- icon.
-
-
-
-
-
-
-
-
-
1001 - 2000
-
W
-
USB PD
-
-
-
-
-
-
-
-
-
-
-
-
-
1001 - 2000
-
W
-
USB PD
-
-
-
-
-
-
Charger included without USB PD
-
- The USB PD text is shown if the charger has USB PD. If the charger does not have USB PD, the text should not be shown.
-
- A 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.
-
An interactive chip has a delete button inside for chip removal.
-
-
-
-
-
- Football
-
-
-
-
-
-
-
-
- Football
-
-
-
-
-
- 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.
-
- Chips 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
Fluid Chips Combobox
-
- Adding the modifier,
-
- .chips-combobox--fluid
-
- makes the component fluid and expands it to the width of its container.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
-
-
-
-
-
- Football
-
-
-
-
-
- Basketball
-
-
-
-
-
- Baseball
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
-
-
-
-
-
- Football
-
-
-
-
-
- Basketball
-
-
-
-
-
- Baseball
-
-
-
-
-
-
-
-
-
-
-
-
- Soccer
-
-
- Hockey
-
-
- Tennis
-
-
-
-
-
-
-
-
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
-
- .
-
- A 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.
-
- 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
-
-
-
-
-
-
-
August 2023
-
-
-
Su
-
Mo
-
Tu
-
We
-
Th
-
Fr
-
Sa
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
September 2023
-
-
-
Su
-
Mo
-
Tu
-
We
-
Th
-
Fr
-
Sa
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled Date Textbox
-
-
- The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the${" "}
-
- disabled
-
- attribute on the
-
- input
-
- as well as
-
- button
-
- .
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Date Range Textbox
-
-
- Selecting a date range requires two textboxes; one for the start date and one for the end date.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Details
-
-
-
-
-
Sample content
-
-
-
-
Opened Details
-
- Apply the
-
- open
-
- attribute to change the state.
-
-
-
-
-
-
-
- Details
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Details
-
-
-
-
-
Sample content
-
-
-
-
Centered Details
-
- Apply the
-
- details__summary--center
-
- class to center the summary.
-
-
-
-
-
-
-
- Details
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Details
-
-
-
-
-
Sample content
-
-
-
-
Small Details
-
- Apply the
-
- details__summary--small
-
- class to use the smaller version of summary.
-
-
-
-
-
-
- Details
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
- Details
-
-
-
-
-
Sample content
-
-
-
-
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.
-
- The donut chart is a data visualization module designed to display comparative data in an easily digestible and
- visually appealing format. Our donut chart is composed of four sections: the title, metric, graph, and
- legend, each serving a distinct purpose to enhance the user's understanding of the data presented.
-
-
-
- In practice, the .donut-chart__graph is where we will load in the third-party donut chart.
-
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.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
The Vault
-
-
-
-
You can now use the Vault to store items like this securely.
- EEK is an icon that is used for energy ratings. It is a rating system that is used to show how energy efficient a product is.
- EEKs have two parts, a range, and a rating.
- The following ranges are available:
-
-
-
-
-
EEK MIN
-
EEK MAX
-
ICON
-
-
-
-
- $ {
- const range = icon.split('-');
- const min = range[1];
- const max = range[0];
- };
-
-
-
${min}
-
${max}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${iconName}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
EEK RATING NAME
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${iconName}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
EEK examples
-
-
-
-
-
- A+++
-
- D
-
-
- A+++
-
-
-
-
-
-
-
- A++
-
- E
-
-
- B
-
-
-
-
-
-
-
- A+
-
- E
-
-
- G
-
-
-
-
-
-
-
-
-
-
- A+++
-
- D
-
-
- A+++
-
-
-
-
-
-
-
- A++
-
- E
-
-
- B
-
-
-
-
-
-
-
- A+
-
- E
-
-
- G
-
-
-
-
-
-
-
-
Large EEK
-
In order to match other items on the screen, you can use eek--large class to increase the size
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.
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.
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.
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
To change the type of decription you would use field__description--confirmation, field__description--information, or field__description--attention.
A description can be placed underneath a stacked field simply by using a block-level tag, such as div.
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
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.
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
-
Text Below Floating label
-
When you use a floating label, you can have the description text below
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
-
- There was an error
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
-
- There was an error
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
- There was an error
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
- There was an error
-
-
-
-
-
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 description or error
-
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
-
-
- 0 of 140
- charaters
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0 of 140
- charaters
-
-
-
-
-
-
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 or error
-
- 0 of 140
- charaters
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
- 0 of 140
- charaters
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
- 0 of 140
- charaters
-
-
-
-
-
-
-
-
-
-
-
-
- Field description or error
-
- 0 of 140
- charaters
-
-
- The file-input lets the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using${" "}
-
- form submission
-
- , or manipulated using JavaScript code and
-
- the File API
-
- .
-
-
- The entire element can function as a dropzone for drag and drop, however this functionality requires JavaScript and is outside the scope of a CSS library such as eBay Skin.
-
-
-
Base
-
-
-
-
-
-
-
-
-
-
- Drag and drop files
-
-
- Up to 10MB per file in JPG, JPEG, PNG, MP4.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Drag and drop files
-
-
- Up to 10MB per file in JPG, JPEG, PNG, MP4.
-
-
-
- The file-preview-card-group is a group of single or multiple file preview cards.
-
-
-
- This component is an atomic piece
-
- file-preview-card
-
- ${" "}which is the recommended piece to use. Using other components may result in unexpected results.
-
-
-
Base
-
-
-
-
-
-
-
-
-
-
- CSV
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Responsive Out of the Box
-
-
- Similar to Toggle Button Group, this component is responsive out of the box. The cards will responsively shrink and stretch the specific type of cards inside and attempt to fit the cards nicely within the container at any and all screen sizes.
-
-
-
- We use
-
- display: grid
-
- ${" "}to create a predefined allotted number of card slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows cards to shrink/stretch the predefined number of cards at each breakpoint with a fallback to media queries for unsupported browsers.
-
-
-
- The responsive rules around how many toggle cards appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive layout at various screen sizes.
-
-
-
- In the demo below, drag the range to see the responsive rules in action.
-
- The file-preview-card can be used to display file previews. A css grid layout is used to define the areas in which certain elements can be placed.
-
-
-
Uploading File Preview Card
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Image File Preview Card
-
-
For image file types, the image is showcased in the body of the card.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Video File Preview Card
-
-
For video file types, a preview is shown within the body of the card.
-
-
-
-
-
-
-
-
-
-
- MP4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- MP4
-
-
-
-
-
-
Document File Preview Card
-
-
- For document file types, such as documents, the card does not display a preview within its body.
-
-
-
-
-
-
-
-
-
-
- CSV
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSV
-
-
-
-
-
-
-
See More File Preview Card
-
-
- If the number of visual files exceeds the maximum display limit, a "See More" action button will appear at the center of the preview card, allowing you to view the additional files.
-
- Use the
-
- filter-button
-
- or
-
- filter-link
-
- ${" "}classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a${" "}
-
- filter-group
-
- container.
-
-
-
Unselected Filter Button
-
By default, a filter button is in a non-selected state.
- A filter menu forms the basis of the
-
- filter-menu-button
-
- ${" "}module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).
-
-
-
- Multi-Select Filter Menu
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Single-Select Filter Menu
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Filter Menu with Disabled Options
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
- Filter Menu as Form
-
-
- A form version is also available. It uses the
-
- checkbox
-
- and
-
- radio
-
- ${" "}modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Filter Menu with Footer
-
-
-
- For multiple selection variation, you can also add an "Apply" button as a footer(to "apply" the selection(s)).
-
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
-
- Filter Menu with Header and Footer
-
-
-
- For multiple selection variation, you can also add a header to search the options.
-
The 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.
Floating 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Option 1
-
-
- Option 2
-
-
- Option 3
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
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.
To remove the background colour and hover states, apply the icon-btn--transparent modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).
The 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.
-
-
-
-
-
-
Icon Classes
-
Each icon can have a class that corresponds to its width. For example, icon--24
- corresponds to the 24px width icon. These correspond with the size associated with each icon.
-
For colored icons use icon--24-colored
- These will set the height, and the width will align with the aspect ratio
-
-
Icons have a name postfix that corresponds to the width of the icon. For example, "icon-information-24" corresponds to the information icon of the 24px width. Heights may differ depending on the icon.
-
-
-
Disabled Icons
-
Most icons can be given a disabled appearance by adding the icon--disabled
- modifier.
-
-
Simple Icons
-
Icons that are simple and have only a stroke/fill of a single color simply inherit color and are disabled by inheriting that color as the stroke/fill.
-
-
-
-
-
-
-
-
-
-
-
-
Filled Icons
-
There are certain filled icons that show up black by default. In order to color these icons, apply the icon--{name}-filled modifier.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Complex Icons
-
Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.
These deprecated icons have either been removed or renamed. We keep deprecated icon files around to allow some time for transitioning to new icons. Deprecated icon files and mentions in docs, however, get removed with the following major Skin versions.
-
-
-
-
-
-
-
Do NOT Use These!
-
The following icons have been deprecated. They will be deleted in the next major Skin version. To transition usage to the new icons, please refer to the icons above and/or refer to the icon transition spreadsheet.
An 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.
-
-
-
-
-
-
-
-
-
-
-
Infotip
-
Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Infotip
-
Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
-
-
-
Infotip
-
Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Infotip
-
Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
- Infotip
- Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
- Inside paragraph
-
-
-
-
-
-
-
- Infotip
- Here's a tip to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Info
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- In comparison to past versions, Skin now offers a very minimal public
-
- LESS
-
- ${" "}API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system.
-
-
- Also, our Less module is
- not
- intended as a
- general-purpose
- library of utility mixins and variables such as
-
- LessHat
-
- .
-
-
-
- NOTE
- : Lasso requires the additional
-
- lasso-less
-
- plugin dependency in your app package.json.
-
A 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
To have a wider lightbox add lightbox-dialog--wide to the dialog
-
On small screens, a wide lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog
-
-
-
-
-
-
-
-
-
Lightbox Dialog
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
To have a large lightbox add lightbox-dialog--large to the dialog
-
On small screens, a large lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog
-
-
-
-
-
-
-
-
Lightbox Dialog
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- The 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.
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled Fake Link
-
-
- To disable a button styled to look like a link, use the disabled attribute.
-
- A list component is used to display certain types of data in a structured format. It can be used to display a list of items, a list of links, or a list of buttons.
-
-
- This can be placed inside a container and will resize to fit the contents. The list expands to a maxumum of 480px.
-
-
-
- Default List
-
-
-
-
-
-
-
-
-
-
-
- Text 1
-
-
-
-
-
-
-
-
-
- Text 2
-
-
-
-
-
-
-
-
-
- Text 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Text 1
-
-
-
-
-
-
-
-
-
- Text 2
-
-
-
-
-
-
-
-
-
- Text 3
-
-
-
-
-
-
-
-
- Actionable list
-
-
- List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link.
-
- A listbox button is intended for use as a custom implementation of the native HTML select element's${" "}
- single
- -select use case.
-
-
- Because a button element does not store form data, its value will not be submitted along with other form data without the assistance of JavaScript.
-
-
-
- Unselected Listbox Button
-
-
By default, the listbox button is in an unselected state.
-
-
-
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Yellow
-
-
-
-
-
- Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- To give the illusion of a floated label use the
-
- btn--floating-label
-
- and
-
- btn__floating-label
-
- classes.
-
-
- NOTE
- : a
-
- btn__floating-label--inline
-
- ${" "}class must also be toggled with JavaScript. It should be present when there is no selection, and vice versa.
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Yellow
-
-
-
-
-
- Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- Selected Listbox Button
-
-
- A selection can be made by applying the
-
- aria-selected
-
- ${" "}state to a single option; JavaScript is required to update all ARIA and button text state.
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Yellow
-
-
-
-
-
- Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- The following example shows the "floated label" version with a value selected.
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Yellow
-
-
-
-
-
- Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- Listbox Button with option description
-
-
- You can also add a description to each option by using
-
- .listbox-button__description
-
-
-
- In order to make the description accessible, you need to add a clipped punctuation marker. This ensures screen readers will read the subtitle as a separate sentence.
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- .
-
- This is a red color
-
-
-
-
-
- Blue
-
-
-
- .
-
- This is a blue color
-
-
-
-
-
- Yellow
-
-
-
- .
-
- This is a yellow color
-
-
-
-
-
- Green
-
-
-
- .
-
- This is a green color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- Borderless
-
-
- Apply the
-
- btn--borderless
-
- modifier to create a borderless listbox button.
-
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 1
-
-
-
- 2
-
-
-
- 3
-
-
-
-
-
-
-
-
- Error State
-
-
- Apply the
-
- listbox-button--error
-
- modifier to create a listbox button in an error state.
-
-
- This is a simple example with a simple error indication. For usage of the error state with an error message, please see the${" "}
-
- field module
-
- .
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Yellow
-
-
-
-
-
- Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Red
-
-
-
- Blue
-
-
-
- Yellow
-
-
-
- Green
-
-
-
-
-
-
-
-
- Form Variant
-
-
- Apply the
-
- listbox-button--form
-
- ${" "}modifier to create a listbox button inside a form matching other form controls.
-
-
- Additionally, to allow the component to send the value from a selected option in a form submission, there needs to be custom${" "}
-
- js
-
- to populate the
-
- select.listbox__native
-
- ${" "}with the value upon selection. If using Skin outside of eBay UI, you will need to account for that independantly.
-
-
-
- NOTE: This component is a bit in transiton and will likely undergo some changes to integrate and simplify the variant implementation. Currently,${" "}
-
- .listbox-button--form
-
- ${" "}is used as a bit of a patch to create the form variant of the control. It adds some of the styles needed to do form variant styling while other styles are applied separately by${" "}
-
- .btn--form
-
- . In the future, these styles will be consolidated into
-
- .btn--form
-
- and will be
-
- .listbox-button--form
-
- will be phased out.
-
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.
- A menu button follows the principal of
-
- progressive disclosure
-
- , it keeps secondary commands hidden from view until needed.
-
-
- A menu is
- not
- ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "}
-
- checkbox
-
- ,
-
- combobox
-
- ,
-
- select
-
- , or
-
- radio
-
- instead.
-
-
- Selecting a menu item command should update the page
- without
- ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "}
-
- fake menu button
-
- .
-
-
-
- Default Menu Button
-
-
- The default menu button opens a
- stateless
- menu. Each item has a role of
-
- menuitem
-
- .
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
- Menu Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
- Menu Item 4
-
-
-
-
-
-
-
- For all menu buttons, the overlay becomes automatically scrollable when its height reaches 400px.
-
-
-
-
-
-
-
-
-
-
-
- Menu item ${i}
-
-
-
-
-
-
-
-
-
- Single-Select Menu Button
-
-
- For single-select state, use role
-
- menuitemradio
-
- on each menu item.
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
-
- Menu Item 2
-
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
-
- Menu Item 2
-
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
- Multi-Select Menu Button
-
-
- For multi-select state, use role
-
- menuitemcheckbox
-
- on each menu item.
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
-
- Menu Item 2
-
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
-
- Menu Item 2
-
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
-
- Labelling a Menu Button
-
-
- By default, the text of any button acts as its accessible label. The accessible label must at${" "}
- all times
- reflect the
- purpose
- of the button. If the text only conveys a
- transient value
- , then the criteria would not be satisfied.
-
-
-
- Fixed Label
-
-
- The simplest scenario in which to satisfy the criteria is a fixed label, i.e. the button text never changes. For example: "Menu", "Options", "Edit".
-
-
-
- Compact Label
-
-
- If a fixed label is not possible, the button's inner text can potentially be written as a key/value pair, where key denotes purpose and value repesents the current selection. This is most typical in a${" "}
-
- single select menu button
-
- . For example: "Sort: Price", "Color: Red". This technique is identical to the method used by${" "}
-
- Listbox Button
-
- .
-
-
-
- Compound Label
-
-
- Finally, we can also consider using
-
- aria-labelledby
-
- ${" "}to stitch together an additional, external element - therefore creating a${" "}
- compound
- label.
-
-
-
-
- Grouped Menu Button
-
-
- Menu button items can be separated into groups, using the
-
- hr
-
- tag.
-
-
-
-
-
-
-
-
-
- Menu Item A1
-
-
-
-
-
- Menu Item B1
-
-
-
- Menu Item B2
-
-
-
- Menu Item B3
-
-
-
-
-
-
- Menu Item C1
-
-
-
- Menu Item C2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item A1
-
-
-
-
-
- Menu Item B1
-
-
-
- Menu Item B2
-
-
-
- Menu Item B3
-
-
-
-
-
-
- Menu Item C1
-
-
-
- Menu Item C2
-
-
-
-
-
-
-
-
- Fake Menu Button
-
-
- At first glance, a fake menu button
- appears
- ${" "}to be a normal menu button component, but it contains a list of hyperlinks and thus behaves more like a navigational component.
-
-
- Use the
-
- aria-current
-
- ${" "}attribute to denote the link that matches the current page URL (if applicable).
-
-
- A valid
-
- href
-
- attribute is
- required
- for all anchor tags (a value of "javascript" is
- not
- valid!) The
-
- button
-
- ${" "}tag is also supported (as demonstrated in the following example) if JavaScript behaviour is required alongside items with navigation behaviour.
-
- Use the
-
- menu-button__menu--fix-width
-
- or
-
- fake-menu-button__menu--fix-width
-
- ${" "}element modifier to fix the width of any menu items to the button width. This is useful in cases where the menu overlay needs to be constrained to the button width, usually to accomodate spacing and layout.
-
-
- NOTE:
- Fixed width is currently only available on menu buttons that use a
-
- span
-
- root tag.
-
-
-
-
-
-
-
-
-
- Menu Item 1 with a long string
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item 1 with a long string
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
-
-
-
-
-
- Form-Themed Menu Button
-
-
- If placing a menu-button alongside a form control (e.g. textbox), you may wish to apply the${" "}
-
- btn--form
-
- modifier, which better matches the look-and-feel of forms.
-
-
- NOTE
- : a menu-button is a good candidate for a dropdown of actions that make
- changes
- to a form, but it should
- not
- be used as a dropdown for selecting and storing form
- data
- . Please use
-
- select
-
- or
-
- listbox-button
-
- for that purpose instead.
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
-
-
-
-
-
-
-
-
-
-
-
- Menu Item 1
-
-
- Menu Item 2
-
-
- Menu Item 3
-
-
-
-
-
-
-
- Borderless Menu Button
-
-
- Use the
-
- btn--borderless
-
- modifier to create a minimal borderless button.
-
- A menu is
- not
- ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "}
-
- checkbox
-
- ,
-
- combobox
-
- ,
-
- select
-
- , or
-
- radio
-
- instead.
-
-
- Selecting a menu item command should update the page
- without
- ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "}
-
- fake menu
-
- .
-
-
- NOTE:
- Only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit our${" "}
-
- menu pattern
-
- .
-
-
-
- Default Menu
-
-
- The default menu is a
- stateless
- menu. Each item has a role of
-
- menuitem
-
- .
-
-
-
-
-
-
-
- Item 1
-
-
- Item 2
-
-
- Item 3
-
-
- Item 4
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
- Item 2
-
-
- Item 3
-
-
- Item 4
-
-
-
-
-
-
- Badged Menu
-
-
- A menu item can be badged using the
-
- badge
-
- module.
-
-
- The menuitem element requires an additional
-
- menu__item--badged
-
- modifier.
-
-
-
-
-
-
-
-
- Item 1
-
- 3
-
-
-
-
-
- Item 2
-
- 77
-
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
- Item 13
-
-
- Item 277
-
-
- Item 3
-
-
-
-
-
-
- Single-Select Menu
-
-
- For single-select state, use role
-
- menuitemradio
-
- on each menu item.
-
-
-
-
-
-
-
- Item 1
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
-
-
-
-
- Multi-Select Menu
-
-
- For multi-select state, use role
-
- menuitemcheckbox
-
- on each menu item.
-
-
-
-
-
-
-
- Item 1
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
-
-
-
-
- Grouped Menu
-
-
- Menu items can be separated into groups, using the
-
- hr
-
- tag.
-
-
-
-
-
-
-
- Item A1
-
-
-
- Item B1
-
-
-
- Item B2
-
-
-
- Item B3
-
-
-
-
- Item C1
-
-
-
- Item C2
-
-
-
-
-
-
-
-
-
-
-
- Item 1
-
-
-
-
-
- Item B1
-
-
-
- Item B2
-
-
-
- Item B3
-
-
-
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
-
-
-
-
- Fake Menu
-
-
- A fake menu is simply a list of links, styled to look like ARIA menu items.
-
- 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:
-
-
-
-
-
-
-
-
-
-
Featured Post 1
-
- This is a wider card with supporting text below as a natural lead-in to additional content.
-
-
-
- Thumbnail
-
-
-
-
-
-
-
- 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.
-
- Pagination 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.
-
- Panel 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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 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.
-
-
-
-
-
-
-
-
-
- Heading
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 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.
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
- (+290)
-
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
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
-
- .
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
Large Phone input
-
- Use the
-
- phone-input--large
-
- modifier to increase the size of the phone input. Also, use
-
- btn--large, btn--large-fixed-height
-
- and
-
- textbox--large
-
- for the button and textbox respectively.
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
-
-
-
- United Kingdom
- (+44)
-
-
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
-
- +1
-
-
-
-
-
-
- There was an error
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
- ...
-
-
-
-
- United States of America
- (+1)
-
-
-
-
-
-
-
- +1
-
-
-
-
-
- There was an error
-
-
-
-
-
Fluid Phone input
-
- Using the
-
- phone-input--fluid
-
- ${" "}modifier makes the component fluid and expands it to the width of its container.
-
-
-
-
-
-
-
-
-
-
-
- Albania
- (+355)
-
-
-
-
-
-
- India
- (+91)
-
-
-
-
-
-
-
- Saint Helena, Ascension and Tristan da Cunha
-
- (+290)
-
-
-
- The 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.
-
-
-
-
-
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
Steppers 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
-
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
-
-
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.
-
- A 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.
-
- A 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.
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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.
Section 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
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
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.
-
- Segmented Buttons are non-form toggle buttons used in certain cases. For detailed requirements and when to use these over tabs, please visit the${" "}
-
- eBay MIND Pattern for Segmented Buttons
-
- .
-
-
- The selected toggle button is toggled by
-
- aria-current="true"
-
- attribute.
-
-
- NOTE:
- ${" "}JavaScript is required to handle segmented buttons currently selected button.
-
-
-
-
- Default Segmented Buttons
-
-
- The default segmented button has a 40px height that matches other buttons.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Segmented Buttons - large
-
-
- Use the
-
- segmented-buttons--large
-
- ${" "}modifier to create large segemented buttons. These have a 48px height to match large buttons.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Segmented buttons - with icons
-
-
- Any 24x24
-
- icon
-
- can be added inside of a
-
- segmented-buttons__button-cell
-
- block.
-
- A 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.
-
- 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.
-
- 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.
-
- A 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.
-
A split button is a button broken into two seperately actionable portions: a common action (a button) at the start, and supplemental actions (a menu button) at the end.
-
Split buttons are for actions only, and should not be used for site navigation.
-
-
-
-
-
-
-
-
-
-
- Item 10000
-
-
- Item 20000
-
-
- Item 30000
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 10000
-
-
- Item 20000
-
-
- Item 30000
-
-
-
-
-
-
-
Note the usage of btn--split-start to denote the start of a split button sequence, and btn--split-end to denote its end.
-
-
Secondary Split Button
-
Use the secondary modifiers to create a secondary split button style.
-
-
-
-
-
-
-
-
-
-
- Item 10000
-
-
- Item 20000
-
-
- Item 30000
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item 10000
-
-
- Item 20000
-
-
- Item 30000
-
-
-
-
-
-
-
-
Tertiary Split Button
-
Use the tertiary modifiers to create a tertiary split button style.
Star 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.
- This 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.
-
-
-
-
- ${rating}
-
-
-
-
-
-
- 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).
-
- A 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:
-
- A table represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
-
-
-
- To allow scrolling of the table via a keyboard interface, the root element must be added to the page's tab sequence. This in turn requires the root element to have an accessible role and label.
-
-
-
Basic Default Table
-
- A basic table is a static table with no additional features.
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- A compact density table is a table with reduced spacing to allow for more rows to be displayed in a smaller space. You can make tables more compact by adding the table--density-compact modifier class to module.
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- A relaxed density table is a table with increased spacing to allow for larger rows. You can make tables relaxed density by adding the table--density-relaxed modifier class to module.
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- A table with a frozen header allows the header row to persist in a sticky manner while scrolling vertically through the table. You can make headers frozen by adding the table--frozen-header modifier class to module.
-
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Count
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- You may constrain the height of the table, which will constrain the table to a percentage of the viewport height as opposed to allowing the full table contents to be fully visible. This is typically used in a table with a frozen header. To do so, add a table--constrained-height modifier class to module.
-
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- You may freeze any one of the first three column so it is always present when scrolling by adding table--freeze-column-x modifier class to module, where x is the column you'd like to freeze.
-
-
-
-
-
-
-
-
-
Seller
-
Item
-
Status
-
List Price
-
Quantity Available
-
Orders
-
Watchers
-
Protection
-
Shipping
-
Delivery
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <thead> > <th>. Additionally, for accessibility purposes, aria-sort="ascending" or aria-sort="descending" should be added respectively to the <th> to reflect the current sort order.
-
-
- If using buttons to sort the table, the aria-pressed="true" attribute should be added to the button to indicate the current sort order. The aria-pressed attribute should be toggled between true and false when the button is clicked.
-
-
- If using anchors to sort the table with a page refresh, you would forgo the pressed state and just do <a href="my-url">Seller...</a>. Additionally, you'd need to change the aria-sort attribute to match the sort order after the page refresh.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- When a table is fetching data for sorting, filtering, or pagination, a loading state should be displayed to indicate that the table is in the process of loading. This can be achieved by adding the table--loading-state class to the .table element.
-
-
-
- Additionally, in the loading state, the module should be inaccessible to the user. This can be achieved by setting tabindex="-1" to the module container, and adding the inert attribute to the table inside the module. Since inert is not fully supported in older browsers, it is recommended to either use a polyfill or use JavaScript to disable all interactive elements inside the table when in loading state. Elements that support disabled should be disabled. Anchors should have their href attributes removed.
-
-
-
- Here are some other steps to manually ensure the module is inaccessible:
-
-
All interactive elements inside table should be forced to NOT be focusable.
-
The module container should be forced to be unscrollable.
-
The progress bar should be forced to gain focus.
-
All interactive elements inside the table should be disabled.
-
-
-
-
- The loading state should be displayed until the data is fully loaded. In addition to the loading state being set on the table, a progress bar expressive should be added to relay the loading state both visually and for screen readers. 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Nintendo
-
-
-
-
-
-
-
- Nintendo Switch Brand New Gaming System with Four Controllers
-
- A table can be put into 'selection mode' by adding the class table--mode-selection to the component parent. This will make slight spacing accommodations for the layout.
-
-
-
- A table in selection mode allows users to select rows within a table. This is useful when users need to perform actions on selected rows.
-
-
-
- The first column of the table will contain a checkbox that allows users to select the row. The first row of the table will contain a checkbox that allows users to select all rows. The checkbox in the table header should have an aria-label of something like, "Select all rows" while all other checkboxes should have an aria-label of something like, "Select row".
-
-
-
- Each row should have one column that is its unique idenitifier. That column should typically be the first static column in the row. That column should be indicated using <th scope="row"> element, which affords various accessibility benefits.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Nintendo
-
Switch
-
-
$287.96
-
300
-
207
-
95
-
$17.99
-
FREE
-
4/1 - 4/5
-
-
-
-
-
-
-
-
-
-
-
-
Nintendo
-
SNES
-
-
$89.85
-
45
-
17
-
5
-
$18.95
-
FREE
-
4/11 - 4/15
-
-
-
-
-
-
-
-
-
-
-
-
Microsoft
-
XBOX 360
-
-
$499.99
-
345
-
455
-
205
-
$17.99
-
FREE
-
4/17 - 4/25
-
-
-
-
-
-
-
-
-
-
-
-
Microsoft
-
XBOX One
-
-
$499.99
-
399
-
407
-
305
-
$27.99
-
FREE
-
4/9 - 4/11
-
-
-
-
-
-
-
-
-
-
-
-
Sony
-
Playstation 5
-
-
$519.99
-
205
-
265
-
199
-
$29.99
-
FREE
-
4/11 - 4/15
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Nintendo
-
Switch
-
-
$287.96
-
300
-
207
-
95
-
$17.99
-
FREE
-
4/1 - 4/5
-
-
-
-
-
-
-
-
-
-
-
Table with Actions
-
-
- A table can have actions inside for performing various tasks for each row.
-
- Tabs 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
-
- .
-
-
-
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
-
-
-
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?
-
-
-
-
-
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?
-
-
-
-
-
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?
-
-
-
-
-
-
-
- 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.
-
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?
- A 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--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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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--large
-
- modifier to style the textbox to be large size
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Textbox Prefix
-
-
- Add a
-
- span
-
- containing text before the input to show it as a prefix text.
-
-
-
-
-
- $
-
-
-
-
-
-
-
- $
-
-
-
-
-
- Textbox Postfix
-
-
- Add a
-
- span
-
- containing text after the input to show it as a postfix text.
-
-
-
-
-
-
- in.
-
-
-
-
-
-
-
- in.
-
-
-
-
- Mixed icons and static text
-
-
Postfix/prefix icons can be mixed with static text in the textbox.
- A 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.
- The Toggle Button Group is a group of single or multi-select toggle buttons providing a visual emphasis on the available selectable choices.
-
-
-
-
-
-
-
-
- Intended Use of Toggle Button Group
-
-
- Toggle Buttons inside Toggle Button Group are intended to be input controls. They are ment to be used for users to make selection(s) that can be used for additional actions. For example, they can be used to storing the selection(s) and using${" "}
-
- JavaScript
-
- to include the information in a form submission.
-
-
-
- Toggle Buttons are NOT to be used for the purposes of navigation.
-
-
-
-
-
- The component allows for single or multiple selections based on need. However, when using Skin by itself you will need to have your own${" "}
-
- JavaScript
-
- ${" "}to establish those rules based on the specific needs for each implementation context.
-
-
-
- Effort was taken in these docs to provide a good amount of helpful information. Since this component has an atomic piece (
-
- Toggle Button
-
- ), there may be some information crossover. Though efforts were taken to isolate the documentation for this parent component, at various touchpoints between the two components, there may be some redundancy. In other portions, where immediate information appears to be missing here, that information may reside in its child component. Please refer to${" "}
-
- Toggle Button
-
- docs in these situations.
-
-
-
Accessibility
-
-
- The preferred implementation for accessibility includes an on-screen heading and the list associated with the heading (a). The second option is an off-screen heading with the same association (b). The third is to use the label directly on the list element (c).
-
-
-
On-screen Heading with Associated List (a - preferred)
-
-
-
- Select Shoe Size
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Shoe Size
-
-
-
-
-
-
-
-
-
-
-
-
-
Off-screen Heading with Associated List (b)
-
- This implementation is identical to option (a), except the heading is off-screen using the${" "}
-
- clipped
-
- class.
-
-
-
-
- Select Shoe Size
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Shoe Size
-
-
-
-
-
-
-
-
-
-
-
-
-
Interaction Variations of Toggle Button Groups
-
-
- There are three different types of toggle button groups that may be utilized based on interaction need.
-
-
-
-
- Multi-select: this is a freeform implementations in which the user can toggle and untoggle any button.
-
-
- Single-select Optional: only one button can be toggled on at any given time and the user CAN untoggle that one button.
-
-
- Single-select Required: only one button can be toggled on at any given time and the user CANNOT untoggle that one button.
-
-
-
-
- If you're using Skin outside of a
-
- JavaScript
-
- framework, you will need to write your own
-
- js
-
- code to accomplish these interactivity cases.
-
-
-
- It's generally good practice to use delegated event handlers that allow you to set up a a single event handler for the group of buttons instead of on every button.
-
- ${" "}The following examples use an HTML attribute to disitnguish the interaction variations. Using${" "}
-
- data-selection-type
-
- . For the associated
-
- js
-
- please see
-
- /docs/src/js/main.js
-
- ${" "}(TOGGLE-BUTTON-GROUP section) for an example on how the implementation may be accomplished.${" "}
-
-
Multi-select
-
- The Multi-select variation is the default so nothing additional needs to be specified in the markup.
-
-
-
-
-
- Select Multiple Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Multiple Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Single-select Optional
-
- In this example of the Single-select Optional variation,
-
- data-selection-type="single-optional"
-
- ${" "}is used to split off the variation interactivity. This option allows for only one selection, so toggling additional buttons will simply switch the toggled button and retain only one toggled button.
-
-
-
-
- Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Single-select Required
-
- In this example of the Single-select Optional variation,
-
- data-selection-type="single-required"
-
- ${" "}is used to split off the variation interactivity. This option allows for only one selection. However, unlike the single-select optional variation, this variation enforces the required single selection so the toggled button cannot be untoggled.
-
-
-
-
-
- Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select a size
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Responsive Out of the Box
-
-
- Toggle Button Group is responsive out of the box. The buttons will responsively shrink and stretch the specific type of buttons inside and attempt to fit the buttons nicely within the container at any and all screen sizes.
-
-
-
- We use
-
- display: grid
-
- ${" "}to create a predefined allotted number of button slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows buttons to shrink/stretch the predefined number of buttons at each breakpoint with a fallback to media queries for unsupported browsers.
-
-
-
- The responsive rules around how many toggle buttons appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive toggle button layout at various screen sizes.
-
-
-
- In the demo below, drag the range to see the responsive rules in action and how the fluid Toggle Buttons work.
-
-
-
-
-
-
-
-
-
-
-
-
- Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Exception Cases for Preferred Number of Toggle Buttons Per Line
-
-
- The buttons inside the Toggle Button Group are automatically responsive and have predefined rules around how many Toggle Buttons will display on a line before wrapping to the next line. However, on some rare occasions, developers may need to revise those rules based on how a Toggle Button Group works in their specific use case. For example, when the number of buttons is deterministic and known. In those instances, using various attributes mapped to each breakpoint will allow the rules to be honored by the component. At those specific breakpoints, the number of buttons specificed will be displayed.
-
-
-
- Here's a specific example. Suppose we know we're going to have 6 buttons total and we'd like to have perfect visual balance in the UI. We may add the following html attributes/modifiers to${" "}
-
- .toggle-button-group
-
- to achieve that:
-
-
-
-
-
- data-columns-xs="2"
-
- ${" "}to force 2 toggle buttons on the same line so we'd have 3 balanced lines of buttons at the${" "}
-
- XS
-
- breakpoint or at
-
- 320px
-
- + width.
-
-
-
- data-columns-sm="3"
-
- ${" "}to force 3 toggle buttons on the same line so we'd have 2 balanced lines of buttons at the${" "}
-
- SM
-
- breakpoint or at
-
- 512px
-
- + width.
-
-
-
- data-columns-md="6"
-
- to force all 6 toggle buttons on the same line at the
-
- MD
-
- breakpoint or at
-
- 768px
-
- + width.
-
-
-
- data-columns-xl="8"
-
- to force all 8 toggle buttons on the same line at the
-
- XL
-
- breakpoint or at
-
- 1280px
-
- + width.
-
-
-
-
- Here's that use case in action. Drag the range to see the effects of the attribute settings at various container widths.
-
-
-
-
-
-
-
-
-
-
-
-
- Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Layouts
-
-
- There are various layouts that can be used based on the specific needs at implementation. The implied theme (needs no modifier), is the minimal layout. For more information about types of layouts, refer to the${" "}
-
- Toggle Button
-
- component. The examples below will highlight various layouts.
-
-
-
- A toggle button group can have one of three different layouts: minimal (default), list or gallery.
-
-
-
-
-
-
-
-
- Layout Modifiers
-
-
- Toggle Button Group has top-level modifiers that will apply to the Toggle Buttons inside. When using Toggle Buttons inside Toggle Button Group make sure you do NOT specify each Toggle Button layout modifier. Instead, top-level layout modifiers will be sufficient to create the layout you want.
-
-
-
-
-
Minimal Layout (default)
-
-
- The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.
-
-
-
- NOTE:
- All toggle button examples utilize JavaScript to toggle the
-
- aria-pressed
-
- state of the button.
-
-
-
- In this example, the container housing the Toggle Button Group is artificially limited to${" "}
-
- 500px
-
- ${" "}to demonstrate how the buttons will wrap after the specific columns (in this case, 3). Feel free to reduce/expand the container width in dev console to see how the columns will react.
-
-
-
-
-
- Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
List Layout
-
-
- List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.
-
-
-
- You may use this layout by adding the
-
- toggle-button-group--list-layout
-
- modifier to the toggle button group.
-
-
-
List Layout Toggle Button Group with Title
-
-
-
-
- Text Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Text Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- List Layout Toggle Button Group with Subtitles (multiple buttons toggled on)
-
-
-
-
-
- Text Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Text Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
List Layout Toggle Button Group with Icons
-
-
-
-
- Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
List Layout Toggle Button Group with Images
-
-
- To add an image to a toggle button, you can use the
-
- toggle-button__image-container
-
- block using an
-
- <img>
-
- or as a
-
- css
-
- background image.
-
-
-
- Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
List Layout Toggle Button Group with CSS Images
-
-
- Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Select Payment Option
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Gallery Layout
-
-
- Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.
-
-
-
- You may use this layout by adding the
-
- toggle-button-group--gallery-layout
-
- modifier to the toggle button group.
-
-
-
Gallery Layout Toggle Button Group with Images
-
-
- The image used in these buttons will shrink/grow responsively in width and height based on the overall button width being respectful of their boundary limitations. Where those boundaries are in danger of being crossed, the layout will wrap accordingly.
-
-
-
-
-
- Selection Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selection Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Gallery Layout Toggle Button Group with CSS Images
-
-
- Besides using an
-
- <img>
-
- , you may also use CSS images that can provide more flexibility in filling more of the space reserved for images.
-
-
-
- These images will change in size responsively both horizontally and vertically based on the size of the button itself, available space allowed by the container and their minimum and maximum size limitations.
-
-
-
- The examples below have various different implementations of CSS images. The first is a CSS Profile Image button with background-size: contain that will display the image as is and fit the entire image in the container. The second is a CSS Profile Image button with${" "}
-
- background-size: cover
-
- ${" "}that will display the image to fill as much of the space of the container as possible clipping out the remaining portions of the image that fall outside. With that method, you can also provide guidance for fine-tuning the image positioning to move the focal point into the center of the container. In that example,${" "}
-
- background-position: center 15%;
-
- ${" "}is used to move the focal point (person with camera) into the center of the frame.
-
-
-
-
-
- Selection Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selection Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Gallery Layout Toggle Button Group with Icons
-
-
- Typically, one would use either all image buttons or all icon buttons in a Toggle Button Group.
-
-
- To add an icon to a toggle button, you can use the
-
- toggle-button__icon
-
- block.
-
- A toggle button is a special type of button that conveys a pressed or non-pressed state; this state is conveyed programmatically via the${" "}
-
- aria-pressed
-
- attribute. They can be used in single-select or multi-select groups.
-
-
-
- These buttons, like all buttons, should
- NOT
- contain structural elements, such as headings or lists.
-
-
-
- A toggle button can have one of three different layouts: minimal (default), list or gallery.
-
-
-
- Minimal Layout
-
-
-
- The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.
-
-
-
- NOTE:
- All toggle button examples utilize JavaScript to toggle the
-
- aria-pressed
-
- state of the button.
-
-
-
-
-
-
-
-
-
-
-
-
-
- List Layout
-
-
-
- List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.
-
-
-
- You may use this layout by adding the
-
- toggle-button--list-layout
-
- modifier to the toggle button.
-
-
-
List Toggle Button with Title
-
-
-
-
-
-
-
-
-
-
-
-
List Toggle Button with Title and Subtitle
-
-
- A subtitle can be added via
-
- toggle-button__subtitle
-
- block.
-
-
-
-
-
-
-
-
-
-
-
-
-
List Toggle Button with Title and Multi-line Subtitle
-
-
- To have a multi-line subtitle, you may use a single
-
- <p>
-
- tag that has longer text or a maximum of two separate
-
- <p>
-
- tags with shorter text inside the
-
- toggle-button__subtitle
-
- block.
-
-
-
-
-
-
-
-
-
-
-
-
-
List Toggle Button with Icon, Title, and Subtitle
-
-
- To add an icon to a toggle button, you can use the
-
- toggle-button__icon
-
- block.
-
-
-
-
-
-
-
-
-
-
-
-
-
List Toggle Button with Image, Title, and Subtitle
-
-
- To add an image to a toggle button, you can use the
-
- toggle-button__image-container
-
- block using an
-
- <img>
-
- or as a
-
- css
-
- background image.
-
-
-
Using an Image Element
-
-
-
-
-
-
-
-
-
-
-
-
Using a Contained CSS Background Image
-
-
-
-
-
-
-
-
-
-
-
-
Using a Covered CSS Background Image
-
-
-
-
-
-
-
-
-
-
-
-
- Gallery Layout
-
-
-
- Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.
-
-
-
- You may use this layout by adding the
-
- toggle-button--gallery-layout
-
- modifier to the toggle button.
-
-
-
Gallery Toggle Button with Image
-
-
- To add an image to a toggle button, you can use the
-
- toggle-button__image-container
-
- block.
-
-
-
-
-
-
-
-
-
-
-
-
-
Gallery Toggle Button Responsive Adjustments
-
-
- Toggle buttons have a mininum and maximum width and are meant to be fluid between those boundaries. If using these buttons separately, you will need to set up their combined high-level layouts on your own. In these examples, their widths are artificially/manually set to various widths to demonstrate how the buttons undergo responsive adjustments.
-
-
-
- The image used in these buttons will shrink/grow responsively in width and height based on the overall button width.
-
-
-
Resonsive Images Using Image Element
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Responsive Images Using CSS Background-Image
-
-
- These buttons use
-
- background-size: contain;
-
- for background image scaling/filling.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- These buttons use
-
- background-size: cover;
-
- ${" "}for background image filling the alloted space. The following buttons have the background image positioning using${" "}
-
- background-position-y: 20%;
-
- . Depending on your specific image, you may also need to adjust the background positioning along the x and y axis to ensure the main focal point remains visible and centered in your implementation.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Gallery Toggle Button with Icon
-
-
- To add an icon to a toggle button, you can use the
-
- toggle-button__icon
-
- block.
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled Toggle Button
-
-
- Toggle buttons may be disabled with
-
- disabled
-
- or
-
- aria-disabled="true"
-
- .
-
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.
- A 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.
-
-
-
-
-
-
-
-
-
-
-
-
Use Access Key 'S' to display settings.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Use Access Key 'S' to display settings.
-
-
-
-
-
-
-
-
- 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
-
- A 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.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
- Tourtip
-
-
- Here's something new to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
Tourtip
-
Here's something new to help you be successful at your task.
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
- Tourtip
-
-
- Here's something new to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
Tourtip
-
Here's something new to help you be successful at your task.
-
-
-
-
-
-
-
-
-
With footer
-
- Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
- Tourtip
-
-
- Here's something new to help you be successful at your task.
-
-
-
-
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
Tourtip
-
Here's something new to help you be successful at your task.
- 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.
-
- 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
-
- !).
-
-
-
-
- Utility Classes
-
-
-
-
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
-
-
-
.image-disabled
-
Image will appear disabled.
-
-
-
.scrollbars-permanent
-
Display permanent scrollbars on containers as a progressive enhancement.
-
-
-
.text-truncate
-
Truncate single-line text
-
-
-
-
-
Utility Notes
-
-
- 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.
-
-
- 
-
- 
- 
- 
- 
- 
