Image Callout Card

For use in the main area of containers.

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.
  • This widget must be in a section

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 on the Layout tab and click on a Section to add a section to the page.

2. Click + Add widget.

3. Click the Layout tab.

4. Select the Card Wrapper.

5. Inside the Card Wrapper, click + Add widget here...

6. Click the Layout tab.

7. Select the Section widget.

8. Click on the Section.

9. Click the margin and columns icon.

10. 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.

11. Click + Add widget here...

12. Select the Image Callout Card.

13. Click + Add widget here... then repeat the previous step to select image callout cards for the remaining columns.

14. Click an image callout card.

15. Click the edit icon in the pop up menu.

16. Add a heading. Maximum characters: 75

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

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

19. Click "Select page or content."

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

21. Select your page.

22. Click "Use selected."

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

24. Click "Insert link."

25. Add an ADA Title to your button.

26. Select the Gold-colored button option.

27. Click here to start selecting an image.

28. Click Select an image from library.

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

30. Locate your image and select it.

31. Click "Use selected."

32. Click "Save."

33. Add the required image and optional 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