The Card component is a flexible container used to group related information, actions, or UI elements into a single block. It is often used for dashboards, detail views, and modular layouts.
1. Basic Properties
- Name → Unique identifier of the card (e.g.,
Card1
). - Disabled → Makes the card inactive and non-interactive.
- Hidden → Hides the card from the UI while keeping it in the layout structure.
- Expandable → Allows the card to expand and collapse for showing/hiding additional content.
- Show borders → Toggles border visibility around the card.
- Raised → Applies elevation (shadow) to visually lift the card above the background.
2. Layout
- Breakpoints → Defines responsive sizing in grid layouts.
- Spacing → Controls margins and padding relative to other components.
📘 See Common Properties → Layout.
3. Header
- Show → Displays the card’s header section.
- Title → The header’s text label (default:
Title here
).
4. Actions
- Allows placing interactive buttons or menus in the card (e.g., edit, delete, share).
- Actions are usually positioned in the header or footer section.
📘 See Common Properties → Actions.
5. Style
- Customizable styles for:
- Background color
- Borders
- Padding
- Shadow effects
📘 See Common Properties → Style.
6. Business Use Cases
- Dashboard widgets → Display KPIs, statistics, or charts.
- User profiles → Show account details in a structured layout.
- Product cards → E-commerce product previews with image, price, and actions.
- Collapsible sections → Expandable content such as FAQs or advanced filters.
✅ The Card component is a versatile container that helps organize information and actions into clean, structured blocks, improving both clarity and usability in applications.