jube-fork/Jube.App/wwwroot/kendo/examples/cards/right-to-left-support.html

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</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 id="example">
    <div class="cards-container k-rtl">
        <div class="k-card k-card-vertical">
            <img class="k-card-image" src="../content/web/cards/doctor1.jpg" />
            <div class="k-card-body">
                <h5 class="k-card-title">Dr Nicole Graham</h5>
                <h6 class="k-card-subtitle">Cardiologist</h6>
                <p><strong>Office Hours:</strong> Mon - Fri 09 AM - 05 PM</p>
            </div>
            <div class="k-card-actions k-card-actions-stretched">
                <span class="k-card-action">
                    <span class="k-button k-flat k-primary">Book a Check-up</span>
                </span>
                <span class="k-card-action">
                    <span class="k-button k-flat k-primary">Contact info</span>
                </span>
            </div>
        </div>
        <div class="k-card k-card-horizontal">
            <div>
                <div class="k-card-header">
                    <h5 class="k-card-title">Dr John Paterson</h5>
                    <h6 class="k-card-subtitle">Allergist</h6>
                </div>
                <img class="k-card-image image-large" src="../content/web/cards/doctor3.jpg" />
                <div class="k-card-body">
                    <p>Earning his M.D. as a allergist in 1980. Since 1981 he practices in this field. <br /><br /> <strong>Office Hours</strong><br />  Mon - Fri <br /> 09 AM - 05 PM</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-calendar"></span></span>
                <span class="k-card-separator"></span>
                <span class="k-button k-flat k-primary"><span class="k-icon k-i-zoom"></span></span>
            </div>
        </div>
        <div class="k-card k-card-horizontal">
            <img class="k-card-image" src="../content/web/cards/doctor2.jpg">
            <div>
                <div class="k-card-header">
                    <h5 class="k-card-title">Dr Michael Smith</h5>
                    <h6 class="k-card-subtitle">Dermatologist</h6>
                </div>
                <div class="k-card-body">
                    <p>Earning his M.D. as a dermatologist in 1984. Since 1985 he practices in this field. <br /><br /><strong>Office Hours</strong><br />  Mon - Fri <br /> 09 AM - 05 PM</p>
                </div>
                <div class="k-card-actions k-card-actions-vertical k-card-actions-stretched">
                    <span class="k-card-action">
                        <span class="k-button k-flat k-primary">Book a check up</span>
                    </span>
                    <span class="k-card-action">
                        <span class="k-button k-flat k-primary">Contact info</span>
                    </span>
                </div>
                <div class="k-card-footer k-text-center">
                    <a class="k-button k-primary k-flat k-button-icon"><span class="k-icon k-i-email"></span></a>
                    <a class="k-button k-primary k-flat k-button-icon"><span class="k-icon k-i-marker-pin"></span></a>
                    <a class="k-button k-primary k-flat k-button-icon"><span class="k-icon k-i-information"></span></a>
                </div>

            </div>
        </div>
    </div>

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

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

        .k-card-horizontal .image-large {
            max-width: 100%;
        }
    </style>
</div>

    
</body>
</html>