docs/Card.html

<!DOCTYPE html
  SYSTEM "about:legacy-compat">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="copyright" content="(C) Copyright 2020"><meta name="DC.rights.owner" content="(C) Copyright 2020"><meta name="DC.type" content="concept"><meta name="description" content="Cards are a fundamental part of Tokenscript. They define how the token behaves in the wallet and in web pages. They are the only part of Tokenscript which is visible for the user."><meta name="DC.relation" scheme="URI" content="BasicConcepts.html"><meta name="DC.relation" scheme="URI" content="TokenCard.html"><meta name="DC.relation" scheme="URI" content="ActionCard.html"><meta name="DC.relation" scheme="URI" content="ActivityCard.html"><meta name="DC.relation" scheme="URI" content="elements/card.html"><meta name="DC.relation" scheme="URI" content="elements/cards.html"><meta name="DC.format" content="HTML5"><meta name="DC.identifier" content="concept_dhv_3dl_mmb"><link rel="stylesheet" type="text/css" href="css/commonltr.css"><link rel="stylesheet" type="text/css" href="css/custom.css"><title>Card</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Lato">
<script type="text/javascript" src="https://alphawallet.com/wp-content/themes/alphawallet/discourse/widget.js"></script>
</head><body id="concept_dhv_3dl_mmb"><header role="banner"><nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
  <div class="container">
    <a class="navbar-brand" href="/">🆃okenScript</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
	      <li class="nav-item"><a class="nav-link" href="/TokenScript.html">Documents</a></li>
	      <li class="nav-item"><a class="nav-link" href="/guides/Intro.html">Guides</a></li>
	      <li class="nav-item"><a class="nav-link" href="/specs/Intro.html">Specs</a></li>
	      <li class="nav-item external"><a class="nav-link" href="">TokenScript community forum</a></li>
	      <li class="nav-item external"><a class="nav-link" href="/TokenScript.html">AlphaWallet (uses TokenScript)</a></li>
	      <li class="nav-item external"><a class="nav-link" href="/guides/Intro.html">Github TokenScript</a></li>
	      <li class="nav-item external"><a class="nav-link" href="/specs/Intro.html">Github TokenScript Examples</a></li>
      </ul>
    </div>
  </div>
