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
Overlay
Credits

Credits

  • Design
  • Code
  • Props

Credits are used to display the credits for an image.

Import statement

import { Credits } from "@wfp/react"

Usage

The info prop is used to pass the credit information. It’s a string that can contain the photographer’s name, the source of the image, or any other relevant details you wish to include.

Editable Example

<Credits info="Photo: WFP/Cheick Omar Bandaogo">
  <img
    alt="Default illustration"
    src="https://www.wfp.org/sites/default/files/styles/media_embed/public/2024-02/Harvest%20millet%20burkina%20faso_CheickOmar-Bandaogo_219_0.jpg"
  />
</Credits>;

Styling

The Credits component can be styled using CSS to match the design of your application. You can target the component’s class to apply custom styles for the typography, background, or layout.

On this page

  • Usage
  • Styling

References

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