component-guidance-data

Component Guidance - Data Display

Components for displaying collections and structured data.

When to Use This Skill

Use this skill when:

• The user asks "Should I use [component] for [use case]?"
• The user needs to choose between similar components
• The user asks about component best practices
• The user wants to know when NOT to use a component

This skill covers: Avatar, Avatar Group, Calendar, Carousel, Feed Input, Feed List Item, Generic Tag, Generic Tile, Grid List, Icon, Illustrated Message, Info Label, List, Micro Process Flow, Object Identifier, Object List, Object Marker, Object Number, Object Status, Table, Title, Tree, Variant Management

Avatar

Description: Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own photos or initials, while products can be depicted with representative images or logos.

When to use:

• Display user photos, initials, or placeholders for personal identification
• Show standardized images for business content such as products, parts, logos, or campaign visuals
• Represent concepts or entities with icons when images aren't available
• Present images with transparent backgrounds when needed for clarity or design fit
• Provide placeholder images when no other source image is available
• Apply avatars consistently in places like lists, cards, and headers to create familiarity and a uniform visual pattern across the interface

When to avoid:

• ❌ Display pictures in a sequence, such as a slideshow or carousel → Use fd-carousel instead
• ❌ Display an interactive icon → Use fd-button with an icon inside instead

Best practices:

• ✅ Use a circle shape (fd-avatar--circle) for people
• ✅ Use a square shape for product or business-related images (default shape)
• ✅ Use the predefined sizes: fd-avatar--xs, fd-avatar--s, fd-avatar--m, fd-avatar--l, fd-avatar--xl
• ✅ For product icons, replace the default icon with a more suitable icon for your use case
• ✅ Provide a clear alternative text (alt attribute) for the avatar image
• ✅ For interactive avatars with badges, provide both a tooltip and alternative text
• ⚠️ Avoid unnecessarily large image files (optimize images)
• ⚠️ Avoid badges on avatars smaller than size S
• ❌ Don't attach click actions directly to icons in the avatar (wrap in a button instead)