Content cards can be added to your pages to create portholes, pushing users off onto the next part of their journey. These work particularly well on homepages. Use them to point customers to key information.
Like image and text CTA blocks, content cards are best placed within columns. At full width, they'd be overbearing and will consume too much of a user's screen (on desktop or larger devices). It's best practice to split them between two or three columns, like this:
Preparation
For each content card, you'll need:
- Title*
- Sub text*
- Image* (550px wide by 333px high)
- Link destination*
- Title text (useful for screen reader users)
* Required field
Instructions
- In edit mode of your page, place your cursor where you want your content card
- Find /SharedResources/Razor/content-card in the project explorer
- Drag and drop content-card.cshtml into your page
- Input the control settings
- Save settings
- Save and preview your page - how does your content card look?
Control settings
Header
- Each content card needs a title
- Be clear and concise
- Ensure your title is relevant to the link destination
Intro text
- Elaborate a little on where your card links to
- Be as brief as possible
- Try and use a similar amount of copy for each content card so they remain the same height to achieve balance on the page
CTA link
- Browse for a CMS page you'd like to link to
- Or link to an external URL
Title text
- Provide some title (or hover) text for screen reader users, this give a little more context for those users that may have a visual impairment, for example
Image
- Upload your image before inserting your control
- Image sizes must be 550px wide by 333px high
- Ensure your image is relevant and on brand
Image alt text
- What's going on in your image?
- Provide an image description
Examples
A number of sites are using content cards, for example: