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@2c7e5686, java.lang.Object@441059fc, java.lang.Object@3855eaee, java.lang.Object@622d72c6, java.lang.Object@3c39d263, java.lang.Object@7a20a3a1, java.lang.Object@6d353491, java.lang.Object@6487c0b3, java.lang.Object@165fac8a, java.lang.Object@691d384b, java.lang.Object@2d481845, java.lang.Object@7790d707, java.lang.Object@1c400e83, java.lang.Object@1c1fb220, java.lang.Object@71781bd6, java.lang.Object@21d211, java.lang.Object@1c09f080, java.lang.Object@7de6cf93, java.lang.Object@4cf1cd52, java.lang.Object@424e3f87, java.lang.Object@11905abe, java.lang.Object@5a418548, java.lang.Object@1898580f, java.lang.Object@2b99fe9c]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>