Image Card Component

The Image Card component features a large image with a bold headline, descriptive text, and a vibrant button link.

The design creates a personal touch that immediately helps build credibility and trust with your audience. Having large high-quality imagery along with a short message can help make a positive first impression.

Features of the component

Features:

  1. Choose from five different design box styles to suit any campaign style.

  2. Large attention-grabbing images that will adapt to the screen sizes and draw in your audience.

  3. Highly visible headlines with large description area.

  4. Strong call to action button link with optional font awesome icon.

Designs:

Component Designs

When to use the Image Card component

Use this component to create a strong visual presence on a web page while direct users towards a desired link or call-to-action.

Use cases include promotional events, call-to-action items like registrations or applications, and informational highlights.

Usability guidance

A minimum resolution of 1024 x 768 is recommended for the media image. Contact the web support team if you need help with image sizing.

 


Vertical Orientation Feature

When nested within a column snippet of size 6 or smaller, the Image Card seamlessly transitions to a vertical layout.

The image takes precedence, positioned above the text, creating a focused visual impact that adapts to various screen sizes.

The design styles are fully compatible with the vertical layout format. You can also use the split width option to alter the size of the image and content areas.

Vertical Image card

snippet


Additional Options

Reverse Direction

Alternate the display direction on larger screens.

Reverse direction


Adjust Split Widths

Split widths

Group Styling

Stacking multiple instances of the component will enable a group styling effect.

Stacking Option

YouTube Lightbox

Using a Youtube URL for the hyperlink will enable a clickable video icon overlaid onto the image. When clicked, the video will open in a lightbox-style window.

Lightbox


Images

An image with a minimum resolution of 1024 x 768 is recommended for the best visual display.

Do not use imagery that includes instructional text, as some screen sizes, like tablets in portrait mode, may show less of the overall picture. 

Keep the main subject in the center of the image to be visible on all screen sizes.

image size options

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place an image.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Image Card component.
  5. Fill in the required fields and select your options.
  6. Save and preview.

Live Example

Headline

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit.
  • item one
  • item two
  • item three
  • item four

Button Link

 

View all live design examples