@ebay/skin/card
DS v1Card is a navigation component that can be used to display content in a structured and visually appealing way. It can contain various elements such as images, text, buttons, and more. Cards are commonly used in dashboards, product listings, and other areas where content needs to be presented in a compact format and allow the user to navigate to related content, whether on-screen or a different URL.
Vertical Card (default)
The default card is a vertical card with a container background, a header, content, and footer.
The initial card variant is an internally-actionable card - the card itself is not clickable, but it contains an action button inside that can be clicked to perform an action.
This example includes the most essential aspects of a card - header with a hero image, body with content, and a footer with an action button. The vertical card is by default a square (1:1 aspect ratio) card. This uses an anchor link.
The card can also be used with a button.
Card with a 5:4 Aspect Ratio
You can change the aspect ratio by adding the .card--aspect-5-4 modifier class to the card container.
Card with a 16:9 Aspect Ratio
For wider cards, use the .card--aspect-16-9 modifier class.
Loaded Card with All the Options
This example demonstrates cards with all the available options, including different content elements - a header with a hero image, an overline for subtle categorization, with or without an icon, a title, a body content, and a footer with an action button.
Authentic Rookie Cards
Outlined Card
The outlined card is a style variant that uses an outline without a background. This can be implemented by using the .card--outlined modifier.
Authentic Rookie Cards
Card with Full Hero
One of the common layouts for card is to have a full-width hero image that spans the entire width of the card. To accomplish this use the .card--full-hero modifier.
Authentic Rookie Cards
Disabled Card
Cards that are disabled will appear grayed out and unclickable. The specific implementation depends on the card type.
Disabled Internally-Actionable Card
For internally-actionable cards, the button inside will need to be disabled. The outer card does not look or need to look disabled since it's not itself an interactive element. The button will visually indicate its disabled state by setting the button to disabled.
Disabled Self-Actionable Card with Link
For self-actionable cards using an a tag, set the tabindex="-1" and href="". This will in effect disable the anchor even though technically, anchors cannot get disabled.
Disabled Self-Actionable Card with Button
For self-actionable cards using a button, use the disabled attribute on the element. This will prevent any interaction with the card and indicate to users that it is not available for action.
Horizontal Card
Card also has a layout variant that can displayed it in a horizontal layout. This is useful when you want to display an image alongside the content. To achieve this, use the .card--horizontal modifier.
Authentic Rookie Cards
Self-Actionable Card
The self-actionable card is a variant that allows the entire card to be clickable, leading to a specific action or page. A Self-actionable card cannot contain interactive elements such as buttons or links within it.
This variant is useful for cards that represent a single item or entity, such as a product or article. To create a self-actionable card, use an a tag as the container for navigation, or a button tag for actions that don't navigate to a different page.
Important: Self-actionable cards should not contain structured data such as nested headings, lists, or complex markup. Screen readers will ignore all structured content when reading out button or link text, so keep the content simple and ensure the card's accessible name clearly describes its purpose.
Hybrid Actionable Card
The hybrid actionable card is a variant that allows the card to be both self-actionable and internally actionable. This is useful for cards that represent a single item or entity, but also need to provide a specific action button for accessibility or visual clarity.
Important: Hybrid cards can only contain one internal action, and this action must perform the exact same function as clicking on the card itself. No additional or different actions are allowed within a hybrid card.
Important Usage Guidelines
It's critical that this variant NOT be implemented using a button or an anchor as the component container to avoid a native navigation item inside another. Instead, use a div element and perform the navigation programmatically using JavaScript.
To build this variant, use the same markup as the internally-actionable card, adding a click event listener to the card container. This will allow the card to be self-actionable while still containing the same actionable element inside. Both the card click and the internal button must trigger the identical action.