Credits
Examples
Note
Position the Credits component on the right side, either on top or bottom corner according to image content.
Anatomy
Note
It’s possible to select a different colour variant (Light/Dark) according to image content to ensure higher contrast.
How to use
When to use
- To attribute authorship or ownership of an image, ensuring proper credit is given.
- When using images from external sources that require attribution.
- On pages where image copyright information is necessary to display.
- In educational or informative content where the source of images adds credibility or context.
Note
For images owned by WFP add always credits with “© WFP/Name Surname"
When not to use
- For decorative images that do not require attribution.
- On pages with excessive images where credits might overwhelm the design and readability.
Alternative components:
- Caption Component: Use this to add descriptive text directly beneath an image without the formal structure of credits.
- Tooltip Component: For brief attributions that do not need to be always visible, consider using tooltips that show credits on hover.
Accessibility
- Ensure that the Image CREDITS component is keyboard accessible, allowing users to tab through and read all credits.
- Use clear and concise text for credits to avoid confusion.
- Include alternative text for images to describe the image content along with credits for screen readers.
- Maintain a high contrast between the text in the Image CREDITS component and its background to enhance readability for users with visual impairments.