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@39dd4c27, java.lang.Object@54b4f6e5, java.lang.Object@17720cd7, java.lang.Object@474edd82, java.lang.Object@14a11d38, java.lang.Object@6751c297, java.lang.Object@60427e1e, java.lang.Object@51d10d59, java.lang.Object@4d858286, java.lang.Object@24a9a4db, java.lang.Object@57e88cde, java.lang.Object@e0af8bf, java.lang.Object@6f7ada4a, java.lang.Object@61c3402, java.lang.Object@1581c663, java.lang.Object@4c170b6c, java.lang.Object@7586202e, java.lang.Object@12ddb6b8, java.lang.Object@974c85e, java.lang.Object@7dccfe77, java.lang.Object@390f26b0, java.lang.Object@46183f5f, java.lang.Object@690139fa, java.lang.Object@73244deb]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>