Here is a brief look at each of these parts of the Card component.
Card: The Card itself is a container component that can house various sub-components. It can include properties like color, background, border, boxShadow, padding, and margin.
CardHeader: This is often the first sub-component in a Card. It typically contains the title or headline of the card and may also include an icon or image. Its layout and design can be customized with properties like fontSize, color, alignment, and more.
CardBody: This sub-component holds the main content of the Card. It could include text, images, lists, tables, or any other content. The layout and design of the CardBody can be customized with properties such as padding, alignment, fontSize, and color.
CardFooter: This is typically the last sub-component in a Card. It often contains actions related to the content of the Card, such as buttons or links. The layout and design of the CardFooter can also be customized with properties like alignment, padding, and color.
Other components that can be skillfully used with the Card component include:
Image: While not specific to the Card component, the Image component is often used within a Card to display relevant pictures. It can be customized with properties like size, border, shadow, and alignment.
Button: Again, not specific to the Card component, but the Button component is often used within the CardFooter to provide actions the user can take. These could include things like 'Add to Cart', 'Read More', 'Delete', etc.
Stack: This is a layout component that is often used within a Card to ensure that its content is properly spaced and aligned. It can control the direction (horizontal or vertical) and spacing of its child components.
ButtonGroup: When you have multiple buttons in your CardFooter, you might want to use the ButtonGroup component. It ensures that your buttons are properly aligned and spaced.
Heading: These components are often used within the CardHeader and CardBody to display text. The Heading component is typically used for the title or headline, while the Text component is used for the main content or description.
You can design simple or complex cards based on your needs, incorporating images, actions, and sections as required. The Card component can be customized in many ways, from its border, color, and shadow to its padding and margin. By understanding these customizations and components, you can create a wide range of card-based layouts in Chakra.
These Card components can be imported as follows:
I am a card containing only a CardBody.
Card with Dividers
This is a summary of our findings.
These are our conclusions based on the data.
These are the details of our analysis.
Rugged rebel with a passion for whiskey and Harley Davidson motorcycles, but rarely at the same time...that would be dangerous. Construction worker by day, and party animal by night.
Card with Actions
View a summary of all your clients over the last month.
Displaying a Card Horizontally
An adventurous classic where a professor and his nephew journey towards the center of the Earth and discover a whole new world.
In this example, we have the following architectural highlights:
Header: contains a Flex container, combining an Avatar and information the poet. An IconButton is included for additional functionality.
CardBody: features a styled text describing the poet's significance
Expanded CardBody: contains a Flex container with a visually appealing background using a linear gradient, inside of which is an displaying a book cover relevant to the poet.
CardFooter: made up of a Flex container with Button components for social interactions. The buttons are evenly spaced and adorned with icons, allowing users to like, comment, and share the content.
Guillaume Apollinaire is considered one of the most important literary figures of the early twentieth century. His brief career influenced the development of such artistic movements as Futurism, Cubism, Dadaism, and Surrealism, and the legend of his personality—bohemian artist, raconteur, gourmand, soldier—became the model for avant-garde deportment...
Displaying Multiple Cards
The SimpleGrid component in Chakra UI offers a convenient solution for arranging cards in a grid layout. By specifying the desired number of columns and defining the spacing between cards, you can create a visually balanced grid that optimizes content organization and readability. This allows for seamless management and alignment of multiple cards within a single container.
Alternatively, you can leverage other layout methods such as Flexbox, CSS Grid, or custom CSS styles to arrange the cards according to your specific design requirements. These methods provide flexibility in terms of card placement, responsiveness, and customization, enabling you to tailor the presentation of multiple cards to your desired visual and functional outcomes.
Watch Ashitaka's journey as he attempts to mediate the conflict between the gods of a forest and the humans consuming its resources.
Follow Sophie's adventures in a world of magic as she tries to break the spell cast upon her.
Join Nausicaä, a young princess of the Valley of the Wind, on her journey as she struggles to prevent two warring nations from destroying the planet.
Experience Chihiro's quest to save her parents in a world of spirits and magic.
Centering Card Contents
Ashitaka's journey as he attempts to mediate the conflict between the gods of a forest and the humans consuming its resources.
If you choose not to specify a variant prop, Chakra UI defaults to the elevated variant. This ensures that your cards have a subtle elevation effect by default, providing a sense of depth and visual hierarchy.
The four variants:
The size prop empowers you to control the visual impact and prominence of your cards within the layout. Choosing a smaller size (sm) can be useful when you want to conserve space or display more compact card content. Conversely, opting for a larger size (lg) can help emphasize the card and its content, making it mormdinent. The medium size (md) strikes a balance between compactness and prominence, serving as a versatile option for various use cases.
Content text goes here.
Content text goes here.
Content text goes here.
Did you know?
Creative Idea No. 1
Hover over me!
Creative Idea No. 2
This is a card with another card nested inside it.
This card is nested inside the main card.
Creative Idea No. 3