Break up your sections with great images and a robust layout.
Laid out in lines of an image paired with text, a Generic Block: Image List component is great for visually breaking up content or illustrating each section with a related image.
Use them for things like:
- student interns and their bios
- ongoing programs
- topics of interest
You can use calls to action to highlight and connect users with the next thing they’ll need.
Generic Block: Image List can be added standard or full width.
The list defaults to one image block, but you can add additional blocks by clicking Add Generic Block at the end of the list.
Generic Block: Image List Options
Select a display mode from the drop-down list. This applies to all blocks in the component.
You can display your image blocks one of two ways:
- “Style 1 (Yellow CTAs, No Borders)” displays the calls-to-action as yellow buttons.
- “Style 2 (Red Borders)” displays the calls-to-action as text with a small arrow and places a red border at the top of each block.
You cannot mix and match these within the same Generic Block: Image List, although you could add a second list with a different style on the same page.
Background Color defaults to “Light (white).”
Select “Dark (gray)” to add a slight gray tint behind the entire component.
This applies to all blocks in the list.
Enter an optional header that will appear above the first image block. It is a heading 2.
Provide more context by entering it in Intro. It will appear below any section header but above the image blocks.
The eyebrow appears at the top of the text of an image block in a distinct font, different from most styles on the page.
Enter a title. It will appear under the eyebrow and above the body of the image block as a heading 3. Use Title URL if you want to link the title to another page.
If you want the title to be an active link, enter a URL. This is a look-up field.
- To link to a node on our site, begin typing its title and select it from the drop-down list that appears.
- To link to anything else, add the full URL, including https://.
Note: Titles that are linked are styled differently from those that aren't. If you are using the title field in multiple columns, we recommend being consistent in their use — make all titles links or none — so it doesn't look like an error.
You can also add links in the Body, or as a call-to-action (CTA) link at the bottom of the column.
The body field is a limited WYSIWYG editor.
You can style text with:
- headings (start with a “Heading 4” if you used Title, and a “Heading 3” if you didn't.)
- bolding and italics
- lists
You can also add links and special characters, as well as mark up text in non-English languages..
Select either right or left. The image will appear on that half of the page, with the content you added in the Body on the other half of the page.
Technically, images aren't required. However, this component is specifically designed for them, so add them.
Add an image that is at least 800x800 pixels.
Click Add Image to open an Add Image dialog box. Images will normally display as a square unless the content in Body is extensive.
Once you add an image, two buttons will appear:
- Click Edit to update the image or change the alt text.
- Click Remove to completely remove it.
See Images for detailed instructions.
Enter the URL for an unlisted or public YouTube video.
You must also add an image in the Image field.
The image will display as normal, but with a play button superimposed on it. When a user clicks on the button, the video will open.
