<div class="card card-info">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-info"><i class="zmdi zmdi-cloud-outline"></i></span>
        <h4 class="color-info">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-raised btn-info"><i class="zmdi zmdi-airplane"></i> Button</a>
    </div>
</div>

<div class="card card-dark-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-info"><i class="zmdi zmdi-bike"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-raised btn-white color-info"><i class="zmdi zmdi-star"></i> Button</a>
    </div>
</div>

<div class="card card-warning-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-white ms-icon-circle ms-icon-xxlg mb-4"><i class="zmdi zmdi-card-giftcard color-warning"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
    </div>
</div>

<div class="card card-warning">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-warning"><i class="zmdi zmdi-cocktail"></i></span>
        <h4 class="color-warning">Lorem ipsum dolor</h4>
        <p>...</p>
    </div>
</div>

<div class="card card-royal">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-round ms-icon-inverse color-royal ms-icon-lg mb-4"><i class="zmdi zmdi-city-alt"></i></span>
        <h4 class="color-royal">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-royal"><i class="zmdi zmdi-airplane"></i> Button</a>
        <a href="javascript:void(0)" class="btn btn-royal"><i class="zmdi zmdi-star"></i> Other</a>
    </div>
</div>

<div class="card card-royal-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-white ms-icon-round ms-icon-lg mb-4"><i class="zmdi zmdi-cloud-outline color-royal"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-white"><i class="zmdi zmdi-airplane"></i> Button</a>
    </div>
</div>