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@3dc7dae2, java.lang.Object@5f73ed72, java.lang.Object@50fe1386, java.lang.Object@68a29f26, java.lang.Object@6b31481a, java.lang.Object@2b693073, java.lang.Object@b2b64bb, java.lang.Object@770c8157, java.lang.Object@161c7634, java.lang.Object@7414262c, java.lang.Object@24ca9aa9, java.lang.Object@375fb15e, java.lang.Object@4287cc57, java.lang.Object@1777a76d, java.lang.Object@679878f8, java.lang.Object@2d87e014, java.lang.Object@511e6487, java.lang.Object@7b78fd06, java.lang.Object@5f830529, java.lang.Object@4d96c98d, java.lang.Object@6f8eb6e4, java.lang.Object@5322f6de, java.lang.Object@14cf0bde, java.lang.Object@6f6e626b]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>