Cards

Cards inherit the same properties as bootstraps default cards. we have tuned it to match the scheme of admin panel

Default card

<div class="card m-b-30">
    <div class="card-header">
        <h5 class="card-title m-b-0">Card title</h5>

    </div>
    <div class="card-body">

        <p class="card-text">Some quick example text to build on the card title and make up the bulk
            of the card's content.</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
            nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>
    </div>
    <div class="card-footer">
        <a href="#!" class="btn btn-primary">Link</a>
    </div>
</div>

Card with controls

 <div class="card">
    <div class="card-header">
        <h5 class="card-title m-b-0">Card title</h5>

        <div class="card-controls">

            <a href="#" class="js-card-fullscreen icon"></a>
            <a href="#" class="js-card-refresh icon"></a>
            <a href="#" class="js-card-close icon"></a>
            <div class="dropdown">
                <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
                        class="icon mdi  mdi-dots-vertical"></i> </a>

                <div class="dropdown-menu dropdown-menu-right">
                    <button class="dropdown-item" type="button">Action</button>
                    <button class="dropdown-item" type="button">Another action</button>
                    <button class="dropdown-item" type="button">Something else here</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">

        <p class="card-text">Some quick example text to build on the card title and make up the bulk
            of the card's content.</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
            nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>
    </div>
    <div class="card-footer">
        <a href="#!" class="btn btn-primary">Link</a>
    </div>
</div>

Card with scrolling body

<div class="card ">
    <div class="card-header">
        <h5 class="card-title m-b-0">Scrollable Card</h5>
    </div>
    <div class="card-body card-scroll">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>


    </div>
    <div class="card-footer text-md-right">
        <a href="#!" class="btn btn-secondary">Link</a>
    </div>
</div>

for card scrolling to work you need to define height to card-body default is set to 350px incard.scss