Image Content
How to use
- Add an image and description to the TerminalFour Media Library.
- Select the image from the Media Library.
Mandatory
- An image. Horizontal images are best on most screens. LINK TO IMAGE INFO
- A descriptive alt tag for accessibility. LINK TO ALT TAG INFO
Options
- Link to a section.
- Link to an external URL.
- Resize and reposition as needed for smaller mobile devices, like phones. LINK TO RESIZE
When to use
On elevated pages that require design finesse and spacing needs to be controlled.
When to consider something else
Best practice is to support an image with a caption. Use the Image with Caption component, or use Page Content Only if control of spacing is unnecessary.
Accessibility tips
TBT - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The name of the piece of content or title tag value for your image | Required |
| Select Image | Select the image to be used | Required |
| Select Link | Select a location for the image to link (for internal links) | Optional |
| External URL | Optional | |
| Subhead | NA | |
| Alt Tag | Alternate text-its purpose is to describe the image textually so that search engines and screen readers can understand what the image is | Required |
| Enlarge Image | This is to resize image on small format mobile devices. | Optional |
| Image Horizontal Position | The list of options provided is to reposition image left or right when set to enlarge on small format mobile devices. | Optional |
| Image Vertical Position | The list of options provided is to reposition image up or down when set to enlarge on small format mobile devices. | Optional |
Description
More flexibility for spacing. Most often used in long-form narrative content. This component also allows for resizing the image for small format mobile devices. LINK TO RESIZE GUIDANCE.
On-page example
When to use
On elevated pages that require design finesse and spacing needs to be controlled.
When to consider something else
Best practice is to support an image with a caption. Use the Image with Caption component, or use Page Content Only if control of spacing is unnecessary.
Accessibility tips
TBT - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The name of the piece of content or title tag value for your image | Required |
| Select Image | Select the image to be used | Required |
| Select Link | Select a location for the image to link (for internal links) | Optional |
| External URL | Optional | |
| Subhead | NA | |
| Alt Tag | Alternate text-its purpose is to describe the image textually so that search engines and screen readers can understand what the image is | Required |
| Enlarge Image | This is to resize image on small format mobile devices. | Optional |
| Image Horizontal Position | The list of options provided is to reposition image left or right when set to enlarge on small format mobile devices. | Optional |
| Image Vertical Position | The list of options provided is to reposition image up or down when set to enlarge on small format mobile devices. | Optional |