Image Styles: Shadow

Ready

HTML
View
Context
Info
Notes


        
        <div class="row">
    <div class="col-md-4 col-sm-8">
        <img class="shadow x-large" src="https://img.freepik.com/free-photo/young-handsome-physician-medical-robe-with-stethoscope_1303-17818.jpg" />
    </div>
</div>


        <div class="row">
    <div class="col-md-4 col-sm-8">
        <img class="shadow x-large" src="https://img.freepik.com/free-photo/young-handsome-physician-medical-robe-with-stethoscope_1303-17818.jpg"/>
    </div>
</div>


        
            
            /* No context defined. */

Handle: @image-styles--shadow
Variants (6): Default , Border , Combo , Full Width , Rounded , Shadow
Preview:
- With layout
- Component only
Filesystem Path: assets/hg-mercury-theme-engine/styleguide/01-base/image-styles/image-styles--shadow.hbs

Customizaton via CSS Classes

The following css classes are available to adjust styles on inline images

shadow - applies a basic box shadow
shadow large - applies a box shadow using treatment: 0 6px 14px rgba(0, 0, 0, 0.15)
shadow x-large - applies a box shadow using treatment: 0 9px 15px rgba(0, 0, 0, 0.2)
shadow xx-large - applies a box shadow using treatment: 0 15px 40px rgba(0, 0, 0, 0.25)
rounded - applies a border radius
border - applies a border
full-width - allows an image to scale full width of its parent container