Card
Last updated
Last updated
The Card is a versatile and flexible element. It is used to create visually appealing and structured sections to display various types of content, such as text, images, and buttons.
A Card typically encompasses a box-shaped section and offers options for incorporating Card Header, Card Body, and Card Footer elements which are described below.
You can add elements directly to the card or inside the contained header, body and footer elements.
You can place the card anywhere on your page. If you need to show a group of related cards together on a page, please see .
The Card Header element enhances the appearance of a card by providing a padded section with a light gray background. It features a border at the bottom to visually distinguish it from other sections within the card.
Typically, the card header is positioned near the top of the card, but it can be placed anywhere within the card structure.
To customize the card header, you have the flexibility to modify its background color or any other aspect by either adding or utilizing the , which offers additional styling options.
The Card Body element adds a padded section to the card and is designed to contain the main content of the card.
It ensures that the main content of the card is appropriately separated and visually distinguished from other card sections, such as the card header and card footer.
To customize the card body, you have the flexibility to modify its background color or any other aspect by either adding or utilizing the , which offers additional styling options.
The Card Footer element serves the purpose of creating a dedicated section at the bottom of a card, allowing you to incorporate supplementary content or actions that are directly associated with the card. It enhances the visual structure by adding a padded section with a light gray background and a top border, effectively separating it from other card sections.
To customize the appearance of the card footer, you have the flexibility to modify various aspects, including its background color and other properties.
This can be achieved by either adding or utilizing the , which provides additional styling options and control over the card footer's visual presentation.
The Card, Card Header, Card Body and Card Footer elements cannot be directly accessed in the for drag-and-drop functionality. Instead, you can utilize the pre-built responsive solutions offered by , and elements.
Within the card, card header, card body and card footer elements, you have the freedom to effortlessly drag and drop various elements such as , , , , , , , , etc. However, it's important to note that certain elements may have specific restrictions. For instance, a can only be added to a , adhering to its designated usage.