Image Card

Web Services and Standards

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

Category	Value
May contain	None
May be placed in	Component grid

Field	Description
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.

Select Image card from the Component type drop down list and click the Add new Component or Add another Component button.
Upload an Image and provide the Alternate text for it.
Choose whether the Alignment should be left or center.
Check Preserve aspect ratio to retain the aspect ratio of the uploaded image instead of automatically cropping it.
Provide a Title and Text if the image card should have them.
Provide the Attribution, if any, and indicate whether the Text is a quotation by checking the checkbox or leaving it unchecked.
If desired, provide a Link Title and URL as a link destination for the image card.

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.

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.