Card
Last updated
What is Card?
Cards are used to group information about subjects and their related actions.
- Supports any type of content: Cards are one of the most used components in the product, so they have to be flexible enough to support any other components placed in them.
- Information structure: No matter how flexible cards are, it’s important for cards to have a specific structure for its elements for product consistency.
- Supports media sections: One of the most popular scenarios for using cards is mixing them with media content. The most popular options are having a full-width area on top of the content or full-height area at one of the card’s sides.
- Supplementary actions: Cards can be used with actions usually placed at the bottom of the card, or the card itself can be tappable and represent an action.
- Responsiveness: On mobile viewports cards are usually full-width in order to save space for the content.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Card: common questions
Can I learn Card in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Card in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Card tutorial for beginners?
It is lesson 92 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.