Overview
Cards provide a flexible and extensible content container with multiple variants and options.
Card Example
Cards use a wrapper <Card> followed by a <Card.Body> container. <Card.Title> and <Card.Subtitle> are used to space out the title and subtitle appropriately, and they can be customized to render heading tags by passing <h4>, <h5> to the as prop.
Card with Image
To add an image to the top of the card, use <Card.Img> with a variant top.
Header and Footer
Use <Card.Header>, <Card.Footer> to add header and footer content.
Customizing Cards
Cards primarily serve as containers to organize content for your needs. They can be combined with other UI elements and utility classes for a broad range of customization.
API
Card
import Card from `@trimbleinc/modus-react-bootstrap/Card`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bg | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | Sets card background | |
| body | boolean | false | When this prop is set, it creates a Card with a Card.Body inside passing the children directly to it |
| border | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | Sets card border color | |
| text | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | Sets card text color | |
| bsPrefix | string | 'card' |
Card.Body
import Card.Body from `@trimbleinc/modus-react-bootstrap/Card.Body`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bsPrefix required | string | 'card-body' |
Card.Img
import Card.Img from `@trimbleinc/modus-react-bootstrap/Card.Img`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <img> | |
| variant | 'top' | 'bottom' | null | Defines image position inside the card. |
| bsPrefix | string | 'card-img' |
Card.ImgOverlay
import Card.ImgOverlay from `@trimbleinc/modus-react-bootstrap/Card.ImgOverlay`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bsPrefix required | string | 'card-img-overlay' |
CardDeck
import CardDeck from `@trimbleinc/modus-react-bootstrap/CardDeck`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bsPrefix required | string | 'card-deck' |
CardGroup
import CardGroup from `@trimbleinc/modus-react-bootstrap/CardGroup`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bsPrefix required | string | 'card-group' |
CardColumns
import CardColumns from `@trimbleinc/modus-react-bootstrap/CardColumns`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <div> | |
| bsPrefix required | string | 'card-columns' |