Coral.Card

Current Version: 3.1.0
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Github: @coralui/coralui-component-card

Markup Examples

|

Card with Overlay

OVERLAY Only
Show Markup 
<coral-card fixedwidth assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/7"></coral-card-asset>
  <coral-card-overlay>
    <div class="u-coral-padding">
      <coral-card-context>OVERLAY Only</coral-card-context>
    </div>
  </coral-card-overlay>
</coral-card>

Card with Content

Image Girl's Eyes 3 4
Show Markup 
<coral-card fixedwidth assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/7"></coral-card-asset>
  <coral-card-content>
    <coral-card-context>Image</coral-card-context>
    <coral-card-title>Girl's Eyes</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="lockOn"></coral-card-property>
      <coral-card-property icon="comment">3</coral-card-property>
      <coral-card-property icon="star">4</coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Card with Content, condensed

Image Girl's Eyes 3 4
Show Markup 
<coral-card fixedwidth variant="condensed" assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/7"></coral-card-asset>
  <coral-card-content>
    <coral-card-context>Image</coral-card-context>
    <coral-card-title>Girl's Eyes</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="lockOn"></coral-card-property>
      <coral-card-property icon="comment">3</coral-card-property>
      <coral-card-property icon="star">4</coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Card with Content, inverted

Folder Name
Show Markup 
<coral-card fixedwidth variant="inverted" assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/sports/10"></coral-card-asset>
  <coral-card-content>
    <coral-card-context>Folder</coral-card-context>
    <coral-card-title>Name</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="viewOff"></coral-card-property>
      <coral-card-property icon="lockOn"></coral-card-property>
      <coral-card-property icon="comment"></coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Card with Content, stacked

Collection Asset Collection
Show Markup 
<coral-card fixedwidth stacked assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/1"></coral-card-asset>
  <coral-card-content>
    <coral-card-context>Collection</coral-card-context>
    <coral-card-title>Asset Collection</coral-card-title>
  </coral-card-content>
</coral-card>

Card with Content, condensed & stacked

Collection Asset Collection
Show Markup 
<coral-card fixedwidth variant="condensed" stacked assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/1"></coral-card-asset>
  <coral-card-content>
    <coral-card-context>Collection</coral-card-context>
    <coral-card-title>Asset Collection</coral-card-title>
  </coral-card-content>
</coral-card>

Card with Content and Info: 'New'

New
Image Girl's Eyes 4 3 2 weeks ago
Show Markup 
<coral-card fixedwidth assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/9"></coral-card-asset>
  <coral-card-info>
    <coral-tag color="blue">New</coral-tag>
  </coral-card-info>
  <coral-card-content>
    <coral-card-context>Image</coral-card-context>
    <coral-card-title>Girl's Eyes</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="viewOff"></coral-card-property>
      <coral-card-property icon="lockOn">4</coral-card-property>
      <coral-card-property icon="comment">3</coral-card-property>
    </coral-card-propertylist>
    <coral-card-propertylist>
      <coral-card-property>2 weeks ago</coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Card with Content and Alert: 'Info'

InfoWorkflow has started.
Image Girl's Eyes 4 3
Show Markup 
<coral-card fixedwidth assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/9"></coral-card-asset>
  <coral-card-info>
    <coral-alert variant="info">
      <coral-alert-header>Info</coral-alert-header>
      <coral-alert-content>Workflow has started.</coral-alert-content>
    </coral-alert>
  </coral-card-info>
  <coral-card-content>
    <coral-card-context>Image</coral-card-context>
    <coral-card-title>Girl's Eyes</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="viewOff"></coral-card-property>
      <coral-card-property icon="lockOn">4</coral-card-property>
      <coral-card-property icon="comment">3</coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Card with Content and Alert: 'Error'

