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.
- Choose from five different design box styles to suit any campaign style.
- Large attention-grabbing images that will adapt to the screen sizes and draw in your
- Highly visible headlines with large description area.
- Strong call to action button link with optional font awesome icon.
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.
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.
Alternate the display direction on larger screens.
Adjust Split Widths
Stacking multiple instances of the component will enable a group styling effect.
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.
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.
- Open a page in Omni CMS and enter editing mode.
- Place your cursor where you would like to place an image.
- From the toolbar, select the component icon , which resembles an atom symbol.
- From the list of components, select the Image Card component.
- Fill in the required fields and select your options.
- Save and preview.
- item one
- item two
- item three
- item four
View all live design examples