<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">
&lt;div class="card"&gt;
    &lt;div class="header"&gt;
        &lt;h2&gt;
            Basic Card Title &lt;small&gt;Description text here...&lt;/small&gt;
        &lt;/h2&gt;
        &lt;ul class="header-dropdown m-r--5"&gt;
            &lt;li&gt;
                &lt;a href="javascript:void(0);"&gt;
                    &lt;i class="material-icons"&gt;mic&lt;/i&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
                &lt;a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                    &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="dropdown-menu pull-right"&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class="waves-effect waves-block"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class="waves-effect waves-block"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class="waves-effect waves-block"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="body"&gt;
        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.
    &lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="card"&gt;
    &lt;div class="body"&gt;
        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.
    &lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="card"&gt;
    &lt;div class="header bg-orange"&gt;
        &lt;h2&gt;
            Orange - Title &lt;small&gt;Description text here...&lt;/small&gt;
        &lt;/h2&gt;
        &lt;ul class="header-dropdown"&gt;
            &lt;li class="dropdown"&gt;
                &lt;a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                    &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="dropdown-menu pull-right"&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class=" waves-effect waves-block"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class=" waves-effect waves-block"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:void(0);" class=" waves-effect waves-block"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="body"&gt;
        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.
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                </div>
            </div>
        </div>
    </div>
</div>