Card
The Card component is a versatile UI element used to display content and actions on a single topic. It can contain various elements such as text, images, and buttons.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
import "@start-base/start-ui/styles.css";Import the component
import Card from '@start-base/start-ui/Card';Usages
Card Default
Introduction to StartUI
Learn how StartUI helps you build scalable web apps faster.
StartUI provides a comprehensive set of customizable UI components for SaaS applications.
Card Fluid
StartUI - Full-Width Design
This card showcases StartUI's ability to scale across different screen sizes.
StartUI components are fully responsive, adjusting seamlessly to the size of the container.
Card Small
Small Card
This is an example of a small card in StartUI.
Small cards are great for compact data displays and minimal content blocks.
Card Large
Large Card
Learn how StartUI helps you build scalable web apps faster.
Large cards are great for compact data displays and minimal content blocks.
Card Collapsible
Collapsible Card
Click to expand and learn about how StartUI handles collapsible components.
StartUI components support advanced interactivity like collapsibility, perfect for dashboards.
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| children | string | Children of the Card | ||
| title | ReactNode | Title of the Card | ||
| description | ReactNode | Description of the Card | ||
| collapsible | boolean | false | Collapsible of the Card | |
| size | string | medium | small medium large | Size of the Card |
| fluid | boolean | false | Fluid of the Card | |
| className | string | Classname of the Card |