Card — Smart UI JavaScript API

Card — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Card - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-card id="demo-card"></smart-card>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.card.js';

    const el = document.getElementById('demo-card');
    if (el) {

      el.itemTemplate = null;
      el.innerHTML = '
Quarterly Plan
Track milestones and deliveries for Q2.
';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Card   Framework: JavaScript   Selector: smart-card

API counts: 12 properties, 0 methods, 4 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: n/a

Common events: swipebottom, swipeleft, swiperight, swipetop

Module hint: smart-webcomponents/source/modules/smart.card.js

Card component with header, footer and content sections.

Class

Card

Card

Card component with header, footer and content sections.

Selector

smart-card

Quick picks

dataSourcedisabled

Properties

AanimationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled; otherwise, the selected animation mode determines how animations are displayed.
CcontentHandlerA callback function that allows you to attach event handlers and implement custom behaviors within the card element. Use this function to interact with or modify the card's content after it has been rendered, such as adding click listeners, updating UI components, or integrating additional logic specific to the card's context.
DdataSourceThis object serves as the data source for populating a card template. Each key corresponds to a placeholder—enclosed in double curly braces within the item's template. The associated values are used to replace these placeholders during rendering, enabling dynamic content injection into the card layout.
DdisabledPrevents user interactions with the element, such as clicking, typing, or focusing, effectively making the element unresponsive to input events.
IitemTemplateSpecifies a custom card template for rendering card content. The template can be provided either as a string representing the ID of an '<template>' element present in the DOM, or as a direct reference to an HTMLTemplateElement. Within the template’s HTML content, you may include one or more property placeholders using the double curly braces syntax. During rendering, each placeholder will be dynamically replaced with the corresponding property value from the associated 'dataSource' object. If you set this property using a template ID, the expected type is a string.
LlocaleSpecifies or retrieves the current language setting. This property determines which set of localized messages, as defined in the messages property, will be used for display. Changing the language updates the interface text to match the corresponding translations in messages.
LlocalizeFormatFunctionA callback function that allows you to define a custom format for localization messages returned by the Localization Module. Use this to modify or structure the message output according to specific requirements, such as adding prefixes, suffixes, or additional context for improved display or processing.
MmessagesDefines or retrieves an object containing localized string resources used within the widget's user interface. This enables the widget's labels, messages, and other text elements to be translated and displayed according to the selected language or region, as specified by the locale property. Use this property to provide custom translations and enhance the widget's internationalization support.
RrightToLeftGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and interface components in a right-to-left direction, ensuring proper localization for RTL locales.
TthemeSpecifies the theme applied to the element. The theme controls the overall visual appearance, including colors, fonts, and styles, to ensure a consistent look and feel across the element.
UunfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via user interaction, such as tabbing or clicking.
UunlockKeyRetrieves or assigns the unlockKey used to activate and gain access to the product’s features. This property is typically required for enabling full functionality after purchase or authorization.

Events

SswipebottomThis event is triggered when the user swipes the card downward, indicating a bottom swipe gesture on the card component.
SswipeleftThis event is triggered whenever the user performs a left swipe gesture on the card, indicating that the card has been dismissed or rejected by swiping it in a leftward direction.
SswiperightThis event is triggered whenever a user performs a right-swipe gesture on the card element, typically indicating a positive action such as approval or selection. It allows you to execute custom logic in response to the card being swiped to the right.
SswipetopThis event is triggered when the user swipes the card upwards (toward the top of the screen), indicating a "swipe up" gesture on the card component.

Properties

animationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled; otherwise, the selected animation mode determines how animations are displayed."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled; otherwise, the selected animation mode determines how animations are displayed.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-card animation="none"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-card');
const animation = el.animation;

contentHandlerA callback function that allows you to attach event handlers and implement custom behaviors within the card element. Use this function to interact with or modify the card's content after it has been rendered, such as adding click listeners, updating UI components, or integrating additional logic specific to the card's context.function | null

A callback function that allows you to attach event handlers and implement custom behaviors within the card element. Use this function to interact with or modify the card's content after it has been rendered, such as adding click listeners, updating UI components, or integrating additional logic specific to the card's context.

Try a demo showcasing the contentHandler property.

Examples

Markup and runtime examples for contentHandler:

HTML:

<smart-card content-handler="null"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.contentHandler = "function(card) { 
var toggleBtn = card.querySelector('smart-button'), 
   content = card.querySelector('.card-content'); 

toggleBtn.addEventListener('click', function () { 
   content.classList.toggle('hidden'); 
}); 
}";

Read the current value:

const el = document.querySelector('smart-card');
const contentHandler = el.contentHandler;

dataSourceThis object serves as the data source for populating a card template. Each key corresponds to a placeholder—enclosed in double curly braces within the item's template. The associated values are used to replace these placeholders during rendering, enabling dynamic content injection into the card layout.object

This object serves as the data source for populating a card template. Each key corresponds to a placeholder—enclosed in double curly braces within the item's template. The associated values are used to replace these placeholders during rendering, enabling dynamic content injection into the card layout.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-card data-source="{ property : "value" }"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.dataSource = { property : 'new value' };

Read the current value:

const el = document.querySelector('smart-card');
const dataSource = el.dataSource;

disabledPrevents user interactions with the element, such as clicking, typing, or focusing, effectively making the element unresponsive to input events.boolean

Prevents user interactions with the element, such as clicking, typing, or focusing, effectively making the element unresponsive to input events.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-card disabled></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-card');
const disabled = el.disabled;

