Linux ip-172-26-7-228 5.4.0-1103-aws #111~18.04.1-Ubuntu SMP Tue May 23 20:04:10 UTC 2023 x86_64
Your IP : 3.145.9.174
<div class="block-header">
<h2>COMPONENT - CARDS</h2>
</div>
<div class="card">
<div class="header">
<h2>BASIC CARD</h2>
</div>
<div class="body">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active"><a href="" data-target="#preview_1" data-toggle="tab">PREVIEW</a></li>
<li role="presentation" class=""><a href="" data-target="#html_1" data-toggle="tab">HTML</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="preview_1">
<div class="card">
<div class="header">
<h2>
Basic Card Title <small>Description text here...</small>
</h2>
<ul class="header-dropdown m-r--5">
<li>
<a href="javascript:void(0);">
<i class="material-icons">mic</i>
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class="waves-effect waves-block">Action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Another action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="html_1">
<pre class="brush: html">
<div class="card">
<div class="header">
<h2>
Basic Card Title <small>Description text here...</small>
</h2>
<ul class="header-dropdown m-r--5">
<li>
<a href="javascript:void(0);">
<i class="material-icons">mic</i>
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class="waves-effect waves-block">Action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Another action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="card">
<div class="header">
<h2>NO HEADER</h2>
</div>
<div class="body">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active"><a href="" data-target="#preview_2" data-toggle="tab">PREVIEW</a></li>
<li role="presentation" class=""><a href="" data-target="#html_2" data-toggle="tab">HTML</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="preview_2">
<div class="card">
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="html_2">
<pre class="brush: html">
<div class="card">
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="card">
<div class="header">
<h2>COLORED CARD</h2>
</div>
<div class="body">
<div class="content">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active"><a href="" data-target="#preview_3" data-toggle="tab">PREVIEW</a></li>
<li role="presentation" class=""><a href="" data-target="#html_3" data-toggle="tab">HTML</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="preview_3">
<div class="card">
<div class="header bg-orange">
<h2>
Orange - Title <small>Description text here...</small>
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class="waves-effect waves-block">Action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Another action</a></li>
<li><a href="javascript:void(0);" class="waves-effect waves-block">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="html_3">
<pre class="brush: html">
<div class="card">
<div class="header bg-orange">
<h2>
Orange - Title <small>Description text here...</small>
</h2>
<ul class="header-dropdown">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Action</a></li>
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Another action</a></li>
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
|