pip-webui/pip-webui-css/samples/css_components/empty.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Empty pages
</p>

<md-card style="min-height: 700px" class="lm0 layout-column layout-align-center-center flex">
    <div class="pip-empty" >

        <img src="images/ES_Timeline.svg" class="pip-pic">
        <div class="pip-text">
            Here you can plan the main events of the day and coordinate with your partners
        </div>
        <div class="pip-actions">
            <md-button class="md-accent">
                ADD EVENT
            </md-button>
            <md-button class="md-accent">
                ADD EVENT FROM CURRENT WEEK
            </md-button>
            <md-button class="md-accent">
                WORK ON GOALS
            </md-button>
        </div>

    </div>
</md-card>

<md-divider class="tm16 pip-list-divider"></md-divider>

<p class="text-subhead2 h48 m0 bm8">Example of empty page with scroll </p>
<md-card style="max-height: 300px" class="scroll lm0">
    <div class="pip-empty" >

        <img src="images/ES_Timeline.svg" class="pip-pic">
        <div class="pip-text">
            Here you can plan the main events of the day and coordinate with your partners
        </div>
        <div class="pip-actions">
            <md-button class="md-accent">
                ADD EVENT
            </md-button>
            <md-button class="md-accent">
                ADD EVENT FROM CURRENT WEEK
            </md-button>
            <md-button class="md-accent">
                WORK ON GOALS
            </md-button>
        </div>

    </div>
</md-card>

<md-divider class="tm16 pip-list-divider"></md-divider>

<p class="text-subhead2 h48 m0 bm8">You can also set the image as background</p>

<md-card style="min-height: 700px" class="lm0 layout-column layout-align-center-center flex">
    <div class="pip-empty" >
        <div style="background-image: url('images/ES_Timeline.svg');" class="pip-pic" ></div>

        <div class="pip-text">
            Here you can plan the main events of the day and coordinate with your partners
        </div>
        <div class="pip-actions">
            <md-button class="md-accent">
                ADD EVENT
            </md-button>
            <md-button class="md-accent">
                ADD EVENT FROM CURRENT WEEK
            </md-button>
            <md-button class="md-accent">
                WORK ON GOALS
            </md-button>
        </div>

    </div>
</md-card>

<md-divider class="tm16 pip-list-divider"></md-divider>

<p class="text-subhead2 h48 m0 bm8">
    To hide the images on the screen with width less than 768px append pip-no-image-sm near class pip-pic
</p>

<md-card style="min-height: 700px" class="lm0 layout-column layout-align-center-center flex">
    <div class="pip-empty" >
        <div style="background-image: url('images/ES_Timeline.svg');" class="pip-pic pip-no-image-sm" ></div>

        <div class="pip-text">
            Here you can plan the main events of the day and coordinate with your partners
        </div>
        <div class="pip-actions">
            <md-button class="md-accent">
                ADD EVENT
            </md-button>
            <md-button class="md-accent">
                ADD EVENT FROM CURRENT WEEK
            </md-button>
            <md-button class="md-accent">
                WORK ON GOALS
            </md-button>
        </div>

    </div>
</md-card>