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@391e6e11, java.lang.Object@33c65b41, java.lang.Object@67fe788c, java.lang.Object@23d4c2a0, java.lang.Object@69705e2d, java.lang.Object@68ed1c11, java.lang.Object@7cc32398, java.lang.Object@79073f62, java.lang.Object@126d9759, java.lang.Object@12e00c91, java.lang.Object@77da22b6, java.lang.Object@37e6ff00, java.lang.Object@494f61fa, java.lang.Object@5b5978c6, java.lang.Object@7d302e89, java.lang.Object@7daed0d0, java.lang.Object@4f5c2e2e, java.lang.Object@5f53e04b, java.lang.Object@236bc94e, java.lang.Object@2848b5a3, java.lang.Object@64bc3da, java.lang.Object@46da2ae0, java.lang.Object@3b86aacc, java.lang.Object@560ef5b2]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>