BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Structure

Item

  • Design
  • Code
  • Props

The Item component is used to display a single item in a list. It is used to display a single item in a list.

This can be used to display a list of usually interactive content, such as a list of contacts, or a list of messages.

When to use

  • Displaying a list of items that are usually interactive

When not to use

  • Displaying a list of items that are not interactive - Simple text lists (use the List component instead)

Visuals

Supporting visuals are a series of icons, images, avatars, and thumbnails that are often located in front of every list item.

They help to draw the user’s attention quickly, make the entire list UI design scannable, and align items better.

Title

The title content, as the name suggests, is the main text content of each list item.

Content

The content is the secondary text content of each list item.

Metadata

Metadata is the additional information that is displayed in a list item. It is usually displayed in a smaller font size and is often located below the title and content.

Actions

Actions are a series of buttons that are usually located at the end of each list item. They are used to perform actions related to the list item.

States

The Item component has a few states that can be used to indicate the status of the item.

  • active - Indicates that the item is currently active (usually selected, for example in a Sidebar)
  • disabled - Indicates that the item is currently disabled TODO: Add this state
  • hover - Indicates that the item is currently being hovered over

On this page

  • Visuals
  • Title
  • Content
  • Metadata
  • Actions
  • States

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme