adrigm
5/22/2018 - 1:52 PM

Widget draft HTML

<div id="card-1" class="card card-light agm-card-widget" data-title="Soy el titulo">
                <div class="card-header card-move">
                    <h3 class="card-title card-handle"><i class="icon ion-md-heart"></i> <span>Live Feeds</span></h3>
                    <div class="card-header-tabs">
                        <ul class="nav nav-tabs nav-tabs-transparent indicator-primary" role="tablist">
                            <li class="nav-item"><a class="nav-link withoutripple" href="#casa" aria-controls="casa" role="tab" data-toggle="tab"><i class="zmdi zmdi-home"></i> <span class="d-none d-sm-inline">Home</span></a></li>
                            <li class="nav-item"><a class="nav-link withoutripple active" href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><i class="zmdi zmdi-account"></i> <span class="d-none d-sm-inline">Profile</span></a></li>
                            <li class="nav-item"><a class="nav-link withoutripple" href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><i class="zmdi zmdi-settings"></i> <span class="d-none d-sm-inline">Settings</span></a></li>
                        </ul>
                    </div>
                    <div class="card-header-toggle withripple">
                        <div class="togglebutton togglebutton-right togglebutton-sm">
                            <label class="d-flex justify-content-between align-items-center">
                                <i class="fa fa-send"></i> Real Time <input id="ms-slidebar-icons-mode" type="checkbox"> 
                            </label>
                        </div>
                    </div>
                    <div class="card-btns">
                        <a href="#card-1" class="card-btn card-btn-edit withripple"></a>
                        <a data-toggle="collapse" href="#card-widget-collapse-1" role="button" aria-expanded="true" aria-controls="card-widget-collapse-1" class="card-btn card-btn-collapse withripple"></a>
                        <a href="#card-1" class="card-btn card-btn-expand withripple"></a>
                        <a href="#card-1" class="card-btn card-btn-close withripple"></a>
                    </div>
                </div>
                <div class="collapse show" id="card-widget-collapse-1">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-transparent indicator-primary nav-tabs-full" role="tablist">
                        <li class="nav-item"><a class="nav-link withoutripple" href="#casa" aria-controls="casa" role="tab" data-toggle="tab"><i class="zmdi zmdi-home"></i> <span class="d-none d-sm-inline">Home</span></a></li>
                        <li class="nav-item"><a class="nav-link withoutripple active" href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><i class="zmdi zmdi-account"></i> <span class="d-none d-sm-inline">Profile</span></a></li>
                        <li class="nav-item"><a class="nav-link withoutripple" href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><i class="zmdi zmdi-email"></i> <span class="d-none d-sm-inline">Messages</span></a></li>
                        <li class="nav-item"><a class="nav-link withoutripple" href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><i class="zmdi zmdi-settings"></i> <span class="d-none d-sm-inline">Settings</span></a></li>
                    </ul>

                    <div class="card-body">
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade" id="casa">
                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad tempore quibusdam placeat dolorem aspernatur temcto provident ab. Officiis repellendus at sed sint sit nisi laboriosam voluptatum natus quas eos!</p>
                            </div>
                            <div role="tabpanel" class="tab-pane fade active show" id="profile">
                                ...
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="messages">
                                ...
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="settings">
                                ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>