<card> element

card element defines a Card

There are two mandatory attributes for card, @type and @name.

@type has 3 possible values: token, action, activity, for Token Card, ActionCard, ActivityCard respectively.

A card element is always put inside a <cards> element.

Basic structure of cards and views

This shows the structure where 3 cards are defined, each of different types, each with its own view and item-view

<ts:cards>
     <ts:card type="action" name="convert-to-xdAI">
          <view>…</view>
          <item-view>…</item-view>
      </ts:card>
      <ts:card type="token" name="main">
          <view>…</view>
          <item-view>…</item-view>
      </ts:card>
      <ts:card type="activity" name="OwnerApproved">
          <view>…</view>
          <item-view>…</item-view>
      </ts:card>
</ts:cards>

Token Card

<ts:card type="token" name="main">
   <ts:item-view xml:lang="en">
       <xhtml:style type="text/css">&item-view-style;</xhtml:style>
       <xhtml:script type="text/javascript">&item-view.en;</xhtml:script>
   </ts:item-view>
      <ts:view xml:lang="en">
          <xhtml:style type="text/css">&view-style;</xhtml:style>
          <xhtml:script type="text/javascript">&view.en;</xhtml:script>
      </ts:view>
</ts:card>

Action Card

<ts:card type="action" name="best-rates">
    <ts:label>
        <ts:string xml:lang="en">Best Rates</ts:string>
    </ts:label>
    <ts:view xml:lang="en">
         <xhtml:style type="text/css">&style;</xhtml:style>
         <xhtml:script type="text/javascript">&bestRates.en;</xhtml:script>
     </ts:view>
</ts:card>

Activity Card

<ts:card type="activity" name="ownerApproved">
            <ts:origins>
                <ethereum:event type="Approval" filter="owner=${ownerAddress}"/>
            </ts:origins>
            <ts:item-view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
                <style type="text/css">&style;</style>
                <script  type="text/javascript">&item-view-ownerApproved.en;</script>
            </ts:item-view>
            <ts:view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
                <style type="text/css">&style;</style>
                <script  type="text/javascript">&gaveApproval.en;</script>
            </ts:view>
</ts:card>

Related information

Card

Token Card

ActionCard

ActivityCard

We make tokens smart

Smart Token Labs is the creator of TokenScript and AlphaWallet two open source solutions for a tokenized future.