Skin CSS Framework

Main Navigation
CSS Components
Guides
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility
  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide
  • Archive (v19.5.2)
  • Repo
  • Storybook

CSS Components

  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility

Guides

  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide

@ebay/skin/link

DS v2

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.

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.

Navigation

  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5

Legal Link

For a link used in legal text (such as Terms & Conditions), use the legal-link .

Terms & Conditions

Fake Link

To style a button to look like a link, use the fake-link class.

  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
Copyright © 2025 eBay, Inc. All rights reserved.
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod${" "}
  <a href="https://www.ebay.com"> tempor incididunt </a>
  ${" "}ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation${" "}
  <a href="https://www.ebay.com"> ullamco laboris </a>
  ${" "}nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in${" "}
  <a href="https://www.ebay.com"> voluptate velit esse cillum </a>
  dolore eu fugiat nulla pariatur.
</p>
<button class="fake-link" type="button">Button</button>
<div>
  <a class="legal-link" href="https://www.ebay.com"> Terms & Conditions </a>
</div>
<div>
  <button class="fake-link legal-link" type="button">Privacy Policy</button>
</div>
<nav aria-labelledby="nav-link-heading" role="navigation">
  <h2 id="nav-link-heading">Navigation</h2>
  <ul>
    <li>
      <a class="nav-link" href="#link1"> Link 1 </a>
    </li>
    <li>
      <a class="nav-link" href="#link2"> Link 2 </a>
    </li>
    <li>
      <a class="nav-link" href="#link3"> Link 3 </a>
    </li>
    <li>
      <a class="nav-link" href="#link4"> Link 4 </a>
    </li>
    <li>
      <a class="nav-link" href="#link5"> Link 5 </a>
    </li>
  </ul>
</nav>