Elevation

Elevation is an add-on utility of PrimeFlex and used to specify the separation between surfaces and elements along the z-axis.

p-shadow-1

p-shadow-2

p-shadow-3

p-shadow-4

p-shadow-5

p-shadow-6

p-shadow-7

p-shadow-8

p-shadow-9

p-shadow-10

p-shadow-11

p-shadow-12

p-shadow-13

p-shadow-14

p-shadow-15

p-shadow-16

p-shadow-17

p-shadow-18

p-shadow-19

p-shadow-20

p-shadow-21

p-shadow-22

p-shadow-23

p-shadow-24

Documentation
Source

Getting Started

Elevation is added to an element using the .p-shadow-{level} class.


<div class="p-shadow-1"></div>

Levels

There are 24 depths available varying from 1 to 24.


<div class="p-shadow-1"></div>
<div class="p-shadow-24"></div>

Customization

A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.


<div class="p-grid">
    <ui:repeat var="level" value="[java.lang.Object@2e404161, java.lang.Object@20da03bd, java.lang.Object@491abf79, java.lang.Object@785b2594, java.lang.Object@543c28b7, java.lang.Object@240b0e66, java.lang.Object@38768ce9, java.lang.Object@19a079f6, java.lang.Object@2c6c83e5, java.lang.Object@50e8c030, java.lang.Object@5c750f00, java.lang.Object@4680a2b1, java.lang.Object@ebb622f, java.lang.Object@18c4da88, java.lang.Object@6c3ddb9f, java.lang.Object@2f6b7983, java.lang.Object@7a94cc5b, java.lang.Object@44ba491b, java.lang.Object@46598330, java.lang.Object@328a4d19, java.lang.Object@6ea0a907, java.lang.Object@78c4d759, java.lang.Object@720e9b72, java.lang.Object@128ce2af]" varStatus="iterator">
        <div class="p-col">
            <div class="box p-shadow-1">
                p-shadow-#{iterator.index + 1}
            </div>
        </div>
    </ui:repeat>
</div>

Input Style

Free Themes

Legacy Free Themes

PREMIUM TEMPLATES

Elevation

Getting Started

Levels

Customization