Documentation
Basic
Extended
Blocks

Banner

Type one
Welcome to roolith CMS!

Start creating your first module, or manage your existing modules. It's easy! Then you can start creating page content and upload media files. 

<div class="block-banner">
    <div class="box box-large">
        <div class="box-body">
            <h5 class="block-banner-title">Welcome to roolith CMS!</h5>
            <p class="block-banner-text">
                Start creating your first module, or manage your existing modules. Its easy! Then you can
                start creating page content and upload media files.
            </p>

            <div class="button-bundle block-banner-buttons">
                <button class="button button-primary">Get Started</button>
                <button class="button button-text button-primary button-has-icon">
                    Learn More
                    <i class="iconoir-open-new-window"></i>
                </button>
            </div>
        </div>
    </div>
</div>
Type two
Create your first page!

Start creating your first module, or manage your existing modules. It's easy! Then you can start creating page content and upload media files.

Step 1
Create a module settings

Create a module settings for your module

Add Module Settings
Step 2
Create one or multiple module

Create modules based on your module settings

Add Module
Step 3
Create a page

Create a page based on your module and order your modules

Create Page 
<div class="block-banner">
    <div class="box box-large">
        <div class="box-body">
            <h5 class="block-banner-title">Create your first page!</h5>
            <p class="block-banner-text">
                Start creating your first module, or manage your existing modules. Its easy! Then you can
                start creating page content and upload media files.
            </p>

            <!-- Steps -->
            <div class="block-banner-steps">
                <div class="block-banner-step">
                    <span class="badge badge-secondary">Step 1</span>
                    <h6 class="block-banner-step-title">Create a module settings</h6>
                    <p class="block-banner-step-text">Create a module settings for your module</p>

                    <a href="" class="button button-secondary block-banner-step-button">
                        Add Module Settings
                    </a>
                </div>

                <div class="block-banner-step">
                    <span class="badge badge-success">Step 2</span>
                    <h6 class="block-banner-step-title">Create one or multiple module</h6>
                    <p class="block-banner-step-text">Create modules based on your module settings</p>

                    <a href="" class="button button-success block-banner-step-button">Add Module</a>
                </div>

                <div class="block-banner-step">
                    <span class="badge badge-primary">Step 3</span>
                    <h6 class="block-banner-step-title">Create a page</h6>
                    <p class="block-banner-step-text">
                        Create a page based on your module and order your modules
                    </p>

                    <a href="" class="button button-primary block-banner-step-button">Create Page</a>
                </div>
            </div>
            <!-- Steps -->
        </div>
    </div>
</div>