Card Component
The ABP Card Component is a wrapper component for the Bootstrap card class. It supports all the features that Bootstrap card component provides.
ABP Card Component has three main components, CardHeader
, CardBody
and CardFooter
. These components have their own class and style inputs
Component | Selector | Input Properties |
---|---|---|
CardHeader | abp-card-header |
cardHeaderClass ,cardHeaderStyle |
CardBody | abp-card-body |
cardBodyClass ,cardBodyStyle |
CardFooter | abp-card-footer |
cardFooterClass ,cardFooterStyle |
In addition to these components, the Card component provides directives like CardHeader
,CardTitle
,CardSubtitle
,CardImgTop
.
Directive | Selector |
---|---|
CardHeader | abp-card-header ,[abp-card-header] ,[abpCardHeader] |
CardTitle | abp-card-title ,[abp-card-title] ,[abpCardTitle] |
CardSubtitle | abp-card-subtitle ,[abp-card-subtitle] ,[abpCardSubtitle] |
CardImgTop | abp-card-img-top ,[abp-card-img-top] ,[abpCardImgTop] |
Usage
ABP Card Component is a part of the ThemeSharedModule
module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below:
Then, the abp-card
component can be used. See the examples below:
CardBody
See the card body result below:
Titles, Text and Links
See the card title, text and link result below:
Images
See the card image result below:
List Groups
See the group list result below:
Kitchen Sink
See kitchen sink result below:
Header and Footer
See the header and footer result below: