Display Components
Display components present information and content to users. Use them to show text, images, data, and other visual elements in your applications.
Available Display Components
Text
Static text content for labels, descriptions, and information.
- • Plain text display
- • Rich text formatting
- • Dynamic content binding
- • Multiple text sizes
Image
Display pictures, graphics, and visual content.
- • URL-based images
- • Uploaded images
- • Responsive sizing
- • Alt text support
Badge
Status indicators and labels for quick information display.
- • Status indicators
- • Color-coded badges
- • Custom text
- • Size variants
Card
Content containers for grouping related information.
- • Content grouping
- • Header and footer
- • Custom styling
- • Interactive cards
Data Table
Display tabular data with sorting, filtering, and pagination.
- • Sortable columns
- • Data filtering
- • Pagination
- • Custom cell rendering
Component Properties
Text Component
Content Properties
- • Text content
- • HTML formatting
- • Dynamic data binding
- • Text transformations
Style Properties
- • Font size and weight
- • Text color
- • Text alignment
- • Line height
Image Component
Image Properties
- • Image URL or upload
- • Alt text
- • Image dimensions
- • Aspect ratio
Display Properties
- • Object fit
- • Border radius
- • Shadow effects
- • Loading states
Data Binding
Display components can be connected to data sources to show dynamic content that updates automatically.
Dynamic Content
Text components can display data from databases or APIs
Images can load from URLs stored in data
Badges can show status from data fields
Data tables automatically populate from data sources
Real-time Updates
When connected to data sources, display components automatically update when the underlying data changes, providing real-time information to users.
Common Use Cases
Dashboard Display
Create informative dashboards with various display components:
Text components for titles and descriptions
Cards to group related information
Badges for status indicators
Data tables for detailed information
Product Catalog
Display product information with images and details:
Image components for product photos
Text components for product names and descriptions
Badges for price tags and availability
Cards to organize product information
Best Practices
Content Organization
Use cards to group related information and create clear visual hierarchy. This makes your applications easier to scan and understand.
Image Optimization
Optimize images for web use to ensure fast loading times. Use appropriate alt text for accessibility and responsive sizing for different devices.
Data Presentation
Use data tables for complex information and badges for quick status indicators. Keep text concise and use formatting to highlight important information.