Constructor
JavaScript:
-
new Coral.Card()
ordocument.createElement('coral-card')
HTML Tag:
-
<coral-card>
Extends
Sub-components
- Coral.Card.Asset
- Coral.Card.Content
- Coral.Card.Context
- Coral.Card.Description
- Coral.Card.Info
- Coral.Card.Overlay
- Coral.Card.Property
- Coral.Card.PropertyList
- Coral.Card.Subtitle
- Coral.Card.Title
Static Properties
-
Coral.Card.variant {String}
-
Properties:
Name Type Value Description DEFAULT String default Default card variant that shows the asset, overlay and content in their default positions. CONDENSED String condensed Condensed card variant where the overlay is hidden and the content is shown over the image. INVERTED String inverted Condensed card variant where the overlay is hidden and the content is shown over the image with a dark style. ASSET String asset Card variant where only the asset is shown.
Enum for Card variant values.
Instance Properties
-
instance.asset {HTMLElement}
-
-
instance.assetHeight {String}
-
- Default Value:
- ""
- HTML Attribute:
- assetheight
-
instance.assetWidth {String}
-
- Default Value:
- ""
- HTML Attribute:
- assetwidth
-
instance.colorHint {String}
-
- Default Value:
- ""
- HTML Attribute:
- colorhint
-
instance.content {HTMLElement}
-
-
instance.fixedWidth {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- fixedwidth
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.info {HTMLElement}
-
-
instance.overlay {HTMLElement}
-
-
instance.stacked {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- stacked
-
instance.variant {Coral.Card.variant}
-
- Default Value:
- Coral.Card.variant.DEFAULT
- HTML Attribute:
- variant
The Asset of the card.
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.
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.
The Content of the card.
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.
Whether this component is hidden or not.
The information area of the card, which is placed over all the content. It is typically used for alerts.
The Overlay of the card.
Whether the card is stacked or not. This is used to represent several assets grouped together.
The card's variant. It determines which sections of the Card and in which position they are shown.
Methods
-
instance.get
-
- Parameters:
-
Name Type Description property String The name of the property to fetch the value of. - Returns:
-
Property value. {*}
- Inherited From:
-
instance.hide
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.off
-
- Parameters:
-
Name Type Optional Description eventName String No
The event name to stop listening for. selector String Yes
The selector that was used for event delegation. func function No
The function that was passed to on()
.useCapture Boolean Yes
Only remove listeners with useCapture
set to the value passed in. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.on
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to listen for. selector String Yes
The selector to use for event delegation. func function No
The function that will be called when the event is triggered. useCapture Boolean Yes
Whether or not to listen during the capturing or bubbling phase. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.remove
-
- Inherited From:
-
instance.set
-
- Parameters:
-
Name Type Description property String The name of the property to set. value * The value to set the property to. silent Boolean If true, events should not be triggered as a result of this set. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.show
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.trigger
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to trigger. props Object Yes
Additional properties to make available to handlers as event.detail
.bubbles Boolean Yes
Set to false
to prevent the event from bubbling.cancelable Boolean Yes
Set to false
to prevent the event from being cancelable. - Returns:
-
CustomEvent object {CustomEvent}
- Inherited From:
Get the value of a property.
Hide this component.
Remove an event listener.
Add an event listener.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
Set a single property.
Show this component.
Trigger an event.
Events
-
coral-component:attached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:detached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:ready
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.
- since 1.9.0, use
Triggered when the component is attached to the DOM.
Triggered when the component is detached to the DOM.
Triggerred when the component has been upgraded and is ready for use.