Reference Source
import {Card} from '@adobe/coral-spectrum'
public class | source

Card

Expression Extends:

class Card extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A Card component to display content in different variations.

See:

Example:

Markup
<coral-card></coral-card>
JS constructor
new Coral.Card();

Static Member Summary

Static Public Members
public static

Returns Card variants.

Member Summary

Public Members
public

The Asset of the card.

public

Hints the height of the asset that is going to be loaded.

public

Hints the width of the asset that is going to be loaded.

public

  • "" by default.

public

The Content of the card.

public

Fixes the width of the card.

public

The information area of the card, which is placed over all the content.

public

The Overlay of the card.

public

Whether the card is stacked or not.

public

The card's variant. It determines which sections of the Card and in which position they are shown. See CardVariantEnum.

  • CardVariantEnum.DEFAULT by default.

Static Public Members

public static variant: CardVariantEnum: * source

Returns Card variants.

Return:

CardVariantEnum

Public Members

public asset: CardAsset source

The Asset of the card.

  • content-zone

public assetHeight: String source

Hints the height of the asset that is going to be loaded. This prepares the size so that when the image is loaded no reflow is triggered. Both assetHeight and assetWidth need to be specified for this feature to take effect.

  • "" by default.

public assetWidth: String source

Hints the width of the asset that is going to be loaded. This prepares the size so that when the image is loaded no reflow is triggered. Both assetHeight and assetWidth need to be specified for this feature to take effect.

  • "" by default.

public colorHint: String source

  • "" by default.

public content: CardContent source

The Content of the card.

  • content-zone

public fixedWidth: Boolean source

Fixes the width of the card. By default cards will take the width of their containers allowing them to interact nicely with grids. Whenever they are used standalone fixing the width might be desired.

  • false by default.
  • reflected

public info: CardInfo source

The information area of the card, which is placed over all the content. It is typically used for alerts.

  • content-zone

public overlay: CardOverlay source

The Overlay of the card.

  • content-zone

public stacked: Boolean source

Whether the card is stacked or not. This is used to represent several assets grouped together.

  • false by default.
  • reflected

public variant: String source

The card's variant. It determines which sections of the Card and in which position they are shown. See CardVariantEnum.

  • CardVariantEnum.DEFAULT by default.