SLDS - Most commonly used classes

<!-- SIZES -->
<!--['none', 'xxx-small', 'xx-small', 'x-small',
 'small', 'medium', 'large', 'x-large', 'xx-large']-->

<!-- LOCATIONS -->
<!--['top', 'left', 'bottom', 'right',
 'horizontal', 'vertical', 'around']-->

<!-- SYNTAX -->
<div class="slds-var-p-{location}_{size}"></div>

<!-- EXAMPLE -->
<div class="slds-var-p-top_small"></div>
        

 
<!-- SIZES-->
<!--['none', 'xxx-small', 'xx-small', 'x-small',
 'small', 'medium', 'large', 'x-large', 'xx-large']-->

<!-- LOCATIONS -->
<!--['top', 'left', 'bottom', 'right', 
'horizontal', 'vertical', 'around']-->

<!-- SYNTAX -->
<div class="slds-var-m-{location}_{size}"></div>

<!-- EXAMPLE -->
<div class="slds-var-m-top_small"></div>
        

 
<!-- position -->
<!--['fixed', 'absolute', 'relative', 'static ']-->

<!-- SYNTAX -->
<div class="slds-is-{postion}"></div>

<!-- EXAMPLE -->
<div class="slds-is-fixed"></div>

<!-- sizes -->
<!--['small', 'medium', 'large']-->

<!-- element -->
<!--['body', 'heading']-->

<!-- SYNTAX -->
<div class="slds-text-{element}_{size}"></div>

<!-- EXAMPLE -->
<div class="slds-text-body_small"></div>

 
<!-- position -->
<!--['left', 'right', 'center']-->

<!-- SYNTAX -->
<div class="slds-text-align_{position}"></div>

<!-- EXAMPLE -->
<div class="slds-text-align_left"></div>
        

 
<!-- type -->
<!--['hide', 'show']-->

<!-- SYNTAX -->
<div class="slds-{type}"></div>

<!-- EXAMPLE -->
<div class="slds-hide"></div>