creativetimofficial--ui
Stefan
1816 行
124 KiB
HTML
1816 行
124 KiB
HTML
<!--
|
|
=========================================================
|
|
Material Dashboard - v2.1.2
|
|
=========================================================
|
|
|
|
Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
|
Coded by Creative Tim
|
|
|
|
=========================================================
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Material Dashboard by Creative Tim
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Canonical SEO -->
|
|
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
|
|
<!-- Social tags -->
|
|
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, free dashboard, free admin dashboard, free bootstrap 4 admin dashboard">
|
|
<meta name="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<!-- Schema.org markup for Google+ -->
|
|
<meta itemprop="name" content="Material Dashboard by Creative Tim">
|
|
<meta itemprop="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Twitter Card data -->
|
|
<meta name="twitter:card" content="product">
|
|
<meta name="twitter:site" content="@creativetim">
|
|
<meta name="twitter:title" content="Material Dashboard by Creative Tim">
|
|
<meta name="twitter:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta name="twitter:creator" content="@creativetim">
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Open Graph data -->
|
|
<meta property="fb:app_id" content="655968634437471">
|
|
<meta property="og:title" content="Material Dashboard by Creative Tim" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg" />
|
|
<meta property="og:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../../../assets-old/css/material-dashboard.min.css?v=2.1.2" rel="stylesheet" />
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
<link rel="stylesheet" href="../../../assets-old/demo/docs.min.css">
|
|
<style>
|
|
.navbar-absolute-logo {
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.navbar-absolute-logo img {
|
|
position: absolute;
|
|
left: 15px;
|
|
margin-top: -6px;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../../assets-old/demo/demo.css" rel="stylesheet" />
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
|
|
Material Dashboard
|
|
</a>
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v2.1.2
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.2</a>
|
|
<a class="dropdown-item" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
|
|
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
|
|
<title>GitHub</title>
|
|
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
|
|
<title>Twitter</title>
|
|
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-nav-scroll ml-md-auto ">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro"> <i class="material-icons">card_membership</i> Upgrade to PRO </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i> Help with a star</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="javascript:;" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="material-icons">translate </i>
|
|
ENGLISH
|
|
<div class="ripple-container"></div></a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item active dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html">
|
|
ENGLISH
|
|
</a>
|
|
<a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/zh/docs/2.1/getting-started/introduction.html">中文
|
|
</a>
|
|
<a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/ja/docs/2.1/getting-started/introduction.html">日本人
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link"></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
|
</svg></a>
|
|
<style>
|
|
.github-corner:hover .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
|
|
@keyframes octocat-wave {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(0)
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
transform: rotate(-25deg)
|
|
}
|
|
|
|
40%,
|
|
80% {
|
|
transform: rotate(10deg)
|
|
}
|
|
}
|
|
|
|
@media (max-width:500px) {
|
|
.github-corner:hover .octo-arm {
|
|
animation: none
|
|
}
|
|
|
|
.github-corner .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
}
|
|
</style>
|
|
</header>
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Getting started
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.1/getting-started/introduction.html">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/getting-started/license.html">
|
|
License
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/getting-started/file-structure.html">
|
|
File Structure
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/getting-started/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Components
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/badge.html">
|
|
Badge
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/breadcrumb.html">
|
|
Breadcrumb
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li class="active bd-sidenav-active">
|
|
<a href="../../../docs/2.1/components/card.html">
|
|
Card
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/carousel.html">
|
|
Carousel
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/collapse.html">
|
|
Collapse
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/forms.html">
|
|
Forms
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/info-areas.html">
|
|
Info Areas
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/material-icons.html">
|
|
Material Icons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/modal.html">
|
|
Modal
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/navs.html">
|
|
Navs
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/pagination.html">
|
|
Pagination
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/parallax.html">
|
|
Parallax
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/popovers.html">
|
|
Popovers
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/progress.html">
|
|
Progress
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/tables.html">
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/tooltips.html">
|
|
Tooltips
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/components/typography.html">
|
|
Typography
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Plugins
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/bootstrap-switch.html">
|
|
Bootstrap Switch
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/datetimepicker.html">
|
|
DateTimePicker
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/fileupload-jasny.html">
|
|
FileUpload Jasny
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/select-bootstrap.html">
|
|
Select Bootstrap
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/sweet-alert-2.html">
|
|
Sweet Alert 2
|
|
<span class="badge badge-primary">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/sliders.html">
|
|
Sliders
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.1/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
|
<ul class="section-nav">
|
|
<li class="toc-entry toc-h2"><a href="#cards-headers-type">Cards Headers Type</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#regular-header">Regular header</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#full-header-coloured">Full header coloured</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#here-is-the-icon">Here is the Icon</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#here-is-the-text">Here is the Text</a></li>
|
|
</ul>
|
|
<li class="toc-entry toc-h3"><a href="#cards-with-animation----pro-component">Cards with Animation - Pro Component</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#website-views">Website Views</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#card-chart">Card Chart</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#daily-sales">Daily Sales</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#completed-tasks">Completed Tasks</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#content-types">Content types</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3"><a href="#body">Body</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#titles-text-and-links">Titles, text, and links</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#card-title">Card title</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#card-subtitle">Card subtitle</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#images">Images</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#list-groups">List groups</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#header-and-footer">Header and footer</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment">Special title treatment</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#featured">Featured</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-1">Special title treatment</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-2">Special title treatment</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-3">Special title treatment</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-4">Special title treatment</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-5">Special title treatment</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#navigation">Navigation</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-6">Special title treatment</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#special-title-treatment-7">Special title treatment</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#images-1">Images</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3"><a href="#image-caps">Image caps</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#card-title-1">Card title</a></li>
|
|
<li class="toc-entry toc-h4"><a href="#card-title-2">Card title</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#image-overlays">Image overlays</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#card-title-3">Card title</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3"><a href="#blog-cards----pro-component">Blog Cards - Pro Component</a>
|
|
<ul>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#fashion">Fashion</a></li>
|
|
</ul>
|
|
<li class="toc-entry toc-h5"><a href="#-------------twitter--------">
|
|
Twitter
|
|
</a></li>
|
|
</ul>
|
|
<li class="toc-entry toc-h4"><a href="#------------you-dont-have-to-sacrifice-joy-to-build-a-fabulous-business-and-life--------">
|
|
"You Don't Have to Sacrifice Joy to Build a Fabulous Business and Life"
|
|
</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#------------trending_up-trending--------">
|
|
trending_up Trending
|
|
</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h4"><a href="#------------to-grow-your-business-start-focusing-on-your-employees--------">
|
|
To Grow Your Business Start Focusing on Your Employees
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#profile-card----pro-component">Profile Card - Pro Component</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4"><a href="#alec-thompson">Alec Thompson</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#ceo--co-founder">CEO / Co-Founder</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#full-background-card----pro-component">Full Background Card - Pro Component</a>
|
|
<ul>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#productivy-apps">Productivy Apps</a></li>
|
|
</ul>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#the-best-productivity-apps-on-market">The Best Productivity Apps on Market</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#pricing-card----pro-component">Pricing Card - Pro Component</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#69">$69</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#rotating-card----pro-component">Rotating Card - Pro Component</a>
|
|
<ul>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6"><a href="#full-background-card">Full Background Card</a></li>
|
|
</ul>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3"><a href="#this-background-card-will-rotate-on-hover">This Background Card Will Rotate on Hover</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h5"><a href="#------------------------manage-post--------------------">
|
|
Manage Post
|
|
</a></li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">Cards
|
|
</h1>
|
|
<p class="bd-lead">Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.</p>
|
|
<p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called .card. The information inside the card usually goes inside the content (class .card-body). The content can have three types of elements inside: .card-title and .category. You can optionally add a .card-footer, if you want to place a call-to-action. You can change the color of the header using the <code class="highlighter-rouge">card-header-*color</code> attribute like this: <code class="highlighter-rouge">card-header-primary | info | success | warning | danger | rose</code>.</p>
|
|
<p>If you want to use the cards on white background you can remove it’s shadow using the class <code class="highlighter-rouge">.card-plain</code></p>
|
|
<h2 id="cards-headers-type">Cards Headers Type</h2>
|
|
<p>The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: <code class="highlighter-rouge">.card-header-icon</code> or <code class="highlighter-rouge">.card-header-text</code>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Regular header</h4>
|
|
<p class="category">Category subtitle</p>
|
|
</div>
|
|
<div class="card-body">
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-header-danger">
|
|
<h4 class="card-title">Full header coloured</h4>
|
|
<p class="category">Category subtitle</p>
|
|
</div>
|
|
<div class="card-body">
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-header-icon card-header-rose">
|
|
<div class="card-icon">
|
|
<i class="material-icons">language</i>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Here is the Icon</h4>
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-header-text card-header-primary">
|
|
<div class="card-text">
|
|
<h4 class="card-title">Here is the Text</h4>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Regular header<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"category"</span><span class="nt">></span>Category subtitle<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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 card-header-danger"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Full header coloured<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"category"</span><span class="nt">></span>Category subtitle<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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 card-header-icon card-header-rose"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-icon"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>language<span class="nt"></i></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Here is the Icon<span class="nt"></h4></span>
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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 card-header-text card-header-primary"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Here is the Text<span class="nt"></h4></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="cards-with-animation----pro-component">Cards with Animation - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<p>We’ve created some special cards that can have actions under the header, you can activate those cards but adding the property <code class="highlighter-rouge">data-header-animation="true"</code>. Info: <strong>After 20x hovers</strong> of one of these cards you can break it :-)</p>
|
|
<p>To stop the break effect you can go to <code class="highlighter-rouge">assets/js/material-dashboard.js</code> and find the variable <code class="highlighter-rouge">breakCards = true</code> and set it to <code class="highlighter-rouge">false</code>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6 ml-auto mr-auto">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-rose" data-header-animation="true">
|
|
<div class="ct-chart" id="websiteViewsChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-actions">
|
|
<button type="button" class="btn btn-danger btn-link fix-broken-card">
|
|
<i class="material-icons">build</i> Fix Header!
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="Refresh">
|
|
<i class="material-icons">refresh</i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Change Date">
|
|
<i class="material-icons">edit</i>
|
|
</button>
|
|
</div>
|
|
<h4 class="card-title">Website Views</h4>
|
|
<p class="card-category">Last Campaign Performance</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 ml-auto mr-auto"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-chart"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-rose"</span> <span class="na">data-header-animation=</span><span class="s">"true"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct-chart"</span> <span class="na">id=</span><span class="s">"websiteViewsChart"</span><span class="nt">></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-actions"</span><span class="nt">></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-danger btn-link fix-broken-card"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>build<span class="nt"></i></span> Fix Header!
|
|
<span class="nt"></button></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-info btn-link"</span> <span class="na">rel=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Refresh"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>refresh<span class="nt"></i></span>
|
|
<span class="nt"></button></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-default btn-link"</span> <span class="na">rel=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Change Date"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>edit<span class="nt"></i></span>
|
|
<span class="nt"></button></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Website Views<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Last Campaign Performance<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>access_time<span class="nt"></i></span> campaign sent 2 days ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="card-chart">Card Chart</h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-chart card-header-warning">
|
|
<div class="ct-chart" id="dailySalesChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Daily Sales</h4>
|
|
<p class="card-category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-chart card-header-success">
|
|
<div class="ct-chart" id="completedTasksChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Completed Tasks</h4>
|
|
<p class="card-category">Last Campaign Performance</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 2 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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 card-chart card-header-warning"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct-chart"</span> <span class="na">id=</span><span class="s">"dailySalesChart"</span><span class="nt">></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Daily Sales<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">><span</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-long-arrow-up"</span><span class="nt">></i></span> 55% <span class="nt"></span></span> increase in today sales.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>access_time<span class="nt"></i></span> updated 4 minutes ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<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 card-chart card-header-success"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct-chart"</span> <span class="na">id=</span><span class="s">"completedTasksChart"</span><span class="nt">></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Completed Tasks<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Last Campaign Performance<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>access_time<span class="nt"></i></span> updated 2 minutes ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<p><code class="highlighter-rouge">// INFO: #dailySalesChart is initialised inside assets/js/material-dashboard.js on method initDocumentationCharts()</code></p>
|
|
<h2 id="content-types">Content types</h2>
|
|
<p>Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
|
<h3 id="body">Body</h3>
|
|
<p>The building block of a card is the <code class="highlighter-rouge">.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
This is some text within a card body.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><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-body"</span><span class="nt">></span>
|
|
This is some text within a card body.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="titles-text-and-links">Titles, text, and links</h3>
|
|
<p>Card titles are used by adding <code class="highlighter-rouge">.card-title</code> to a <code class="highlighter-rouge"><h*></code> tag. In the same way, links are added and placed next to each other by adding <code class="highlighter-rouge">.card-link</code> to an <code class="highlighter-rouge"><a></code> tag.</p>
|
|
<p>Subtitles are used by adding a <code class="highlighter-rouge">.card-subtitle</code> to a <code class="highlighter-rouge"><h*></code> tag. If the <code class="highlighter-rouge">.card-title</code> and the <code class="highlighter-rouge">.card-subtitle</code> items are placed in a <code class="highlighter-rouge">.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
|
<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>
|
|
<a href="#0" class="card-link">Card link</a>
|
|
<a href="#0" class="card-link">Another link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="nt">></span>Card subtitle<span class="nt"></h6></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Card link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="images">Images</h3>
|
|
<p><code class="highlighter-rouge">.card-img-top</code> places an image to the top of the card. With <code class="highlighter-rouge">.card-text</code>, text can be added to the card. Text within <code class="highlighter-rouge">.card-text</code> can also be styled with the standard HTML tags.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" rel="nofollow" alt="Card image cap" />
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="list-groups">List groups</h3>
|
|
<p>Create lists of content in a card with a flush list group.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs" style="width: 20rem;">
|
|
<div class="card-header card-header-danger">
|
|
Featured
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-danger"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="header-and-footer">Header and footer</h3>
|
|
<p>Add an optional header and/or footer within a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<div class="card-header card-header-warning">
|
|
Featured
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-warning"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<p>Card headers can be styled by adding <code class="highlighter-rouge">.card-header</code> to <code class="highlighter-rouge"><h*></code> elements.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<h4 class="card-header card-header-info">Featured</h4>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-header card-header-info"</span><span class="nt">></span>Featured<span class="nt"></h4></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<div class="card-header card-header-success">
|
|
Quote
|
|
</div>
|
|
<div class="card-body">
|
|
<blockquote class="blockquote mb-0">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-success"</span><span class="nt">></span>
|
|
Quote
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span>
|
|
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
|
|
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
|
|
<span class="nt"></blockquote></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs text-center">
|
|
<div class="card-header card-header-primary">
|
|
Featured
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
<div class="card-footer text-muted">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-primary"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer text-muted"</span><span class="nt">></span>
|
|
2 days ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h2 id="text-alignment">Text alignment</h2>
|
|
<p>You can quickly change the text alignment of any card—in its entirety or specific parts—with our <a href="https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment">text align classes</a>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
<div class="card text-center" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
<div class="card text-right" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-right"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h2 id="navigation">Navigation</h2>
|
|
<p>Add some navigation to a card’s header (or block) with Bootstrap’s <a href="/material-dashboard/docs/2.1/components/navs.html">nav components</a>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card text-center">
|
|
<div class="card-header card-header-rose">
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#0">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#0">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#0">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-rose"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card text-center">
|
|
<div class="card-header">
|
|
<ul class="nav nav-pills card-header-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#0">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#0">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#0">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</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"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills card-header-pills"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h2 id="images-1">Images</h2>
|
|
<p>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
|
|
<h3 id="image-caps">Image caps</h3>
|
|
<p>Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card mb-3">
|
|
<img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" rel="nofollow" alt="Card image cap" />
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
</div>
|
|
<img class="card-img-bottom" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" rel="nofollow" alt="Card image cap" />
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card mb-3"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<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-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-bottom"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="image-overlays">Image overlays</h3>
|
|
<p>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card bg-dark text-white">
|
|
<img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" rel="nofollow" alt="Card image" />
|
|
<div class="card-img-overlay">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text">Last updated 3 mins ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-dark text-white"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"Card image"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-img-overlay"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h2 id="examples">Examples</h2>
|
|
<h3 id="blog-cards----pro-component">Blog Cards - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-blog">
|
|
<div class="card-header card-header-image">
|
|
<a href="#pablo">
|
|
<img class="img" src="https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" rel="nofollow" />
|
|
<div class="card-title">
|
|
This Summer Will be Awesome
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-category text-info">Fashion</h6>
|
|
<p class="card-description">
|
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-blog"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-image"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"img"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">rel=</span><span class="s">"nofollow"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
|
This Summer Will be Awesome
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-info"</span><span class="nt">></span>Fashion<span class="nt"></h6></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
|
Don<span class="ni">&apos;</span>t be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens<span class="ni">&#x2019;</span> bed design but the back is...
|
|
<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card bg-info">
|
|
<div class="card-body">
|
|
<h5 class="card-category card-category-social">
|
|
<i class="fa fa-twitter"></i> Twitter
|
|
</h5>
|
|
<h4 class="card-title">
|
|
<a href="#pablo">"You Don't Have to Sacrifice Joy to Build a Fabulous Business and Life"</a>
|
|
</h4>
|
|
<div class="card-stats">
|
|
<div class="author">
|
|
<a href="#pablo">
|
|
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" rel="nofollow" alt="..." class="avatar img-raised" />
|
|
<span>Tania Andrew</span>
|
|
</a>
|
|
</div>
|
|
<div class="stats ml-auto">
|
|
<i class="material-icons">favorite</i> 2.4K ·
|
|
<i class="material-icons">share</i> 45
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><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="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-category card-category-social"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span> Twitter
|
|
<span class="nt"></h5></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span><span class="ni">&quot;</span>You Don<span class="ni">&apos;</span>t Have to Sacrifice Joy to Build a Fabulous Business and Life<span class="ni">&quot;</span><span class="nt"></a></span>
|
|
<span class="nt"></h4></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-stats"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"avatar img-raised"</span><span class="nt">></span>
|
|
<span class="nt"><span></span>Tania Andrew<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats ml-auto"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>favorite<span class="nt"></i></span> 2.4K <span class="ni">&#xB7;</span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>share<span class="nt"></i></span> 45
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card">
|
|
<div class="card-body ">
|
|
<h6 class="card-category text-danger">
|
|
<i class="material-icons">trending_up</i> Trending
|
|
</h6>
|
|
<h4 class="card-title">
|
|
<a href="#pablo">To Grow Your Business Start Focusing on Your Employees</a>
|
|
</h4>
|
|
</div>
|
|
<div class="card-footer ">
|
|
<div class="author">
|
|
<a href="#pablo">
|
|
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" rel="nofollow" alt="..." class="avatar img-raised" />
|
|
<span>Lord Alex</span>
|
|
</a>
|
|
</div>
|
|
<div class="stats ml-auto">
|
|
<i class="material-icons">favorite</i> 342 ·
|
|
<i class="material-icons">chat_bubble</i> 45
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><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-body "</span><span class="nt">></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-danger"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>trending_up<span class="nt"></i></span> Trending
|
|
<span class="nt"></h6></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>To Grow Your Business Start Focusing on Your Employees<span class="nt"></a></span>
|
|
<span class="nt"></h4></span>
|
|
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer "</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"avatar img-raised"</span><span class="nt">></span>
|
|
<span class="nt"><span></span>Lord Alex<span class="nt"></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats ml-auto"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>favorite<span class="nt"></i></span> 342 <span class="ni">&#xB7;</span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>chat_bubble<span class="nt"></i></span> 45
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="profile-card----pro-component">Profile Card - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-profile ml-auto mr-auto" style="max-width: 360px">
|
|
<div class="card-header card-header-image">
|
|
<a href="#pablo">
|
|
<img class="img" src="https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" rel="nofollow" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body ">
|
|
<h4 class="card-title">Alec Thompson</h4>
|
|
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
|
|
</div>
|
|
<div class="card-footer justify-content-center">
|
|
<a href="#pablo" class="btn btn-just-icon btn-twitter btn-round">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
<a href="#pablo" class="btn btn-just-icon btn-facebook btn-round">
|
|
<i class="fa fa-facebook-square"></i>
|
|
</a>
|
|
<a href="#pablo" class="btn btn-just-icon btn-google btn-round">
|
|
<i class="fa fa-google"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-profile ml-auto mr-auto"</span> <span class="na">style=</span><span class="s">"max-width: 360px"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-image"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"img"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">rel=</span><span class="s">"nofollow"</span><span class="nt">></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body "</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Alec Thompson<span class="nt"></h4></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-gray"</span><span class="nt">></span>CEO / Co-Founder<span class="nt"></h6></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer justify-content-center"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-twitter btn-round"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-facebook btn-round"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-facebook-square"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-google btn-round"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-google"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="full-background-card----pro-component">Full Background Card - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-background" style="background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
|
|
<div class="card-body">
|
|
<h6 class="card-category text-info">Productivy Apps</h6>
|
|
<a href="#pablo">
|
|
<h3 class="card-title">The Best Productivity Apps on Market</h3>
|
|
</a>
|
|
<p class="card-description">
|
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
|
</p>
|
|
<a href="#pablo" class="btn btn-white btn-link">
|
|
<i class="material-icons">subject</i> Read Article
|
|
</a>
|
|
<a href="#pablo" class="btn btn-white btn-link">
|
|
<i class="material-icons">watch_later</i> Watch Later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-background"</span> <span class="na">style=</span><span class="s">"background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-info"</span><span class="nt">></span>Productivy Apps<span class="nt"></h6></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</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>The Best Productivity Apps on Market<span class="nt"></h3></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
|
<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-link"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>subject<span class="nt"></i></span> Read Article
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-link"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>watch_later<span class="nt"></i></span> Watch Later
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="pricing-card----pro-component">Pricing Card - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-4 ml-auto mr-auto">
|
|
<div class="card card-pricing bg-primary">
|
|
<div class="card-body ">
|
|
<div class="card-icon">
|
|
<i class="material-icons">business</i>
|
|
</div>
|
|
<h3 class="card-title">$69</h3>
|
|
<p class="card-description">
|
|
This is good if your company size is between 11 and 99 Persons.
|
|
</p>
|
|
<a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 ml-auto mr-auto"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-pricing bg-primary"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"card-body "</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-icon"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>business<span class="nt"></i></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>$69<span class="nt"></h3></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
|
This is good if your company size is between 11 and 99 Persons.
|
|
<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-round"</span><span class="nt">></span>Choose Plan<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
<h3 id="rotating-card----pro-component">Rotating Card - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>Pro</b> Component</a></h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6 ml-auto mr-auto">
|
|
<div class="rotating-card-container">
|
|
<div class="card card-rotate card-background">
|
|
<div class="front front-background" style="background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
|
|
<div class="card-body">
|
|
<h6 class="card-category">Full Background Card</h6>
|
|
<a href="#pablo">
|
|
<h3 class="card-title">This Background Card Will Rotate on Hover</h3>
|
|
</a>
|
|
<p class="card-description">
|
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="back back-background" style="background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Manage Post
|
|
</h5>
|
|
<p class="card-description">As an Admin, you have shortcuts to edit, view or delete the posts.</p>
|
|
<div class="footer justify-content-center">
|
|
<a href="#pablo" class="btn btn-info btn-just-icon btn-fill btn-round">
|
|
<i class="material-icons">subject</i>
|
|
</a>
|
|
<a href="#pablo" class="btn btn-success btn-just-icon btn-fill btn-round btn-wd">
|
|
<i class="material-icons">mode_edit</i>
|
|
</a>
|
|
<a href="#pablo" class="btn btn-danger btn-just-icon btn-fill btn-round">
|
|
<i class="material-icons">delete</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 ml-auto mr-auto"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"rotating-card-container"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-rotate card-background"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"front front-background"</span> <span class="na">style=</span><span class="s">"background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Full Background Card<span class="nt"></h6></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</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>This Background Card Will Rotate on Hover<span class="nt"></h3></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
|
<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"back back-background"</span> <span class="na">style=</span><span class="s">"background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
|
Manage Post
|
|
<span class="nt"></h5></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>As an Admin, you have shortcuts to edit, view or delete the posts.<span class="nt"></p></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"footer justify-content-center"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-info btn-just-icon btn-fill btn-round"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>subject<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-just-icon btn-fill btn-round btn-wd"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>mode_edit<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-just-icon btn-fill btn-round"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>delete<span class="nt"></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets-old/js/core/jquery.min.js"></script>
|
|
<script src="../../../assets-old/js/core/popper.min.js"></script>
|
|
<script src="../../../assets-old/js/core/bootstrap-material-design.min.js"></script>
|
|
<script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Plugin for the momentJs -->
|
|
<script src="../../../assets-old/js/plugins/moment.min.js"></script>
|
|
<!-- Plugin for Sweet Alert -->
|
|
<script src="../../../assets-old/js/plugins/sweetalert2.js"></script>
|
|
<!-- Forms Validations Plugin -->
|
|
<script src="../../../assets-old/js/plugins/jquery.validate.min.js"></script>
|
|
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
|
|
<script src="../../../assets-old/js/plugins/jquery.bootstrap-wizard.js"></script>
|
|
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-selectpicker.js"></script>
|
|
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-datetimepicker.min.js"></script>
|
|
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
|
|
<script src="../../../assets-old/js/plugins/jquery.dataTables.min.js"></script>
|
|
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-tagsinput.js"></script>
|
|
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
|
|
<script src="../../../assets-old/js/plugins/jasny-bootstrap.min.js"></script>
|
|
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
|
|
<script src="../../../assets-old/js/plugins/fullcalendar.min.js"></script>
|
|
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
|
|
<script src="../../../assets-old/js/plugins/jquery-jvectormap.js"></script>
|
|
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
|
|
<script src="../../../assets-old/js/plugins/nouislider.min.js"></script>
|
|
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
|
<!-- Library for adding dinamically elements -->
|
|
<script src="../../../assets-old/js/plugins/arrive.min.js"></script>
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<!-- Chartist JS -->
|
|
<script src="../../../assets-old/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../../../assets-old/js/material-dashboard.min.js?v=2.1.2" type="text/javascript"></script>
|
|
<!-- Sharrre libray -->
|
|
<script src="../../../assets-old/demo/jquery.sharrre.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#facebook').sharrre({
|
|
share: {
|
|
facebook: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('facebook');
|
|
},
|
|
template: '<i class="fab fa-facebook-f"></i> Facebook',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#google').sharrre({
|
|
share: {
|
|
googlePlus: true
|
|
},
|
|
enableCounter: false,
|
|
enableHover: false,
|
|
enableTracking: true,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('googlePlus');
|
|
},
|
|
template: '<i class="fab fa-google-plus"></i> Google',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#twitter').sharrre({
|
|
share: {
|
|
twitter: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
buttons: {
|
|
twitter: {
|
|
via: 'CreativeTim'
|
|
}
|
|
},
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('twitter');
|
|
},
|
|
template: '<i class="fab fa-twitter"></i> Twitter',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
|
|
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
</script>
|
|
<noscript>
|
|
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
|
|
</noscript>
|
|
<script>
|
|
$(document).ready(function() {
|
|
if ($('.card-header.card-chart').length != 0) {
|
|
md.initDashboardPageCharts();
|
|
}
|
|
|
|
if ($('#websiteViewsChart').length != 0) {
|
|
md.initDocumentationCharts();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if ($('.datetimepicker').length != 0) {
|
|
md.initFormExtendedDatetimepickers();
|
|
}
|
|
if ($('#fullCalendar').length != 0) {
|
|
md.initFullCalendar();
|
|
}
|
|
|
|
if ($('.slider').length != 0) {
|
|
md.initSliders();
|
|
}
|
|
|
|
// Activate the tooltips
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
|
|
// Activate Popovers
|
|
$('[data-toggle="popover"]').popover();
|
|
|
|
// Vector map
|
|
if ($('#worldMap').length != 0) {
|
|
md.initVectorMap();
|
|
}
|
|
|
|
if ($('#RegisterValidation').length != 0) {
|
|
|
|
setFormValidation('#RegisterValidation');
|
|
|
|
function setFormValidation(id) {
|
|
$(id).validate({
|
|
highlight: function(element) {
|
|
$(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
|
|
$(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
|
|
},
|
|
success: function(element) {
|
|
$(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
|
|
$(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
|
|
},
|
|
errorPlacement: function(error, element) {
|
|
$(element).closest('.form-group').append(error);
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
// FileInput
|
|
$('.form-file-simple .inputFileVisible').click(function() {
|
|
$(this).siblings('.inputFileHidden').trigger('click');
|
|
});
|
|
|
|
$('.form-file-simple .inputFileHidden').change(function() {
|
|
var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
|
|
$(this).siblings('.inputFileVisible').val(filename);
|
|
});
|
|
|
|
$('.form-file-multiple .inputFileVisible, .form-file-multiple .input-group-btn').click(function() {
|
|
$(this).parent().parent().find('.inputFileHidden').trigger('click');
|
|
$(this).parent().parent().addClass('is-focused');
|
|
});
|
|
|
|
$('.form-file-multiple .inputFileHidden').change(function() {
|
|
var names = '';
|
|
for (var i = 0; i < $(this).get(0).files.length; ++i) {
|
|
if (i < $(this).get(0).files.length - 1) {
|
|
names += $(this).get(0).files.item(i).name + ',';
|
|
} else {
|
|
names += $(this).get(0).files.item(i).name;
|
|
}
|
|
}
|
|
$(this).siblings('.input-group').find('.inputFileVisible').val(names);
|
|
});
|
|
|
|
$('.form-file-multiple .btn').on('focus', function() {
|
|
$(this).parent().siblings().trigger('focus');
|
|
});
|
|
|
|
$('.form-file-multiple .btn').on('focusout', function() {
|
|
$(this).parent().siblings().trigger('focusout');
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|