Flexible container component for displaying related information in government services and applications with proper structure and hierarchy.
A simple card with header and content sections for organizing information.
Brief description of the service
Content goes here...
Card designs for displaying government services with icons, bilingual content, and action buttons.
Apply for trade license online / অনলাইনে ট্রেড লাইসেন্সের জন্য আবেদন করুন
Apply for birth certificate / জন্ম নিবন্ধনের জন্য আবেদন করুন
Structured display of contact information for government offices and departments.
Dhaka South City Corporation
Birth & Death Registration
Cards with colored indicators for displaying application status and important notifications.
Your birth certificate application has been approved
Application ID: BC-2024-001234
Approved Date: March 15, 2024
Collection: Available for pickup
Your passport application is currently being reviewed
Application ID: PP-2024-005678
Submitted: March 10, 2024
Expected: 2-3 weeks
Additional documents needed to process your application
Application ID: TL-2024-009012
Missing: Utility bill, business plan
Deadline: March 25, 2024
Display available government services, applications, and online procedures
Contact details, office hours, department information, and announcements
Application progress, approval status, document requirements, notifications
Personal information, application history, saved services, recent activities
Detailed specifications and characteristics of the Card component for implementation guidance.
| Specification | Details | Purpose & Usage |
|---|---|---|
| Component Type | Container Element | Groups related content into distinct, organized sections with visual boundaries |
| Complexity Level | Low | Simple layout component with minimal state and configuration options |
| Layout Structure | Header, Content, Footer sections, Flexible composition | Structured content organization with optional header and footer areas |
| Visual Variants | Outlined, Filled, Elevated, Flat, Interactive | Different visual styles to establish content hierarchy and interaction states |
| Content Support | Text, Images, Forms, Lists, Actions, Media content | Versatile container supporting various content types and layouts |
| Accessibility Features | Semantic structure, Keyboard navigation, Screen reader support, Focus management | Ensures content accessibility for all citizens including those with disabilities |
| Language Support | English, Bengali (বাংলা) | Bilingual content support including RTL considerations for government applications |
| Design System | Color tokens, Shadow system, Border radius, Spacing units | Consistent with CivixUI design principles and government branding |
| Responsive Features | Flexible sizing, Grid layouts, Mobile adaptation, Content overflow handling | Adapts to different screen sizes and content volumes efficiently |
| Use Cases | Content sections, Form groups, Service listings, Dashboard widgets, Information panels | Fundamental layout component for organizing content in government service applications |