---
# System prepended metadata

title: <i class="fa fa-image"></i> Images

---

# <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)