</nav></header><div class="container" id="content"><div class="row"><nav role="toc" class="col-lg-3"><ul><li><a href="Tokenization.html">Tokenization and dApps</a></li><li><a href="index.html">Introduction to TokenScript</a></li><li><a href="QuickStart.html">Quick Start (usuable now)</a></li><li><a href="BasicConcepts.html">Basic Concepts</a><ul><li><a href="TokenScript-Component.html">TokenScript File</a></li><li><a href="Attributes.html">Attributes</a></li><li class="active"><a href="Card.html">Card</a><ul><li><a href="TokenCard.html">Token Card</a></li><li><a href="ActionCard.html">ActionCard</a></li><li><a href="ActivityCard.html">ActivityCard</a></li></ul></li><li><a href="DataObjects.html">Data Objects</a></li><li><a href="Attestation.html">Attestation</a></li><li><a href="TokenScript-Syntax.html">TokenScript Syntax</a></li><li><a href="MagicLink.html">Magic Link</a></li></ul></li><li><a href="Deploy.html">Deploy TokenScript</a></li><li><a href="features/FeatureImplementation.html">Features implemented</a></li><li><a href="specs/Intro.html">TokenScript Specs</a></li><li><a href="guides/Intro.html">TokenScript Guides</a></li></ul></nav><main role="main" class="col-lg-9"><article role="article" aria-labelledby="ariaid-title1">
    <h1 class="title topictitle1" id="ariaid-title1">Card</h1>
    
    <div class="body conbody"><p class="shortdesc">Cards are a fundamental part of Tokenscript. They define how the token behaves in the
        wallet and in web pages. They are the only part of Tokenscript which is visible for the
        user.</p><div class="note restriction note_restriction"><span class="note__title">Restriction:</span> Cards current only work in the wallet, not in web pages. Work is in
            progress to make them available to the web pages.</div>
        <div class="p">In Tokenscript, Cards are the "User Interface" of tokens. There are 3 types of cards.<dl class="dl">
                
                    <dt class="dt dlterm">Token Card</dt>
                    <dd class="dd">Token Cards determine how the token behaves in the wallet and in web pages:
                        How it appears, how the wallet processes it and what users can do with it.
                        Cards are like little programs which extend the functionality and style of a
                        wallet, tailored for a specific token. </dd>
                
                
                    <dt class="dt dlterm">Action Card</dt>
                    <dd class="dd"> Action Cards are triggered by user or website to perform actions. It may
                        result in a transaction to be sent to the underlying blockchain, a
                        cryptographic message being signed, or a proof being made.</dd>
                
                
                    <dt class="dt dlterm">Activity Card</dt>
                    <dd class="dd">Activity Cards displays activities that have happened or will soon
                        happen.</dd>
                
            </dl></div>

        <p class="p">Token Card and Activity Card often have actions available to them that a user can click
            and result in the corrisponding Action Card being shown.</p>
        <p class="p">While other parts of Tokenscript are written mostly in XML, cards are built in JavaScript
            and HTML (WebAssembly support will be supported too). Theses JavaScript and HTML are
            either embeded or referred to from XML.</p>
        <p class="p">An important aspect of cards is that with a TokenScript enabled user-agent, they are not
            rendered in a website or app (although they may be physically placed there). They are
            defined in the TokenScript files and executed in a protected environment in the wallet
            or a TokenScript enabled dapp browser. Like a card in a game, a dApp can play it, but is
            not able to transform it. In the web 3.0 cards can become an important enabler of
            privacy and security: They offload operations and information from websites to wallets.
            They protect the user and reduce the risks of database heists.</p>
        <p class="p">Cards allow dApps to use token to interact with wallets in a much more specific and
            manifold way than a smart contract can do. They are used to display specific icons for a
            token, to query an API to get accompanying information, to create transactions, to
            structure the record of past transactions in a meaningful way and much more. </p>
        <p class="p">A planned feature of TokenScript is to allow the creation and use of decks, which means a
            set of cards that can be combined.</p>
        <p class="p"><strong class="ph b">Code</strong></p>
        <p class="p">In the Tokenscript XML file cards are declared by
                <code class="ph codeph">&lt;ts:cards&gt;</code>...<code class="ph codeph">&lt;/ts:cards&gt;</code></p>
    </div>
<nav role="navigation" class="related-links"><ul class="ullinks"><li class="link ulchildlink"><strong><a href="TokenCard.html">Token Card</a></strong><br>TokenCards determine how a wallet represents a token visually.</li><li class="link ulchildlink"><strong><a href="ActionCard.html">ActionCard</a></strong><br>An action card triggers actions in the wallet. For example, a transaction, an         attestation, a component of a transaction or a signature.</li><li class="link ulchildlink"><strong><a href="ActivityCard.html">ActivityCard</a></strong><br>Activity Cards show relevant blockchain events, as well as relevant off-chain         activities. They serve as a library of what is possible and a timeline of what         happened.</li></ul><div class="familylinks"><div class="parentlink"><strong>Parent topic:</strong> <a class="link" href="BasicConcepts.html" title="Learn about the basic concepts of TokenScript, which are used for creating a TokenScript.">Basic Concepts</a></div></div><div class="linklist relref"><strong>Related reference</strong><br><ul class="linklist"><li class="linklist"><a class="link" href="elements/card.html" title="card element defines a Card">&lt;card&gt; element</a></li><li class="linklist"><a class="link" href="elements/cards.html" title="cards element is a container of multiple Card. It can be used as a root element of a TokenScript File.">&lt;cards&gt; element</a></li></ul></div></nav></article></main></div></div></body></html>