Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

HACC Class Guides Style Cheat Sheet

Image Alignment

The detective is aligned to the right. I'm going to put a whole bunch of text here so you can see what happens when it goes onto the next line. There's really no point in reading all of this, but if you have done so then I should probably reward you somehow. Please contact the department chair to let them know that I need a budget with which to provide a gift card. I'm sure it won't be a problem. 

The graduation cap is aligned to the left I'm going to put a whole bunch of text here so you can see what happens when it goes onto the next line. There's really no point in reading all of this, but if you have done so then I should probably reward you somehow. Please contact the department chair to let them know that I need a budget with which to provide a gift card. I'm sure it won't be a problem. 

Images Shapes

decorativeThe first image has rounded corners. You can achieve this look by adding class="img-rounded" in the rich-text source editor. Example:

<img alt="decorative" class="img-rounded" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/1167/images/strangeplanetcomic_chaos.png">

 

 

decorativeThe second image is a circle. You can achieve this look by adding class="img-circle" in the rich-text source editor. Example:

<img alt="decorative" class="img-circle" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/1167/images/strangeplanetcomic_chaos.png">

Figure Captions

Sandy Lerner
Sandy Lerner, co-founder of Cisco, founder of Urban Decay, and my hero

One way to add some information to an image without going into a full description is to add a figure caption. It requires a little bit of coding, and will make the image always go to the right, but is a nice way to include image attribution or context!

How To Do It:

After you insert your image, you need to edit the html using the source code editor to include the following tags around your img tag.

<figure><img alt="your alt text" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/1167/images/picture.png" />
<figcaption>
The text you would like to display under your image.</figcaption>
</figure>