admin-lte

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Cards Component | AdminLTE 3 Documentation</title>  <title>Cards Component | AdminLTE v3 Documentaion</title> <meta name="generator" content="Jekyll v3.8.5" /> <meta property="og:title" content="Cards Component" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="AdminLTE v3 Documentaion" /> <meta property="og:description" content="AdminLTE v3 Documentaion" /> <meta property="og:site_name" content="AdminLTE v3 Documentaion" /> <script type="application/ld+json"> {"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/components/cards.html","headline":"Cards Component","@context":"http://schema.org"}</script>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"> <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <link rel="stylesheet" href="/assets/css/docs.css"> <link rel="stylesheet" href="/assets/css/highlighter.css"> <link rel="stylesheet" href="/assets/css/adminlte.min.css"> </head> <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed"> <div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v3.0 </a> <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown"> <a class="dropdown-item bg-info disabled" href="#">v3.0</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a> <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto">  </ul>   </nav> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="/index.html" class="brand-link logo-switch"> <img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs"> <img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px"> </a> <div class="sidebar"> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu"> <li class="nav-item "> <a href="/index.html" class="nav-link "> <i class="nav-icon fas fa-microchip"></i> <p> Installation </p> </a> </li> <li class="nav-item "> <a href="/dependencies.html" class="nav-link "> <i class="nav-icon fas fa-handshake"></i> <p> Dependencies & Plugins </p> </a> </li> <li class="nav-item "> <a href="/layout.html" class="nav-link "> <i class="nav-icon fas fa-copy"></i> <p> Layout </p> </a> </li> <li class="nav-item has-treeview menu-open"> <a href="/components" class="nav-link active"> <i class="nav-icon fas fa-th"></i> <p> Components <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/components/main-header.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Header</p> </a> </li> <li class="nav-item"> <a href="/components/main-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/cards.html" class="nav-link active"> <i class="far fa-circle nav-icon"></i> <p>Card</p> </a> </li> <li class="nav-item"> <a href="/components/boxes.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Small-/ Info-Box</p> </a> </li> <li class="nav-item"> <a href="/components/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/components/timeline.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Timeline</p> </a> </li> <li class="nav-item"> <a href="/components/ribbons.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Ribbons</p> </a> </li> <li class="nav-item"> <a href="/components/miscellaneous.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Miscellaneous</p> </a> </li> <li class="nav-item"> <a href="/components/plugins.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Plugins</p> </a> </li> </ul> </li> <li class="nav-item has-treeview "> <a href="/javascript" class="nav-link "> <i class="nav-icon fas fa-code"></i> <p> JavaScript <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/javascript/layout.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Layout</p> </a> </li> <li class="nav-item"> <a href="/javascript/push-menu.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Push Menu</p> </a> </li> <li class="nav-item"> <a href="/javascript/treeview.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Treeview</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-widget.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Card Widget</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-refresh.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>CardRefresh</p> </a> </li> <li class="nav-item"> <a href="/javascript/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/javascript/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/javascript/todo-list.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Todo List</p> </a> </li> <li class="nav-item"> <a href="/javascript/toasts.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Toasts</p> </a> </li> </ul> </li> <li class="nav-item "> <a href="/browser-support.html" class="nav-link "> <i class="nav-icon fab fa-chrome"></i> <p> Browser Support </p> </a> </li> <li class="nav-item "> <a href="/upgrade-guide.html" class="nav-link "> <i class="nav-icon fas fa-hand-point-up"></i> <p> Upgrade Guide </p> </a> </li> <li class="nav-item "> <a href="/implementations.html" class="nav-link "> <i class="nav-icon fas fa-bookmark"></i> <p> Implementations </p> </a> </li> <li class="nav-item "> <a href="/faq.html" class="nav-link "> <i class="nav-icon fas fa-question-circle"></i> <p> FAQ </p> </a> </li> <li class="nav-item "> <a href="/license.html" class="nav-link "> <i class="nav-icon fas fa-file-alt"></i> <p> License </p> </a> </li> </ul> </nav> </div> </aside> <div class="content-wrapper px-4 py-2"> <div class="content-header"> <h1 class="text-dark">Cards Component</h1> </div> <div class="content px-2"> <p>The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.</p> <h5 class="text-bold text-dark mt-5">Default Card Markup</h5> <div class="card"> <div class="card-header"> <h3 class="card-title">Default Card Example</h3> <div class="card-tools"> <span class="badge badge-primary">Label</span> </div> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Default Card Example<span class="nt"></h3></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span> <span class="c"></span> <span class="c"></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">></span>Label<span class="nt"></span></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> The body of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span> The footer of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> </code></pre></div></div> <h5 class="text-bold text-dark mt-5">Card Variants</h5> <p>You can change the style of the card by adding any of the contextual classes.</p> <h6 class="text-bold text-dark">Default</h6> <div class="row"> <div class="col-sm-3"> <div class="card"> <div class="card-header"> <h3 class="card-title">Default Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card card-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-primary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-secondary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-success"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-info"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-warning"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-danger"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-dark"</span><span class="nt">></span>...<span class="nt"></div></span> </code></pre></div></div> <h6 class="text-bold text-dark">Outline</h6> <div class="row"> <div class="col-sm-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card card-outline card-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-primary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-secondary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-success"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-info"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-warning"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-danger"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-outline card-dark"</span><span class="nt">></span>...<span class="nt"></div></span> </code></pre></div></div> <h6 class="text-bold text-dark">Background Color</h6> <div class="row"> <div class="col-sm-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card bg-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-primary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-secondary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-success"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-info"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-warning"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-danger"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-dark"</span><span class="nt">></span>...<span class="nt"></div></span> </code></pre></div></div> <h6 class="text-bold text-dark">Gradient Background Color</h6> <div class="row"> <div class="col-sm-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card bg-gradient-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-primary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-secondary"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-success"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-info"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-warning"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-danger"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-gradient-dark"</span><span class="nt">></span>...<span class="nt"></div></span> </code></pre></div></div> <h5 class="text-bold text-dark mt-5">Card Tools</h5> <p>Cards can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the card.</p> <p>AdminLTE data-widget attribute provides cards with the ability to collapse or be removed. The buttons are placed in the card-tools which is placed in the card-header.</p> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-primary"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card Tools<span class="nt"></h3></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-widget=</span><span class="s">"maximize"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-expand"</span><span class="nt">></i></button></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-widget=</span><span class="s">"collapse"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-minus"</span><span class="nt">></i></button></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-widget=</span><span class="s">"remove"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-times"</span><span class="nt">></i></button></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> The body of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> </code></pre></div></div> <h5 class="text-bold text-dark mt-5">Loading Style</h5> <p>To simulate a loading state, simply place this code before the <code class="highlighter-rouge">.card</code> closing tag.</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"overlay"</span><span class="nt">></span> <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-2x fa-sync-alt fa-spin"</span><span class="nt">></i></span> <span class="nt"></div></span> </code></pre></div></div> <div class="row"> <div class="col-md-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> <p>You can also use a dark loading style with adding <code class="highlighter-rouge">.dark</code> to <code class="highlighter-rouge">.overlay</code> like this code.</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"overlay dark"</span><span class="nt">></span> <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-2x fa-sync-alt fa-spin"</span><span class="nt">></i></span> <span class="nt"></div></span> </code></pre></div></div> <div class="row"> <div class="col-md-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> </div> </div> <footer class="main-footer"> <div class="float-right d-none d-sm-inline"> v3.0.1 </div> <strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved. </footer> </div> <script src="/assets/plugins/jquery/jquery.min.js"></script> <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script> <script src="/assets/js/adminlte.min.js"></script> </body> </html>