Rabbie Theme

Paragraph style

Align Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.

Source code

Align Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.

Source code

Align Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.

Source code

Item list style

Lorem ipsum dolor.
Consectetur adipiscing.
Curabitur consequat bibendum
- Scelerisque sapien.
- Bibendum tellus.
- Pharetra quis.
Etiam aliquet orci.
Quisque volutpat.
Eget consectetur felis pharetra.

Source code

Lorem ipsum dolor.
Consectetur adipiscing.
Curabitur consequat bibendum
Scelerisque sapien.
Bibendum tellus.
Pharetra quis.
Etiam aliquet orci.
Quisque volutpat.
Eget consectetur felis pharetra.

Source code

Block list style

Block list 2 columns

Block Title 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus.
Block Title 02

Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus.
Block Title 03

Curabitur consequat bibendum tellus egestas porta. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus.
Block Title 04

Etiam aliquet orci scelerisque sapien placerat, id dapibus. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia. Proin adipiscing porta tellus.

Source code

Block list 3 columns

Block Title 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.
Vehicula lacinia.
Block Title 02

Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis. Curabitur pellentesque neque eget diam posuere porta.
Block Title 03

Curabitur consequat bibendum tellus egestas porta. Curabitur pellentesque neque eget diam posuere porta.
Block Title 04

Etiam aliquet orci scelerisque sapien placerat, id dapibus. Curabitur pellentesque neque eget diam posuere porta.
Block Title 05

Curabitur pellentesque neque eget diam posuere porta. Etiam aliquet orci scelerisque sapien placerat, id dapibus.
Vehicula lacinia.

Source code

<ul class="block-list row">
    <li class="col-3 col-xs-2 col-lg">
        <h4>Block Title 01</h4>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
    </li>

    <li class="col-3 col-xs-2 col-lg">
        <h4>Block Title 02</h4>
        <div>Quisque volutpat faucibus arcu, eget consectetur felis...</div>
    </li>

    <li class="col-3 col-xs-2 col-lg">
        <h4>Block Title 03</h4>
        <div>Curabitur consequat bibendum tellus egestas porta...</div>
    </li>

    <li class="col-3 col-xs-2 col-lg">
        <h4>Block Title 04</h4>
        <div>Etiam aliquet orci scelerisque sapien placerat, id dapibus...</div>
    </li>

    <li class="col-3 col-xs-2 col-lg">
        <h4>Block Title 05</h4>
        <div>Curabitur pellentesque neque eget diam posuere porta...<br>
Vehicula lacinia.</div>
    </li>
</ul>

Block list 4 columns

Block Title 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque eget diam posuere porta.
Block Title 02

Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis. Curabitur pellentesque neque eget.
Block Title 03

Curabitur consequat bibendum tellus egestas porta. Curabitur pellentesque neque eget.
Block Title 04

Etiam aliquet orci scelerisque sapien placerat, id dapibus. Neque eget diam posuere porta.
Block Title 05

Curabitur pellentesque neque eget diam posuere porta. Etiam aliquet orci scelerisque sapien placerat.
Block Title 06

Adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Etiam aliquet orci scelerisque.
Block Title 07

Pellentesque neque eget diam posuere porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Source code

<ul class="block-list row">
    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 01</h4>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 02</h4>
        <div>Quisque volutpat faucibus arcu, eget consectetur felis...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 03</h4>
        <div>Curabitur consequat bibendum tellus egestas porta...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 04</h4>
        <div>Etiam aliquet orci scelerisque sapien placerat, id dapibus...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 05</h4>
        <div>Curabitur pellentesque neque eget diam posuere porta...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 06</h4>
        <div>Adipiscing elit. Curabitur pellentesque neque eget...</div>
    </li>

    <li class="col-4 col-md-3 col-xs-2 col-lg">
        <h4>Block Title 07</h4>
        <div>Pellentesque neque eget diam posuere porta...</div>
    </li>
</ul>

Pagination style

Default Style

Source code

Button style

Default Style

Source code

Light Style

Source code

Block Style

Source code

Form element style

Default Style

Source code

<div class="form-group">
    <div class="col-1">
        <input type="text" id="type-text" placeholder="Your input placeholder">
    </div>
    <div class="col-1">
        <label for="type-checkbox01">Checkbox <input type="checkbox" id="type-checkbox01" checked="checked"></label>
        <label for="type-checkbox02">Checkbox <input type="checkbox" id="type-checkbox02"></label>
        <label for="type-checkbox03">Checkbox <input type="checkbox" id="type-checkbox03"></label>
        <label for="type-checkbox04">Checkbox <input type="checkbox" id="type-checkbox04"></label>
    </div>
    <div class="col-1">
        <label for="type-radio01">Input Radio <input type="radio" id="type-radio01" name="sample1" checked="checked"></label>
        <label for="type-radio02">Input Radio <input type="radio" id="type-radio02" name="sample1"></label>
        <label for="type-radio03">Input Radio <input type="radio" id="type-radio03" name="sample1"></label>
        <label for="type-radio04">Input Radio <input type="radio" id="type-radio04" name="sample1"></label>
    </div>
    <div class="col-2 col-md-2 col-xs-1">
        <select id="type-select">
            <option>Select</option>
            <option>Consectetur</option>
            <option>Adipiscing</option>
            <option>Scelerisque</option>
            <option>Volutpat</option>
            <option>Pharetra</option>
        </select>
    </div>
    <div class="col-1">
        <textarea rows="3" id="type-textarea" placeholder="Your textarea placeholder"></textarea>
    </div>
