limestone/Card

Provides Limestone styled card components and behaviors.

Loading Live Preview

Import Usage

import Card from '@enact/limestone/Card';

Members

Card   Component

A Limestone-styled Card.

Usage:

<Card
  src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
  label="A secondary caption"
>
 The primary caption
</Card>

Import Usage

import Card from '@enact/limestone/Card';

Extends: limestone/Cardlimestone/Card.CardBase
Wrapped with: limestone/Cardlimestone/Card.CardDecorator

CardBase   Component

A Limestone styled base component for limestone/Cardlimestone/Card.Card.

Import Usage

import {CardBase} from '@enact/limestone/Card';

Extends: ui/Cardui/Card.Card

Properties

Required Property •  src

StringObject

Source for the image. String value or Object of values used to determine which image will appear on a specific screenSize.

---

aria-label

String

The "aria-label" for the Card.

---

captionImageIconsSrc

Array(String)Array(Object)

Sources for the image icon.

An array of String values or Objects of values used to determine which image will appear on a specific screenSize. This prop is only used when orientation is 'vertical'.

---

captionImageSize

Object

The size of the caption images.

The following properties should be provided:

• height - The height of the image

• width - The width of the image

Default: {height: 96, width: 96}

---

captionOverflow

Boolean

Determines whether the caption will overflow the card container or not. It only applies when orientation is 'vertical' and captionOverlay and captionOverlayOnFocus is false.

---

captionOverflowOnFocus

Boolean

Determines whether the caption will overflow the card container and show only on card focus. It only applies when orientation is 'vertical' and captionOverlay and captionOverlayOnFocus is false.

---

captionOverlay

Boolean

Determines whether the caption will be placed over the image or not. It only applies when orientation is 'vertical'.

---

captionOverlayOnFocus

Boolean

Determines whether the caption will be placed over the image and shown only on card focus. It only applies when orientation is 'vertical'.

---

centered

Boolean

Centers the captions when imageIconSrc is not provided.

---

centeredTitle

Boolean

Centers the title and imageIconSrc horizontally and vertically. It only applies when captionOverlay or captionOverlayOnFocus is true.

---

children

String

The primary caption displayed with the image.

---

css

Object

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

---

disabled

Boolean

Disables Card and becomes non-interactive.

---

duration

Number

Media's entire duration in seconds.

---

durationOverlay

Boolean

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

---

fitImage

Boolean

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

---

hasContainer

Boolean

Set to true to display a container with background color. When orientation is 'horizontal', this prop is always true and provided value will be ignored.

---

icon

String

Icon used when selected is true

Default: 'check'

---

imageIconSrc

StringObjectElement

Source for the image icon.

String value or element or Object of values used to determine which image will appear on a specific screenSize. This prop is only used when orientation is 'vertical' or centeredTitle is true.

---

imageSize

Object

The size of the image.

The following properties should be provided:

• height - The height of the image

• width - The width of the image

Default: {height: 432, width: 768}

---

label

String

A secondary caption displayed with the image.

---

labelIcons

ElementArray(Element)

Icons to be included with the secondary caption.

Typically, up to 3 icons are used.

---

orientation

'horizontal''vertical'

The layout orientation of the component.

Default: 'vertical'

---

placeholder

String

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

---

primaryBadge

ElementString

The primary badge.

---

primaryBadgeSize

ObjectNumber

The size of the primary badge. Can be a number or an object with specific dimensions. The following properties should be provided for the object:

• height - The height of the badge

• width - The width of the badge

Default: {width: 108, height: 108}

---

progress

Number

The progress displayed inside the ProgressBar

---

progressBarOverlay

Boolean

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

---

roundedImage

Boolean

Set to true to display the image with rounded corners.

---

secondaryBadge

ElementString

The secondary badge.

---

secondaryBadgeSize

ObjectNumber

The size of the secondary badge. Can be a number or an object with specific dimensions. The following properties should be provided for the object:

• height - The height of the badge

• width - The width of the badge

Default: {width: 108, height: 108}

---

secondaryLabel

String

A ternary caption displayed with the image.

---

secondaryLabelIcons

ElementArray(Element)

Icons to be included with the ternary caption.

Typically, up to 3 icons are used.

---

selected

Boolean

Applies a selected visual effect to the image.

---

showDuration

Boolean

Activates the 'Duration'.

---

showProgressBar

Boolean

Activates the 'ProgressBar'.

---

splitCaption

Boolean

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

---

withoutMarquee

Boolean

Removes the marquee effect of caption and label text.

CardDecorator   Higher-Order Component

Limestone-specific card behaviors to apply to limestone/Cardlimestone/Card.Card.

Import Usage

import {CardDecorator} from '@enact/limestone/Card';

Includes: limestone/Marqueelimestone/Marquee.MarqueeController
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable