ns card example

    <StackLayout class="c-grid-background">
        <CardView class="c-card c-card-animation m-t-10" shadowColor="#849596" margin="5" radius="10" elevation="50" shadowOffsetWidth="0" shadowOffsetHeight="0">
            <StackLayout>
                <GridLayout rows="auto, auto" columns="auto, auto" class="p-y-5 p-l-5">
                    <Label text="Learning in last 5 days" class="h4" row="0" col="0" />
                    <GridLayout rows="auto" columns="auto, auto, auto, auto, auto" row="0" col="1">
                        <template v-for="(learningStatus, index) in statuses">
                            <Label row="0" :col='index' v-if="learningStatus.success" :text="'fa-check' | fonticon" class="fa c-context-success p-l-5" />
                            <Label row="0" :col='index' v-else :text="'fa-times' | fonticon" class="fa c-context-danger p-l-5" />
                        </template>
                    </GridLayout>
                    <Label text="Task Streak (in last 30 days)" row="1" col="0" class="h4" />
                    <GridLayout rows="auto" columns="auto, auto" row="1" col="1">
                        <Label row="0" col="0" :text='streakPercentage + "%"' class="c-context-gold p-l-5" />
                        <Label row="0" col="1" v-if='streakPercentage > 49' :text="'fa-bolt' | fonticon" class="fa c-context-gold p-l-5" />
                        <Label row="0" col="1" v-else :text="'fa-arrow-down' | fonticon" class="fa c-context-gold p-l-5" />
                    </GridLayout>
                </GridLayout>
            </StackLayout>
        </CardView>
        <CardView class="c-card c-card-animation-opposite" shadowColor="#849596" margin="5" radius="10" elevation="50" shadowOffsetWidth="5" shadowOffsetHeight="5">
            <StackLayout>
                <GridLayout rows="auto,auto,auto" columns="auto">
                    <Label text="My Tasks for today" class="h2 p-l-5 p-t-5 v-home-today c-white-text" row="0" col="0"/>
                    <GridLayout :rows='rowOrColumnsStringConstructor(workTasks.length + 1, "auto")' columns="auto,auto" class="p-l-5" row="1" col="0">
                        <Label text="Work" class="h3 c-context-info" row="0" col="0"/>
                        <template v-for='(workTask, index) in workTasks'>
                            <GridLayout :row='index + 1' col="0" rows="auto" :columns='rowOrColumnsStringConstructor(workTask.labels.length + 1, "*")'>
                                <Label :text='workTask.text' row="0" col="0" class="h4" textWrap="true"/>
                                <template v-for='(label, index) in workTask.labels'>
                                    <Button :text='label' class="c-context-label m-l-5 p-x-5 h5" row="0" :col='index + 1'></Button>
                                </template>
                            </GridLayout>
                        </template>
                    </GridLayout>
                    <GridLayout :rows='rowOrColumnsStringConstructor(learnTasks.length + 1, "auto")' columns="auto,auto" class="p-l-5" row="2" col="0">
                        <Label text="Learn" class="h3 c-context-info" row="0" col="0" textWrap="true"/>
                        <template v-for='(learnTask, index) in learnTasks'>
                            <GridLayout :row='index + 1' col="0" rows="auto" :columns='rowOrColumnsStringConstructor(learnTask.labels.length + 1, "auto")'>
                                <Label :text='learnTask.text' row="0" col="0" class="h4"/>
                                <template v-for='(label, index) in learnTask.labels'>
                                    <Button :text='label' class="c-context-label m-l-5 p-x-5 h5" row="0" :col='index + 1'></Button>
                                </template>
                            </GridLayout>
                        </template>
                    </GridLayout>
                </GridLayout>
            </StackLayout>
        </CardView>
        <CardView class="c-card c-card-animation" shadowColor="#849596" margin="5" radius="10" elevation="50" shadowOffsetWidth="5" shadowOffsetHeight="5">
            <StackLayout>
                <Label text="PTO" class="c-white-text h2 p-l-5 p-t-5 v-home-pto" />
                <Button class="btn c-white-text c-context-danger-label h5"> >>> Swipe to Apply OOO Tomorrow >>></Button>
                <Button class="btn c-white-text c-context-info-label h5"> >>> Swipe to Apply WFH Tomorrow >>></Button>
                <GridLayout rows="auto,auto" columns="*,*">
                    <Label row="0" col="0" text="Today" class="h3 c-context-info p-l-5 p-t-5"/>
                    <GridLayout row="1" col="0" :rows='rowOrColumnsStringConstructor(todayOOOs.length + todayWFHs.length, "auto")' columns="auto, auto" class="p-l-5">
                        <template v-for='(employeeName, index) in todayOOOs'>
                            <Label :row='index' col="0" :text="'fa-bed' | fonticon" class="fa h1 c-context-danger" />
                            <Label :row='index' col="1" :text='employeeName' class="h3 p-l-5" />
                        </template>
                        <template v-for='(employeeName, index) in todayWFHs'>
                            <Label :row='index + todayOOOs.length' col="0" :text="'fa-home' | fonticon" class="fa h1 c-context-success" />
                            <Label :row='index + todayOOOs.length' col="1" :text='employeeName' class="h3 p-l-5" />
                        </template>
                    </GridLayout>
                    <Label row="0" col="1" text="Tomorrow" class="h3 c-context-info p-l-5 p-t-5"/>
                    <GridLayout row="1" col="1" :rows='rowOrColumnsStringConstructor(tomorrowOOOs.length + tomorrowWFHs.length, "auto")' columns="auto, auto" class="p-l-5">
                        <template v-for='(employeeName, index) in tomorrowOOOs'>
                            <Label :row='index' col="0" :text="'fa-bed' | fonticon" class="fa h1 c-context-danger" />
                            <Label :row='index' col="1" :text='employeeName' class="h3 p-l-5" />
                        </template>
                        <template v-for='(employeeName, index) in tomorrowWFHs'>
                            <Label :row='index + tomorrowOOOs.length' col="0" :text="'fa-home' | fonticon" class="fa h1 c-context-success" />
                            <Label :row='index + tomorrowOOOs.length' col="1" :text='employeeName' class="h3 p-l-5" />
                        </template>
                    </GridLayout>
                </GridLayout>
            </StackLayout>
        </CardView>
        <CardView class="c-card c-card-animation" shadowColor="#849596" margin="5" radius="10" elevation="50" shadowOffsetWidth="5" shadowOffsetHeight="5">
            <StackLayout>
                <Label text="Streak Gurus of last 30 days" class="h2 c-white-text p-l-5 p-t-5 v-home-task-streak"/>
                <GridLayout :rows='rowOrColumnsStringConstructor(streakGurus.length, "auto")' columns="auto,auto" class="p-l-5">
                    <template v-for='(streak, index) in streakGurus'>
                        <Image :src='streak.imageData' :row='index' col="0" class="iconImage m-5"></Image>
                        <GridLayout :row='index' col="1" rows="auto,auto" columns="auto" class="p-t-10">
                            <Label :text='streak.employeeName' class="h4" row="0" col="0"/>
                            <Label :text='streak.percentage + "% streak"' class="h4" row="1" col="0"/>
                        </GridLayout>
                    </template>
                </GridLayout>
            </StackLayout>
        </CardView>
        <CardView class="c-card c-card-animation-opposite" shadowColor="#849596" margin="5" radius="10" elevation="50" shadowOffsetWidth="5" shadowOffsetHeight="5">
            <StackLayout>
                <Label text="Learning Gurus of last 30 days" class="h2 c-white-text p-l-5 p-t-5 v-home-learning-streak"/>
                <GridLayout :rows='rowOrColumnsStringConstructor(learningGurus.length, "auto")' columns="auto,auto" class="p-l-5">
                    <template v-for='(learning, index) in learningGurus'>
                        <Image :src='learning.imageData' :row='index' col="0" class="iconImage m-5"></Image>
                        <GridLayout :row='index' col="1" rows="auto,auto" columns="auto" class="p-t-10">
                            <Label :text='learning.employeeName' class="h4" row="0" col="0"/>
                            <Label :text='learning.percentage + "% streak"' class="h4" row="1" col="0"/>
                        </GridLayout>
                    </template>
                </GridLayout>
            </StackLayout>
        </CardView>
    </StackLayout>