</div>

Border Style

Source code

<div class="form-group bdr-style">
    <div class="col-1">
        <input type="text" id="type-text" placeholder="Your input placeholder">
    </div>
    <div class="col-1">
        <label for="type-checkbox01">Checkbox <input type="checkbox" id="type-checkbox01" checked="checked"></label>
        <label for="type-checkbox02">Checkbox <input type="checkbox" id="type-checkbox02"></label>
        <label for="type-checkbox03">Checkbox <input type="checkbox" id="type-checkbox03"></label>
        <label for="type-checkbox04">Checkbox <input type="checkbox" id="type-checkbox04"></label>
    </div>
    <div class="col-1">
        <label for="type-radio01">Input Radio <input type="radio" id="type-radio01" name="sample1" checked="checked"></label>
        <label for="type-radio02">Input Radio <input type="radio" id="type-radio02" name="sample1"></label>
        <label for="type-radio03">Input Radio <input type="radio" id="type-radio03" name="sample1"></label>
        <label for="type-radio04">Input Radio <input type="radio" id="type-radio04" name="sample1"></label>
    </div>
    <div class="col-2 col-md-2 col-xs-1">
        <select id="type-select">
            <option>Select</option>
            <option>Consectetur</option>
            <option>Adipiscing</option>
            <option>Scelerisque</option>
            <option>Volutpat</option>
            <option>Pharetra</option>
        </select>
    </div>
    <div class="col-1">
        <textarea rows="3" id="type-textarea" placeholder="Your textarea placeholder"></textarea>
    </div>
</div>

Table style

Horizotal Style

Table Head 1	Table Head 2	Table Head 3	Table Head 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.

Source code

<div class="table-style">
    <table>
        <tr>
            <th>Table Head 1</th>
            <th>Table Head 2</th>
            <th>Table Head 3</th>
            <th>Table Head 4</th>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>
    </table>
</div>

Horizotal Style With Border

Table Head 1	Table Head 2	Table Head 3	Table Head 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.	Curabitur consequat bibendum tellus egestas porta.	Etiam aliquet orci scelerisque sapien placerat, id dapibus.

Source code

<div class="table-style-border">
    <table>
        <tr>
            <th>Table Head 1</th>
            <th>Table Head 2</th>
            <th>Table Head 3</th>
            <th>Table Head 4</th>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>

        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Quisque volutpat faucibus arcu, eget consectetur felis pharetra quis.</td>
            <td>Curabitur consequat bibendum tellus egestas porta.</td>
            <td>Etiam aliquet orci scelerisque sapien placerat, id dapibus.</td>
        </tr>
    </table>
</div>

Vertical Style

Table Head 1	Lorem ipsum dolor.	Ait amet, consectetur	Adipiscing elit.
Table Head 2	Volutpat faucibus	Felis pharetra quis	Sapien placerat
Table Head 3	Etiam aliquet orci	Eget consectetur	Bibendum tellus
Table Head 4	Orci scelerisque	Curabitur consequat	Tellus egestas porta

Source code

Vertical Style with border

Table Head 1	Lorem ipsum dolor.	Ait amet, consectetur	Adipiscing elit.
Table Head 2	Volutpat faucibus	Felis pharetra quis	Sapien placerat
Table Head 3	Etiam aliquet orci	Eget consectetur	Bibendum tellus
Table Head 4	Orci scelerisque	Curabitur consequat	Tellus egestas porta

Source code

<div class="table-style-border">
    <table class="ver-style">
        <tr>
            <th>Table Head 1</th>
            <td>Lorem ipsum dolor.</td>
            <td>Ait amet, consectetur</td>
            <td>Adipiscing elit.</td>
        </tr>

        <tr>
            <th>Table Head 2</th>
            <td>Volutpat faucibus</td>
            <td>Felis pharetra quis</td>
            <td>Sapien placerat</td>
        </tr>

        <tr>
            <th>Table Head 3</th>
            <td>Etiam aliquet orci</td>
            <td>Eget consectetur</td>
            <td>Bibendum tellus</td>
        </tr>

        <tr>
            <th>Table Head 4</th>
            <td>Orci scelerisque</td>
            <td>Curabitur consequat</td>
            <td>Tellus egestas porta</td>
        </tr>
    </table>
</div>

Box style

Paragraph style

Align Left

Align Center

Align Right

Item list style

Block list style

Block list 2 columns

Block Title 01

Block Title 02

Block Title 03

Block Title 04

Block list 3 columns

Block Title 01

Block Title 02

Block Title 03

Block Title 04

Block Title 05

Block list 4 columns

Block Title 01

Block Title 02

Block Title 03

Block Title 04

Block Title 05

Block Title 06

Block Title 07

Pagination style

Default Style

Button style

Default Style

Light Style

Block Style

Form element style

Default Style

Border Style

Table style

Horizotal Style

Horizotal Style With Border

Vertical Style

Vertical Style with border