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@5f7b36f7, java.lang.Object@572a61a3, java.lang.Object@12cecf09, java.lang.Object@6d3165f1, java.lang.Object@6b7b2a2e, java.lang.Object@6f58699b, java.lang.Object@b8a45fe, java.lang.Object@6d72a793, java.lang.Object@5f6ada49, java.lang.Object@7352748e, java.lang.Object@2a2e6aaf, java.lang.Object@52980e46, java.lang.Object@5b292ece, java.lang.Object@3b3fd721, java.lang.Object@629da9fb, java.lang.Object@70e571d0, java.lang.Object@62a86e5c, java.lang.Object@276b2bf7, java.lang.Object@28369c90, java.lang.Object@738603b7, java.lang.Object@52fd4915, java.lang.Object@2c37e42e, java.lang.Object@30793f24, java.lang.Object@73211927]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>