ErrorAsset has expired.
Image Girl's Eyes 4 3
Show Markup 
<coral-card fixedwidth assetwidth="200" assetheight="200">
  <coral-card-asset><img src="http://lorempixel.com/200/200/people/9"></coral-card-asset>
  <coral-card-info>
    <coral-alert variant="error">
      <coral-alert-header>Error</coral-alert-header>
      <coral-alert-content>Asset has expired.</coral-alert-content>
    </coral-alert>
  </coral-card-info>
  <coral-card-content>
    <coral-card-context>Image</coral-card-context>
    <coral-card-title>Girl's Eyes</coral-card-title>
    <coral-card-propertylist>
      <coral-card-property icon="viewOff"></coral-card-property>
      <coral-card-property icon="lockOn">4</coral-card-property>
      <coral-card-property icon="comment">3</coral-card-property>
    </coral-card-propertylist>
  </coral-card-content>
</coral-card>

Coral.Card API

Constructor

JavaScript:

new Coral.Card() or document.createElement('coral-card')

HTML Tag:

<coral-card>

Extends

Sub-components

Static Properties

Coral.Card.variant {String}

Enum for Card variant values.

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.

Instance Properties

instance.asset {HTMLElement}

The Asset of the card.

instance.assetHeight {String}

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.
Default Value:
  • ""
HTML Attribute:
  • assetheight

instance.assetWidth {String}

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.
Default Value:
  • ""
HTML Attribute:
  • assetwidth

instance.colorHint {String}

Default Value:
  • ""
HTML Attribute:
  • colorhint

instance.content {HTMLElement}

The Content of the card.

instance.fixedWidth {Boolean}

Reflected
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.
Default Value:
  • false
HTML Attribute:
  • fixedwidth

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.info {HTMLElement}

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

instance.overlay {HTMLElement}

The Overlay of the card.

instance.stacked {Boolean}

Reflected
Whether the card is stacked or not. This is used to represent several assets grouped together.
Default Value:
  • false
HTML Attribute:
  • stacked

instance.variant {Coral.Card.variant}

The card's variant. It determines which sections of the Card and in which position they are shown.
Default Value:
  • Coral.Card.variant.DEFAULT
HTML Attribute:
  • variant

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
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

Add an event listener.
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

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.
Inherited From:

instance.set

