import Card from "./Card"; import { Button } from "../../buttons/Button/Button"; import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks"; export const onClick = () => { alert("Read more clicked"); }; A `Card` component is designed to contain content and actions about a single subject. The anatomy of a `Card` component can be broken down into two distinct sections: header and content. The header section often consists of graphics and consists of _no_ padding or margin. The content section consists of details and/or actions and _does_ include margin by default. The footer section is a horizontal flex container fixed at the bottom of the card that often consist of call to actions, icons, and other indicators. Both the header and content sections can be set in a number of different ways. The examples below show these different approaches and how they can be used for a variety of outcomes.
The most basic use of `Card` simply declares a child element which, by default, will place the child in the content section. This implementation is notably void of styles with the exception of the base `Card` style and built-in content margin, but allows for the ultimate in customization. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc quam, bibendum quis augue porttitor, scelerisque pretium lorem. Ut quis ex bibendum justo feugiat euismod. There are times when a `Card` calls for a section consisting of no padding or margin. This is where the header sections comes into play. To use the header, the `Card` component follows React's concept of [containment](https://reactjs.org/docs/composition-vs-inheritance.html#containment). Simply put, containment is the idea of using a component's props to slot elements into designated areas. The example below shows how to use the **header**, **content**, and **footer** props to set those sections. } content={
Looking fly! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc quam, bibendum quis augue porttitor, scelerisque pretium lorem. Ut quis ex bibendum justo feugiat euismod.
} footer={} /> While using the **header** and **content** props and directly inserting whatever you want is extremely powerful, the `Card` component also includes several built-in layouts. Want a header consisting of a icon centered on a background color of your choosing? The `Card` component has your back. Want to give your icon a max height so it doesn't run all over work like the Stay Puft Marshmallow Man? You know the `Card` component has your back for that, too! The content section also features several layout options including **contentTitle**, **contentSub**, and **contentBody**. The final section is set via the **footer** prop and has a horizontal flex layout.
10 likes
} /> Putting all the pieces together, a complete example looks like the following.
10 likes
} /> There are a number of advanced features with `Card` as well. As seen in the example below, truncation is built-in and works for a number of sections and layout specific elements. And even within the truncation feature, there's a number of customizable settings like the number of lines and what to render for the ellipsis. ... Read more } footer={ <>
10 likes
} /> The `Card` component also allows you to add `className` to the header and content sections through the following props: - **headerClassName** - **headerIconClassName** - **headerIconContainerClassName** - **contentClassName** - **contentTitleClassName** - **contentSubClassName** - **contentDescriptionClassName** - **footerClassName** Also note that, in addition to elements, sections can also accept strings, number, or array of these types.