Card Group

less than 1 minute read

References

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."
                }
            ]
        }
    ]
});

React

import * as React from "react";
import { CardGroup } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <CardGroup
                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."
                        }]
                    }
                ]}
            />
        );
    }
}

VueJS

<template>
    <CardGroup v-bind:cards="cards" />
</template>

<script>
import { CardGroup } from "gd-sprest-bs-vue";
export default {
    components: { CardGroup },
    data() {
        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>

Code Playground