Figure Component

The Figure component adds a box to the page, with a user-selected photo and caption. The box can be set to 33%, 50% or 100% width. It also has a float setting so text can wrap around it. This component was designed to add an image with or without a caption to a page.

Update: Added on 8/12/2026 is the new ability for the Figure component to go edge-to-edge of the browser window, effectively breaking outside of the normal content boundary. This new feature can be used for dramatic effect or to spice up the content that it accompanies. This feature should only be used on pages that do not have a right-hand column or side navigation enabled.

Demo

Instructions for use

While editing a page:

1. Move your cursor to the area of the page you wish to add the component.
2. Click the "Insert Component" button in the editor toolbar.
3. Select the Figure component from the list.
4. Select a high quality photo that will open in a new tab when clicked.
5. Select a lower quality photo for better load time on the web, this will display in the figure itself.
6. Enter alt text for the photo.
7. Enter caption text.
8. Enter photo credit.
9. Choose whether to display the caption or not.
10. Select the figure width.
11. Select optional float.
12. Click the "Save" button.

Instructions for edge-to-edge functionality

While editing a page:

1. Move your cursor to the area of the page you wish to add the component.
2. Click the "Insert Component" button in the editor toolbar.
3. Select the Figure component from the list.
4. Select a high quality photo that will open in a new tab when clicked.
5. Select a lower quality photo for better load time on the web, this will display in the figure itself.
6. Enter alt text for the photo
7. Enter caption text
8. Enter photo credit.
9. Choose whether to display the caption or not
10. Ignore the figure width option
11. Ignore the float option
12. Select "Yes" for the Edge-to-Edge Display
13. Choose the color for the caption dropshadow - the default is Spartan Green. This option has no effect if you choose not to display the caption.
14. Choose the image shape for the right-side of the image - the default is a forward slash shape. This option has no effect if you choose not to display the caption, the image will simply extend from one edge of the screen to the other.
15. Click the "Save" button
16. The figure will not display edge-to-edge while in edit mode but should do so once the page is saved.