# <i class="fa fa-image"></i> Images Images for the website are located in the images folder within the Fishbowl theme directory. **/themes/custom/fishbowl/images/** ## Image Styles The following classes can be added to images throughout the website to apply the properties listed next to the class: | Class | Width | Max Width | Margin | Additional Properties | | ---: | :---: | :---: | :---: | :---: | | `.icn` | `90%` | `85px` | <span class="text-nowrap">`0 auto`</span> | - | | `.sm` | `90%` | `150px` | <span class="text-nowrap">`0 auto`</span> | - | | `.md` | `90%` | `250px` | <span class="text-nowrap">`0 auto`</span> | - | | `.lg` | `90%` | `350px` | <span class="text-nowrap">`0 auto`</span> | - | | `.xl` | `90%` | `550px` | <span class="text-nowrap">`10px auto`</span> | - | | `.xxl` | `90%` | `750px` | <span class="text-nowrap">`10px auto`</span> | - | | `.full` | `90%` | `90%` | <span class="text-nowrap">`20px auto`</span> | - | | `.fullsize` | `100%` | `100%` | <span class="text-nowrap">`20px auto`</span> | - | | `.margin-10` | - | - | - | `margin: 10px` | | `.margin-20` | - | - | - | `margin: 20px` | | `.margin-30` | - | - | - | `margin: 30px` | | <span class="text-nowrap">`.margin-top-10`</span> | - | - | - | `margin-top: 10px` | | <span class="text-nowrap">`.margin-top-20`</span> | - | - | - | `margin-top: 20px` | | <span class="text-nowrap">`.margin-top-30`</span> | - | - | - | `margin-top: 30px` | | <span class="text-nowrap">`.margin-bottom-10`</span> | - | - | - | `margin-bottom: 10px` | | <span class="text-nowrap">`.margin-bottom-20`</span> | - | - | - | `margin-bottom: 20px` | | <span class="text-nowrap">`.margin-bottom-30`</span> | - | - | - | `margin-bottom: 30px` | | <span class="text-nowrap">`.margin-left-10`</span> | - | - | - | `margin-left: 10px` | | <span class="text-nowrap">`.margin-left-20`</span> | - | - | - | `margin-left: 20px` | | <span class="text-nowrap">`.margin-left-30`</span> | - | - | - | `margin-left: 30px` | | <span class="text-nowrap">`.margin-right-10`</span> | - | - | - | `margin-right: 10px` | | <span class="text-nowrap">`.margin-right-20`</span> | - | - | - | `margin-right: 20px` | | <span class="text-nowrap">`.margin-right-30`</span> | - | - | - | `margin-right: 30px` | | <span class="text-nowrap">`.float-left`</span> | - | - | - | `float: left` | | <span class="text-nowrap">`.float-right`</span> | - | - | - | `float: right` | | `.left` | - | - | <span class="text-nowrap">`0 auto 0 0`</span> | <span class="text-nowrap">Mobile margin is `0 auto`</span> | | `.right` | - | - | <span class="text-nowrap">`0 0 0 auto`</span> | <span class="text-nowrap">Mobile margin is `0 auto`</span> | | `.center` | - | - | `0 auto` | - | | `.is-rounded` | - | - | - | `border-radius: 6px` | | `.is-rounded-more` | - | - | - | `border-radius: 8px` | | `.is-circle` | - | - | - | `border-radius: 50%` | | `.is-shadowed` | - | - | - | `box-shadow: 0px 15px 25px rgba(50,50,93,.125), 0px 5px 15px rgba(0,0,0,.07)` | Example image tag with classes applied: ```htmlmixed= <img src="/path-to-images/utahjazz.jpg" class="lg is-rounded is-shadowed"> ``` ### More Styles - [Typography and Font](/s/OIswIUoER_etjPkMSULxcA)