Card

React children containing CardHeader, CardBody and CardFooter components.

Optionally hide the card's border if placed on a dark background. Defaults to false.

Optionally determine the cards layout direction. Default to vertical

Declare container type

The backgroundColor property sets the background color of an element.

The boxShadow property adds shadow effects around an element's frame.

The className prop can be used to add CSS classes to the box.

The cursor property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

The overflowY property sets what shows when content overflows a block-level element's left and right edges.

The overflowY property sets what shows when content overflows a block-level element's top and bottom edges.

Configures the wrapping behaviour for overflowing content

Configures the hyphen behaviour for overflowing content

The userSelect property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.

The alignContent property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

The textAlign property specifies the horizontal alignment of text in an element. It also allows the centering of elements inside a Box while preserving the display: block property

The gap property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

The columnGap property sets the gaps (gutters) between columns.

The rowGap property sets the gaps (gutters) between rows.

The justifyContent property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

The order property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

The color property sets the text color of an element.

The height property sets an element's height.

The width property sets an element's width.

The minHeight property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for minHeight.

The minWidth property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for minWidth.

The maxHeight CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for maxHeight.

The maxWidth CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by maxWidth.

The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

The top property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

The right property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

The bottom property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

The left property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

The zIndex property sets the "z-order" of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

The flexBasis property sets the initial main size of a flex item.

The flexFlow shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

The flexGrow property sets the flex grow factor of a flex item main size.

The flexShrink property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

Allow flex items to flow (wrap) onto multiple lines.

The margin shorthand property sets the margin area on all four sides of an element at once.

The marginTop property sets the margin area on the top side of an element.

The marginRight property sets the margin area on the right side of an element.

The marginBottom property sets the margin area on the bottom side of an element.

The marginLeft property sets the margin area on the left side of an element.

The marginY shorthand property sets the margin area on the top and bottom of the element.

The marginY shorthand property sets the margin area on the left and right of the element.

The padding shorthand property sets the padding area on all four sides of an element at once.

The paddingTop property sets the height of the padding area on the top of an element.

The paddingRight property sets the width of the padding area on the right of an element.

The paddingBottom property sets the height of the padding area on the bottom of an element.

The paddingLeft property sets the width of the padding area on the left of an element.

The paddingY shorthand property sets the padding area on the top and bottom of the element.

The paddingX shorthand property sets the padding area on the left and right of the element.

Display as an inline-level flex container.

React component that will be the content of the CardHeader.

Sets the spacing area on all four sides of the CardHeader. Defaults to medium.

Divider to separate the CardHeader from CardBody. Defaults to false.

React component that will be the content of the CardBody.

Sets the spacing area on all four sides of the CardBody. Defaults to medium.

React component that will be the content of the CardFooter.

Sets the spacing area on all four sides of the CardFooter. Defaults to medium.

Divider to separate the CardFooter from CardBody. Defaults to false.