For documentation visit Lobicard webpage

Basic example

Card title

Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiCard();

Disable control buttons

Card title

Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiCard({
    reload: false,
    close: false,
    editTitle: false
});

Stateful. Saves its state in localStorage

Card title

Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiCard({
    stateful: true
});

Constrain card size

Unpin the card and try to resize it.

Card title

Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiCard({
    minWidth: 300,
    minHeight: 300,
    maxWidth: 600,
    maxHeight: 480
});

Load content from url

Load content from specified url and apply highlight code

Content from url

$('selector').on('loaded.lobiCard', function(ev, lobiCard){
    var $body = lobiCard.$el.find('.card-block');
    $body.html('<div class="highlight"><pre><code>' + $body.html() + '</code></pre></div>');
    hljs.highlightBlock($body.find('code')[0]);
});
$('selector').lobiCard({
    loadUrl: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css',
    bodyHeight: 400
});

Multiple cards with drag & drop

Drag cards by clicking on the headers

Default title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

primary title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Info title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Success title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Warning title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Danger title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Card title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Card title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
$('.card').lobiCard({
    sortable: true
});

Initialize with data-* attributes

This is card title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<div class="card lobicard" data-inner-id="lobicard-data-attributes" data-body-height="300" data-tooltips="false" data-min-width="400" data-resize="horizontal" data-close="{tooltip: 'custom'}">
    <div class="card-header">
       <div class="card-title">
           This is card title
       </div>
    </div>
    <div class="card-block">
        content
    </div>
</div>

Nested LobiCard example

LobiCard title

Nested LobiCard title

Card 1

Card title

Card 2

Card title

Card 3

Card title

Card 4

Card title

Card 5 
<div class="card card-info lobicard">
    <div class="card-header">
        <div class="card-title">
            <h4>LobiCard title</h4>
        </div>
    </div>
    <div class="card-block">
        <div class="card card-warning lobicard">
            <div class="card-header">
                <div class="card-title">
                    <h4>Nested LobiCard title</h4>
                </div>
            </div>
            <div class="card-block">
                Card 1
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="card lobicard" data-sortable="true">
                    <div class="card-header">
                        <div class="card-title">
                            <h4>Card title</h4>
                        </div>
                    </div>
                    <div class="card-block">
                        Card 2
                    </div>
                </div>
                <div class="card lobicard" data-sortable="true">
                    <div class="card-header">
                        <div class="card-title">
                            <h4>Card title</h4>
                        </div>
                    </div>
                    <div class="card-block">
                        Card 3
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card lobicard" data-sortable="true">
                    <div class="card-header">
                        <div class="card-title">
                            <h4>Card title</h4>
                        </div>
                    </div>
                    <div class="card-block">
                        Card 4
                    </div>
                </div>
                <div class="card lobicard" data-sortable="true">
                    <div class="card-header">
                        <div class="card-title">
                            <h4>Card title</h4>
                        </div>
                    </div>
                    <div class="card-block">
                        Card 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>