Image Card

The Image card component allows an image with accompanying text and link to be added to a Component grid using the appropriate markup.

CategoryValue
May contain None
May be placed in Component grid
FieldDescription
Image Uploaded png, gif, jpg or jpeg.  Less than 8 MB and between 320x213 and 3840x2560 pixels.
Alignment Left (default) or Center.
Preserve aspect ratio Unchecked (default) or checked.  Prevents automatic cropping of the image if checked.
Title Slightly larger text with different color treatment.  A heading to accompany the image.
Text Normal plain text.  In the example below, "This image card has optionally provided text here."
Attribution Lower weighted text.  In the example below, "Anonymous".
Text is a quotation Unchecked (default) or checked.  Wraps text in curly quotes if checked.
Link Text and URL destination.

How to add an Image card

  1. Select Image card from the Component type drop down list and click the Add new Component or Add another Component button.

  2. Upload an Image and provide the Alternate text for it.

  3. Choose whether the Alignment should be left or center.

  4. Check Preserve aspect ratio to retain the aspect ratio of the uploaded image instead of automatically cropping it.

  5. Provide a Title and Text if the image card should have them.

  6. Provide the Attribution, if any, and indicate whether the Text is a quotation by checking the checkbox or leaving it unchecked.

  7. If desired, provide a Link Title and URL as a link destination for the image card.

Things worth mentioning

  • If Preserve aspect ratio is left unchecked, then the provided Image is cropped to a 3:2 aspect ratio when Alignment is left and cropped to a 1:1 aspect ratio when Alignment is center.

  • If Preserve aspect ratio is checked, then the Image will be scaled so that its width is the same as it would be when unchecked, but its aspect ratio will be retained.

  • The Title of the Image card will be made the link if a Link URL is provided without a Link Title.

  • The Link URL will be made the text of the link if a Link URL is provided without a Link Title and there is no Title for the Image card.

Examples

This is an example of a Component grid with four Image card components.  Each Image card has the required Image, but additionally:

  • The first Image card has an Alignment of left;  includes a Title, Text and Attribution;  Text is a quotation is checked; and both a Link Title and URL are included.

  • The second Image card has an Alignment of left and has only a Title, Link Title and URL.

  • The third Image card has an Alignment of center and has only a Title and a Link URL without a Link Title.

  • The fourth image has an Alignment of center and has only Text and a Link URL without a Link Title.

 The next example is a Component grid containing Image cards with Preserve aspect ratio checked.

  • photo of a student on a bench next to a wall of windows, shot from above

    Sample image card #5

    This image card is set to left alignment.

  • students walking on campus with Sprau Tower in background

    Sample image card #6

    This image card is set to left alignment.

  • photo of a student on a bench next to a wall of windows, shot from above

    Sample image card #7

    This image card is set to center alignment.

  • students walking on campus with Sprau Tower in background

    Sample image card #8

    This image card is set to center alignment.