Examples
A basic resource item with its details filled in at the point of use.
Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.
A basic resource item with its details filled in at the point of use.
Resource items function as links to the full-page representations of the items. Each item should have a unique name
prop. For each ResourceItem
, the accessibilityLabel
prop should be used to give the link a unique aria-label
value. The aria-label
value should convey the link’s purpose, using the name
value. Merchants who use screen readers or other text to speech tools should be able to easily distinguish each link from the others.
When adding custom content to resource items, ensure that all text is available to all users and that all custom controls have a unique accessible name to help users understand what will happen when the control is activated.
Links can be activated with the enter/return key by default.
If you add custom controls to resource items, then make sure that the controls:
The resource item component must be wrapped in the resource list component.
Resource items should:
Resource items can optionally:
Resource items should: