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@79e784e7, java.lang.Object@2b7167fb, java.lang.Object@7d3c4510, java.lang.Object@896d418, java.lang.Object@4d93b951, java.lang.Object@6d7d41a7, java.lang.Object@72768ddd, java.lang.Object@4c7eb19f, java.lang.Object@1cf7c070, java.lang.Object@1b80ca30, java.lang.Object@5ddeb4f8, java.lang.Object@64150495, java.lang.Object@4643bc27, java.lang.Object@5b8f3f95, java.lang.Object@735e2968, java.lang.Object@3fa3ba3a, java.lang.Object@64da8b6d, java.lang.Object@460b63f4, java.lang.Object@449c0734, java.lang.Object@664c17f7, java.lang.Object@567d69b0, java.lang.Object@4bf4b448, java.lang.Object@6ff5afa5, java.lang.Object@6980fe03]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>