Card widget

Card widget

A Card is a simple content container that has an image, a heading, some text, and a call-to-action button. 

You can also use a card without an image.



      

 

Cards work best with a square or rectangular image in a 3 or 4 column layout.

 

Here are examples of Cards with and without an image as they would be displayed on a page:

           

 

To configure the content of a Card, click the Edit button  in the upper-right corner of the widget.

 

 

The configuration window appears where you can configure the following:

 

·         Heading        

This will be the heading of the card which will be displayed under the image, or at the top of the card if you do not use an image.

 

·         Text

Enter a description for the card.

 

·         Image

An image is optional, but if you have 3 or 4 cards in a row, they must all be consistent within the row – all must have an image or no image.

 

Click “Select image.” This brings up the image selection window. You can choose from images already in the library, or upload a new one.

 

If you upload a new image, you will need to select the image library you’d like the image to go into.

 

The title will auto-populate with the filename, but it is recommended to change this to something more descriptive and in title case (the first letter of each word capitalized).

 

You can add Alternative Text at this time, or later when you insert the image.

 

Alternative text must always be filled out. It will be auto-populated with the image title, but it is recommended that you change it to a more descriptive phrase. This is an ADA requirement for sight-impaired people who may be using a screen reader, or if the image doesn’t load for some reason, people will at least know what it is supposed to be. It also improves SEO.

 

·         Label

This is the button text. Keep this concise – one to four words.

 

·         Link to…

Under this area, select from the following:

 

o   Page within the site…

Choose an existing page from the site

 

o   External URL …

Clicking this option will display a text box to enter a URL for an external website

                       



    • Related Articles

    • Image

      Use this widget to display a single image on your page. You can choose an image from those already uploaded or upload a new image.   After you drag an Image widget onto your page, you can configure it to display an image.    Click the Edit button  in ...

    • Events widget

      Use this widget to display existing events in a “card” format. You must have at least one event created before adding the Events widget to a page.   When you drag and drop an Events widget onto a page, it will be auto populated with up to 20 event ...

    • Text With Image

      This widget will create a content area with an image, a heading, a descriptive paragraph and CTA (call to action) button.     After dragging the widget onto the page, click the Edit button   in the upper-right corner of the widget.   You can now ...

    • Event Image Guidelines

      Event images are displayed on the page for the event, as well as in event cards. The image ratio is the same for both areas, so you’ll only need to create one image. Because the website is responsive, the image may be cropped horizontally on some ...

    • Content block widget

      This is the widget you will probably use the most.   With this widget, you can enter content using the text editor and its features. You can type and format text, insert images, documents, symbols, and paste in pre-formatted text and tables from ...