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:
For each content card, you'll need:
- sub text*
- image* (1000x666px)
- link destination*
- title text (useful for screen reader users)
* required field
- In edit mode of your page, place your cursor where you want your content card
- Find /SharedResources/Razor/content-card.cshtml 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?
- each content card needs a title
- be clear and concise
- ensure your title is relevant to the link destination
- 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 to achieve balance on the page
- browse for a CMS page you'd like to link to
- or link to an external URL
- provide some title (or hover) text for screen reader users, this give a little more context for those user that may have a visual impairment, for example
- upload your image before inserting your control
- image sizes must be 1000x666px
- ensure your image is relevant and on brand
Image alt text
- what's going on in your image?
- provide an image description
A number of sites are already using content cards, here are a few examples: