Card Building Blocks
The Card component supports a variety of template-based components used as building blocks. All building blocks can be rendered as root level elements of the Card and therefore can be used as desired with no restriction in their place of declaration or requirement for the Card structure. The elements can also be nested inside each other.
-
CardHeader- renders header area, useful for title, subtitle, etc. Has a separator after itself. -
CardBody- renders the body of the card with added paddings. -
CardFooter- renders footer area separated from the content through a separator. -
CardImage- renders card image to fill the size of the card. Read more in the Card Image article. -
CardActions- renders dedicated area for actions. Read more in the Actions article. -
CardSeparator- renders a horizontal line. Read more in the Card Separator article. -
CardTitle- renders div title with default theme styling. -
CardSubTitle- renders div title with default theme styling as sub title.
CardHeader
Use the CardHeader tag to render header area of the Card.
Render
CardHeaderarea. The result from the snippet below.
CardBody
Use the CardBody tag to render the body of the Card.
Render
CardBodyarea. The result from the snippet below.
CardFooter
Use the CardFooter tag to render the footer area of the Card.
Render
CardFooterarea. The result from the snippet below.
CardImage
Use the CardImage tag to render the image section of the Card. The image will fill the size of the card unless you set any other Width and Height values.
Use
CardImagein the Card component. The result from the snippet below.
CardActions
Use the CardActions tag to render the actions area of the Card. You could place any action buttons inside and style them with the predefined orientation and layout of the buttons.
Use
CardActionsin the Card component. The result from the snippet below.
CardSeparator
Use the CardActions tag to render the actions area of the Card. An example of CardSeparator used between Card elements or nested inside an element.
Use
CardSeparatorin the Card component. The result from the snippet below.
CardTitle
Use the CardTitle tag to render a title (heading). Although the header area is suitable for placing title, it is not required and you can use the CardTitle as desired. The below sample demonstrates implementation of a title in three different sections.
Use
CardTitlein the Card component. The result from the snippet below.
CardSubTitle
Use the CardSubTitle tag to render sub title. Although the header area is suitable for placing title and sub title, it is not required and you can use the CardSubTitle as desired. It can also be used along with the CardTitle or as a standalone element. The below sample demonstrates both approaches.
Use
CardSubTitlein the Card component. The result from the snippet below.