4.34.0

Card (action)

Action cards initiate an action when a button in the footer is selected

Demo

API

Tag

Name
<s-card-action>

Props

Name Value Required Description
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag Slot Name Required Value Example
<div> title A title that communicates the card topic. <div slot="title">My Title</div>
<div> subtitle <div slot="subtitle">Subtitle</div>
<img> or <svg> thumbnail <img src="image-url" slot="thumbnail" alt="descriptive text" />
<img> or <svg> media <img src="image-url" slot="media" alt="descriptive text" />
<div> description <div slot="description">Add a brief description or supporting details about the topic.</div>
<ul> multiactions

<ul> that contains menu items wrapped in <li>. <a> and <button> inherit styling.

 <ul slot="multiactions"> <li> <button> Action 1 </button> </li> </ul>
<div> singleAction

<div> contains attributes tooltip: tooltip text, icon: Icon to be displayed, and onclick: action to be performed on click

 <div slot="singleAction" tooltip="tooltip text" icon="star" onclick="functionOnclick()" > </div>
<s-tag> or <s-badge> status <s-badge slot="status" count="1" aria-label="1 unread message"></s-badge>
<div> footer Add action buttons with appropriate classes <div slot="footer"> <button class="tertiary small">Footer 1</button> <button class="tertiary small">Footer 2</button> <button class="tertiary small">Footer 3</button> </div>

Classes

Value Description
div.card-container Add this class to the parent of all cards to enable responsive behavior.

Demo

API

Tag

Name
<SCardAction>

Props

Name Value Required Description
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag Slot Name Required Value Example
<div> title A title that communicates the card topic. <div slot="title">My Title</div>
<div> subtitle <div slot="subtitle">Subtitle</div>
<img> or <svg> thumbnail <img src="image-url" slot="thumbnail" alt="descriptive text" />
<img> or <svg> media <img src="image-url" slot="media" alt="descriptive text" />
<div> description <div slot="description">Add a brief description or supporting details about the topic.</div>
<ul> multiactions

<ul> that contains menu items wrapped in <li>. <a> and <button> inherit styling.

 <ul slot="multiactions"> <li> <button> Action 1 </button> </li> </ul>
<div> singleAction

<div> contains attributes tooltip: tooltip text, icon: Icon to be displayed, and onclick: action to be performed on click

 <div slot="singleAction" tooltip="tooltip text" icon="star" onclick="functionOnclick()" > </div>
<s-tag> or <s-badge> status <s-badge slot="status" count="1" aria-label="1 unread message"></s-badge>
<div> footer Add action buttons with appropriate classes <div slot="footer"> <button class="tertiary small">Footer 1</button> <button class="tertiary small">Footer 2</button> <button class="tertiary small">Footer 3</button> </div>

Classes

Value Description
div.card-container Add this class to the parent of all cards to enable responsive behavior. Cards can also be placed using the grid.

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
card.ariaLabel.multiactionsTrigger aria label for the multi actions trigger more actions

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com