itemTemplateSpecifies a custom card template for rendering card content. The template can be provided either as a string representing the ID of an '<template>' element present in the DOM, or as a direct reference to an HTMLTemplateElement. Within the template’s HTML content, you may include one or more property placeholders using the double curly braces syntax. During rendering, each placeholder will be dynamically replaced with the corresponding property value from the associated 'dataSource' object. If you set this property using a template ID, the expected type is a string.any

Specifies a custom card template for rendering card content. The template can be provided either as a string representing the ID of an '<template>' element present in the DOM, or as a direct reference to an HTMLTemplateElement. Within the template’s HTML content, you may include one or more property placeholders using the double curly braces syntax. During rendering, each placeholder will be dynamically replaced with the corresponding property value from the associated 'dataSource' object. If you set this property using a template ID, the expected type is a string.

Try a demo showcasing the itemTemplate property.

Examples

Markup and runtime examples for itemTemplate:

HTML:

<smart-card item-template="templateId1"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.itemTemplate = "templateId2";

Read the current value:

const el = document.querySelector('smart-card');
const itemTemplate = el.itemTemplate;

localeSpecifies or retrieves the current language setting. This property determines which set of localized messages, as defined in the messages property, will be used for display. Changing the language updates the interface text to match the corresponding translations in messages.string

Specifies or retrieves the current language setting. This property determines which set of localized messages, as defined in the messages property, will be used for display. Changing the language updates the interface text to match the corresponding translations in messages.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-card locale="de"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-card');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to define a custom format for localization messages returned by the Localization Module. Use this to modify or structure the message output according to specific requirements, such as adding prefixes, suffixes, or additional context for improved display or processing.function | null

A callback function that allows you to define a custom format for localization messages returned by the Localization Module. Use this to modify or structure the message output according to specific requirements, such as adding prefixes, suffixes, or additional context for improved display or processing.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-card localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-card');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing localized string resources used within the widget's user interface. This enables the widget's labels, messages, and other text elements to be translated and displayed according to the selected language or region, as specified by the locale property. Use this property to provide custom translations and enhance the widget's internationalization support.object

Defines or retrieves an object containing localized string resources used within the widget's user interface. This enables the widget's labels, messages, and other text elements to be translated and displayed according to the selected language or region, as specified by the locale property. Use this property to provide custom translations and enhance the widget's internationalization support.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-card messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-card');
const messages = el.messages;

rightToLeftGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and interface components in a right-to-left direction, ensuring proper localization for RTL locales.boolean

Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and interface components in a right-to-left direction, ensuring proper localization for RTL locales.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-card right-to-left></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-card');
const rightToLeft = el.rightToLeft;

themeSpecifies the theme applied to the element. The theme controls the overall visual appearance, including colors, fonts, and styles, to ensure a consistent look and feel across the element.string

Specifies the theme applied to the element. The theme controls the overall visual appearance, including colors, fonts, and styles, to ensure a consistent look and feel across the element.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-card theme="blue"></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-card');
const theme = el.theme;

unfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via user interaction, such as tabbing or clicking.boolean

If set to true, the element will be excluded from keyboard navigation and cannot receive focus via user interaction, such as tabbing or clicking.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-card unfocusable></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-card');
const unfocusable = el.unfocusable;

unlockKeyRetrieves or assigns the unlockKey used to activate and gain access to the product’s features. This property is typically required for enabling full functionality after purchase or authorization.string

Retrieves or assigns the unlockKey used to activate and gain access to the product’s features. This property is typically required for enabling full functionality after purchase or authorization.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-card unlock-key=""></smart-card>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-card');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-card');
const unlockKey = el.unlockKey;

Events

swipebottomThis event is triggered when the user swipes the card downward, indicating a bottom swipe gesture on the card component.CustomEvent

This event is triggered when the user swipes the card downward, indicating a bottom swipe gesture on the card component.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipebottom

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipebottom event.

Examples

Listen for swipebottom using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-card')?.addEventListener('swipebottom', (event) => {
	// event handling code goes here.
})

swipeleftThis event is triggered whenever the user performs a left swipe gesture on the card, indicating that the card has been dismissed or rejected by swiping it in a leftward direction.CustomEvent

This event is triggered whenever the user performs a left swipe gesture on the card, indicating that the card has been dismissed or rejected by swiping it in a leftward direction.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipeleft event.

Examples

Listen for swipeleft using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-card')?.addEventListener('swipeleft', (event) => {
	// event handling code goes here.
})

swiperightThis event is triggered whenever a user performs a right-swipe gesture on the card element, typically indicating a positive action such as approval or selection. It allows you to execute custom logic in response to the card being swiped to the right.CustomEvent

This event is triggered whenever a user performs a right-swipe gesture on the card element, typically indicating a positive action such as approval or selection. It allows you to execute custom logic in response to the card being swiped to the right.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swiperight event.

Examples

Listen for swiperight using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-card')?.addEventListener('swiperight', (event) => {
	// event handling code goes here.
})

swipetopThis event is triggered when the user swipes the card upwards (toward the top of the screen), indicating a "swipe up" gesture on the card component.CustomEvent

This event is triggered when the user swipes the card upwards (toward the top of the screen), indicating a "swipe up" gesture on the card component.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipetop

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipetop event.

Examples

Listen for swipetop using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-card')?.addEventListener('swipetop', (event) => {
	// event handling code goes here.
})