jube-fork/Jube.App/wwwroot/kendo/examples/cards/action-buttons.html

<!DOCTYPE html>
<html>
<head>
    <title>Action Buttons</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Actions Orientation</h4>
        <div>
            <input type="radio" name="orientation" id="horizontal" value="horizontal" class="k-radio" checked="checked">
            <label class="k-radio-label" for="horizontal">Horizontal</label>

            <input type="radio" name="orientation" id="vertical" value="vertical" class="k-radio" checked>
            <label class="k-radio-label" for="vertical">Vertical</label>
        </div>
    </div>
    <div class="box-col">
        <h4>Actions Alignment</h4>
        <div>
            <input type="radio" name="alignment" id="start" value="start" class="k-radio" checked="checked">
            <label class="k-radio-label" for="start">Start</label>

            <input type="radio" name="alignment" id="end" value="end" class="k-radio">
            <label class="k-radio-label" for="end">End</label>

            <input type="radio" name="alignment" id="center" value="center" class="k-radio">
            <label class="k-radio-label" for="center">Center</label>

            <input type="radio" name="alignment" id="streched" value="stretched" class="k-radio" checked>
            <label class="k-radio-label" for="streched">Stretched</label>
        </div>
    </div>
</div>

<div id="example">
    <div class="cards-container">
        <div class="k-card k-card-vertical">
            <img class="k-card-image" src="../content/web/cards/south-africa.jpg" />
            <div class="k-card-body">
                <h5 class="k-card-title">African Safari</h5>
                <p>Africa provides some of the most epic wildlife diversity on the planet. Not many vacations involve sleeping in close quarters with lions, leopards, elephants, buffaloes, rhinos, giraffes and hippos.</p>
            </div>
            <div class="k-card-actions  k-card-actions-vertical k-card-actions-stretched">
                <span class="k-button k-flat k-primary">Book now</span>
                <span class="k-button k-flat k-primary">Check rates</span>
            </div>
        </div>
        <div class="k-card k-card-horizontal">
            <div>
                <div class="k-card-header">
                    <h5 class="k-card-title">India</h5>
                    <h6 class="k-card-subtitle">Khajuraho Varanasi Golden Triangle Tour</h6>
                </div>
                <div class="k-card-body">
                    <p>On your visit to India, enjoy the majesty of palaces and opulent architecture. Along your journey, don't miss the Gateway of India, built to commemorate the power of the British Empire. Visit the great mosque of Old Delhi, India's largest mosque, with a courtyard large enough to hold a mind-blowing 25,000 devotees. Of course, no trip to India would be complete without taking the time to visit one of the Seven Wonders of the World, the Taj Mahal.</p>
                </div>
            </div>
            <div class="k-card-actions k-card-actions-vertical k-card-actions-stretched">
                <span class="k-button k-flat k-primary"><span class="k-icon k-i-zoom"></span></span>
                <span class="k-button k-flat k-primary"><span class="k-icon k-i-heart-outline"></span></span>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        function changeActionsClasses() {
            var orientation = $("[name='orientation']:checked").val();
            var alignment = $("[name='alignment']:checked").val();

            $('.k-card .k-card-actions').each(function () {
                $(this).removeClass().addClass("k-card-actions k-card-actions-" + orientation + " k-card-actions-" + alignment);
            });
        }
        $("[name='orientation']").click(function (e) {
            changeActionsClasses();
        });

        $("[name='alignment']").click(function (e) {
            changeActionsClasses();
        });
    });
</script>

<style>
    .k-radio-label {
        margin-right: 10px;
    }

    .cards-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .k-card {
        width: 285px;
        margin: 0 5%;
    }

    .k-card-vertical .k-card-body {
        text-align: center;
    }
</style>


    
</body>
</html>