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@337b5d53, java.lang.Object@2c26dbc4, java.lang.Object@39f64db7, java.lang.Object@6265d5ae, java.lang.Object@b9d9d74, java.lang.Object@11ff8f38, java.lang.Object@1a6fe345, java.lang.Object@566b8d03, java.lang.Object@317adc87, java.lang.Object@5c1103df, java.lang.Object@3901b6d3, java.lang.Object@33882765, java.lang.Object@54714b77, java.lang.Object@aaa5dd, java.lang.Object@34293c35, java.lang.Object@466886da, java.lang.Object@181c4793, java.lang.Object@4dcd9d00, java.lang.Object@3078d818, java.lang.Object@32a4c69b, java.lang.Object@48fe3f83, java.lang.Object@697a8e01, java.lang.Object@1fb4332e, java.lang.Object@b30ae5d]" varStatus="iterator">
<div class="p-col">
<div class="box p-shadow-1">
p-shadow-#{iterator.index + 1}
</div>
</div>
</ui:repeat>
</div>