Image Callout Card

For use in the full-width and main content areas.

The Image Callout Card is used to display links in a visually appealing way. The widget uses an image for the background and a gray area for link text.

Example with sidebar:

Example of image card callout widget. maroon heading reads Two cards in container with sidebar. Two cards, with images, each with a white heading, description, and gold button. Example of image card callout widget maroon heading reads Three cards in container with sidebar. Three cards, with images, each with a white heading, description, and gold button.

Example without sidebar:

Example of image card callout widget. maroon heading reads Three cards in container without sidebar. Three cards, with images, each with a white heading, description, and gold button. Example of image card callout widget. maroon heading reads our cards in container without sidebar

Visual demo

Widget standards

The Card Wrapper layout is needed for this widget.

Do:

  • Image size: 600x400, ratio 3:2.
  • In a container with sidebar and margin layout, use 2-3 cards in a section with 2-3 columns.
  • In a container with margin layout, use 3-4 cards in a section with 3-4 columns.
  • Carefully consider what content you want to highlight for your users.

Do NOT:

  • Add linked text or buttons inside the Description field of this widget's settings.
  • Add text that is longer than the character field. The text will obscure the background image.
  • Use the image card callout in place of text paired with a button or hyperlink.

Written instructions

1. Click "+ Add widget"

2. Click "Layout"

3. Select "Card Wrapper"

4. Inside the Card Wrapper, click "Add widget here..."

5. Click "Layout"

6. Select "Section"

7. Click "Add widget here..."

8. Click the margin and columns icon.

9. In the layout tab of the pop up menu, increase the Columns number to the number you want. This widget can hold 1 to 4 cards.

10. Click "Add widget here..."

11. Select "Image Callout Card"

12. Click "Add widget here..." and select the "Image Callout Card" for the remaining columns.

13. Click an image callout card

14. Click the edit icon in the pop up menu

15. Add a heading. Maximum characters: 75

16. Add a brief description (optional). Maximum characters: 150

17. Click the + to add a URL for your image card callout link.

18. Click "Select page or content"

19. Locate the page you want to link to by navigating or searching the name

20. Select your page

21. Click "Use selected"

22. Click the "Text to display" field to edit your button text. Maximum characters: 30

23. Click "Insert link"

24. Add ADA text to your button

25. Select the "Gold-colored button" option.

26. Click here to start selecting an image.

27. Click "Select an image from library"

28. Click "Default Libraries" and search for your image name or navigate through the image folders to find your image.

29. Locate your image and select

30. Click "Use selected"

31. Click "Save"

32. Add the required image and the option heading, description or button elements to each card.

Save and send

  • If you'd like to continue working on this page, but need to save your progress, click Save as Draft.​
  • If you're finished making changes to the page, and the page is ready for review, click Send for Approval.

Screen capture of the buttons for Send for Approval and Save as Draft in Sitefinity

Table of Contents