Set a single property.
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

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
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:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      coral-component:ready

      Triggerred when the component has been upgraded and is ready for use.
      Callback Parameters:
      Name Type Description
      event Object Event object.
      Inherited From:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        Coral.Card.Asset API

        Constructor

        JavaScript:

        new Coral.Card.Asset() or document.createElement('coral-card-asset')

        HTML Tag:

        <coral-card-asset>

        Extends

        • HTMLElement

        Coral.Card.Content API

        Constructor

        JavaScript:

        new Coral.Card.Content() or document.createElement('coral-card-content')

        HTML Tag:

        <coral-card-content>

        Extends

        • HTMLElement

        Coral.Card.Overlay API

        Constructor

        JavaScript:

        new Coral.Card.Overlay() or document.createElement('coral-card-overlay')

        HTML Tag:

        <coral-card-overlay>

        Extends

        • HTMLElement

        Coral.Card.PropertyList API

        Constructor

        JavaScript:

        new Coral.Card.PropertyList() or document.createElement('coral-card-propertylist')

        HTML Tag:

        <coral-card-propertylist>

        Extends

        • HTMLElement

        Coral.Card.Property API

        Constructor

        JavaScript:

        new Coral.Card.Property() or document.createElement('coral-card-property')

        HTML Tag:

        <coral-card-property>

        Extends

        Sub-components

        Instance Properties

        instance.content {HTMLElement}

        The property's content zone

        instance.hidden {Boolean}

        Reflected
        Whether this component is hidden or not.
        Inherited From:
        Default Value:
        • false
        HTML Attribute:
        • hidden

        instance.icon {String}

        Specifies the icon name used inside the property. See Coral.Icon for valid icon names.
        Default Value:
        • ""
        HTML Attribute:
        • icon
        See:

        Methods

        instance.get

        Get the value of a property.
        Parameters:
        Name Type Description
        property String The name of the property to fetch the value of.
        Returns:
        Property value. {*}
        Inherited From:

        instance.hide

        Hide this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.off

        Remove an event listener.
        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

        Add an event listener.
        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

        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.
        Inherited From:

        instance.set

        Set a single property.
        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

        Show this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.trigger

        Trigger an event.
        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:

        Events

        coral-component:attached

        Triggered when the component is attached to the DOM.
        Callback Parameters:
        Name Type Description
        event Object Event object.
        Inherited From:
        Deprecated:
        • since 1.14.0, use MutationObserver instead.

          coral-component:detached

          Triggered when the component is detached to the DOM.
          Callback Parameters:
          Name Type Description
          event Object Event object.
          Inherited From:
          Deprecated:
          • since 1.14.0, use MutationObserver instead.

            coral-component:ready

            Triggerred when the component has been upgraded and is ready for use.
            Callback Parameters:
            Name Type Description
            event Object Event object.
            Inherited From:
            Deprecated:
            • since 1.9.0, use Coral.commons.ready() instead.

              Coral.Card.Title API

              Constructor

              JavaScript:

              new Coral.Card.Title() or document.createElement('coral-card-title')

              HTML Tag:

              <coral-card-title>

              Extends

              Instance Properties

              instance.content {HTMLElement}

              The title's content zone.

              instance.hidden {Boolean}

              Reflected
              Whether this component is hidden or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • hidden

              Methods

              instance.get

              Get the value of a property.
              Parameters:
              Name Type Description
              property String The name of the property to fetch the value of.
              Returns:
              Property value. {*}
              Inherited From:

              instance.hide

              Hide this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.off

              Remove an event listener.
              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

              Add an event listener.
              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

              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.
              Inherited From:

              instance.set

              Set a single property.
              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

              Show this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.trigger

              Trigger an event.
              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:

              Events

              coral-component:attached

              Triggered when the component is attached to the DOM.
              Callback Parameters:
              Name Type Description
              event Object Event object.
              Inherited From:
              Deprecated:
              • since 1.14.0, use MutationObserver instead.

                coral-component:detached

                Triggered when the component is detached to the DOM.
                Callback Parameters:
                Name Type Description
                event Object Event object.
                Inherited From:
                Deprecated:
                • since 1.14.0, use MutationObserver instead.

                  coral-component:ready

                  Triggerred when the component has been upgraded and is ready for use.
                  Callback Parameters:
                  Name Type Description
                  event Object Event object.
                  Inherited From:
                  Deprecated:
                  • since 1.9.0, use Coral.commons.ready() instead.

                    Coral.Card.Context API

                    Constructor

                    JavaScript:

                    new Coral.Card.Context() or document.createElement('coral-card-context')

                    HTML Tag:

                    <coral-card-context>

                    Extends

                    Instance Properties

                    instance.content {HTMLElement}

                    The context's content zone.

                    instance.hidden {Boolean}

                    Reflected
                    Whether this component is hidden or not.
                    Inherited From:
                    Default Value:
                    • false
                    HTML Attribute:
                    • hidden

                    Methods

                    instance.get

                    Get the value of a property.
                    Parameters:
                    Name Type Description
                    property String The name of the property to fetch the value of.
                    Returns:
                    Property value. {*}
                    Inherited From:

                    instance.hide

                    Hide this component.
                    Returns:
                    this, chainable {Coral.Component}
                    Inherited From:

                    instance.off

                    Remove an event listener.
                    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

                    Add an event listener.
                    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

                    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.
                    Inherited From:

                    instance.set

                    Set a single property.
                    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

                    Show this component.
                    Returns:
                    this, chainable {Coral.Component}
                    Inherited From:

                    instance.trigger

                    Trigger an event.
                    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:

                    Events

                    coral-component:attached

                    Triggered when the component is attached to the DOM.
                    Callback Parameters:
                    Name Type Description
                    event Object Event object.
                    Inherited From:
                    Deprecated:
                    • since 1.14.0, use MutationObserver instead.

                      coral-component:detached

                      Triggered when the component is detached to the DOM.
                      Callback Parameters:
                      Name Type Description
                      event Object Event object.
                      Inherited From:
                      Deprecated:
                      • since 1.14.0, use MutationObserver instead.

                        coral-component:ready

                        Triggerred when the component has been upgraded and is ready for use.
                        Callback Parameters:
                        Name Type Description
                        event Object Event object.
                        Inherited From:
                        Deprecated:
                        • since 1.9.0, use Coral.commons.ready() instead.