ui/Card

Edit on GitHub

Unstyled card components and behaviors to be customized by a theme or application.

Members

Card Component

A minimally styled Card ready for customization by a theme.

Extends: ui/Cardui/Card.CardBase
Wrapped with: ui/Cardui/Card.CardDecorator

CardBase Component

A basic card without any behavior.

Properties

captionOverlay

Boolean

Determines whether the caption will be placed over the image or not.

Default: false

children

Node

The caption node to be displayed with the image.

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Cardui/Card.Card, the ref prop is forwarded to this component as componentRef.

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported.

fitImage

Boolean

Fits the image to its height and width and positions it on the center of the Card

imageComponent

ComponentElement

The component used to render the image component.

Default: {@link ui/Image.Image}

orientation

'horizontal''vertical'

The layout orientation of the component.

Default: 'vertical'

placeholder

String

A placeholder image to be displayed before the image is loaded.

selected

Boolean

Applies a selected visual effect to the image.

Default: false

splitCaption

Boolean

Splits the captions in two sections. This prop is only used when captionOverlayOnFocus or captionOverlay is true and orientation is 'vertical'.

Default: false

src

StringObject

String value or object of values used to determine which image will appear on a specific screenSize.

CardDecorator Higher-Order Component

A higher-order component that adds behaviors to an ui/Cardui/Card.CardBase.

Includes: ui/ForwardRefui/ForwardRef.ForwardRef