Card Group

Documentation

JavaScript

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

// Create the cardGroup
var el = document.querySelector("#cardGroup");
var cardGroup = Components.CardGroup({
    el: el,
    cards: [
        {
            body: [
                {
                    title: "Card 1",
                    text: "This is the first card."
                }
            ]
        },
        {
            body: [
                {
                    title: "Card 2",
                    text: "This is the second card."
                }
            ]
        },
        {
            body: [
                {
                    title: "Card 3",
                    text: "This is the third card."
                }
            ]
        }
    ]
});

TypeScript

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

// Create the cardGroup
let el = document.querySelector("#cardGroup");
let cardGroup = Components.CardGroup({
    el: el,
    cards: [
        {
            body: [
                {
                    title: "Card 1",
                    text: "This is the first card."
                }
            ]
        },
        {
            body: [
                {
                    title: "Card 2",
                    text: "This is the second card."
                }
            ]
        },
        {
            body: [
                {
                    title: "Card 3",
                    text: "This is the third card."
                }
            ]
        }
    ]
});

Web Component

// Return the card group properties return { cards: [ { body: [ { title: "Card 1", text: "This is the first card." } ] }, { body: [ { title: "Card 2", text: "This is the second card." } ] }, { body: [ { title: "Card 3", text: "This is the third card." } ] } ] }
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-card-group>
    // Return the card group properties
    return {
        cards: [
            {
                body: [
                    {
                        title: "Card 1",
                        text: "This is the first card."
                    }
                ]
            },
            {
                body: [
                    {
                        title: "Card 2",
                        text: "This is the second card."
                    }
                ]
            },
            {
                body: [
                    {
                        title: "Card 3",
                        text: "This is the third card."
                    }
                ]
            }
        ]
    }
</bs-card-group>

References

CardGroup(props:ICardGroupProps):ICardGroup

ICardGroup

Name Returns Description
el Element The jquery element.

ICardGroupProps

Name Type Description
cards string The cards.
className string The class name to apply to card group.
el HTMLElement The element to render the card group to.