Elevation is an add-on utility of PrimeFlex and used to specify the separation between surfaces and elements along the z-axis.
Elevation is added to an element using the .p-shadow-{level} class.
<div class="p-shadow-1"></div>
There are 24 depths available varying from 1 to 24.
<div class="p-shadow-1"></div>
<div class="p-shadow-24"></div>
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@598892e2, java.lang.Object@2e9f878c, java.lang.Object@286bc90b, java.lang.Object@7801607e, java.lang.Object@6503e21e, java.lang.Object@3772bad5, java.lang.Object@41a70ea1, java.lang.Object@3256847b, java.lang.Object@48bf833d, java.lang.Object@6ab92ced, java.lang.Object@1392f51d, java.lang.Object@1561ce48, java.lang.Object@21f301b2, java.lang.Object@28e9f25, java.lang.Object@6b0a874, java.lang.Object@1db82564, java.lang.Object@24ff59f0, java.lang.Object@527e9dfd, java.lang.Object@518e7cce, java.lang.Object@d41f09e, java.lang.Object@53af081f, java.lang.Object@7518e6e2, java.lang.Object@57d28c83, java.lang.Object@559553e7]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>