Card

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the card
var el = document.querySelector("#card");
var card = Components.Card({
    el: el,
    className: "w-25",
    body: [
        {
            title: "Card Title",
            text: "This is the card contents.",
            actions: [
                {
                    text: "Card Action",
                    buttonType: $REST.Components.ButtonTypes.Primary
                }
            ]
        }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the card
let el = document.querySelector("#card");
let card = Components.Card({
    el: el,
    className: "w-25",
    body: [
        {
            title: "Card Title",
            text: "This is the card contents.",
            actions: [
                {
                    text: "Card Action",
                    buttonType: $REST.Components.ButtonTypes.Primary
                }
            ]
        }
    ]
});

Web Component

// Return the card properties return { className: "w-25", body: [ { title: "Card Title", text: "This is the card contents.", actions: [ { text: "Card Action", buttonType: $REST.Components.ButtonTypes.Primary } ] } ] }

<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-card>
    // Return the card properties
    return {
        className: "w-25",
        body: [
            {
                title: "Card Title",
                text: "This is the card contents.",
                actions: [
                    {
                        text: "Card Action",
                        buttonType: $REST.Components.ButtonTypes.Primary
                    }
                ]
            }
        ]
    }
</bs-card>

References

Card(props:ICardProps):ICard

ICard

Name	Returns	Description
dispose	void	Destroys an element’s card.
el	Element	The jquery element.

ICardProps

Name	Type	Description
body
className	string	The class name to apply to card.
footer
header
el	HTMLElement	The element to render the card to.
imgBottom
imgTop