The Cards element on nsw.gov.au allows editors to easily feature or organise content in a uniform way on a page. The cards provide a more dynamic and visually engaging way to present content than using link lists, tables etc.
There are a variety of ways to create cards in Drupal, with each way having their own use case and benefits.
Card
The Card block is used for inserting a single feature card into a page. This is accessed through the custom block menu in Drupal.
Some examples are:
Card with media and red line
Card with media and the 'full width' variant
Cards
The Cards block (plural) is used for inserting multiple cards horizontally across a page. Unlike the Card (single) block, the Cards block has more reliable and uniform spacing. All other functionality is the same. It can also be accessed directly through the custom block menu in Drupal.
Some examples are:
Cards Content block
The Cards Content block is also used to insert multiple cards horizontally across the page. It mostly functions in the same way as the Cards (plural) block. However, it also contains a variant called Side Scrolling Cards.
Side scrolling cards are a mobile friendly alternative to regular cards, where users can swipe to see additional cards instead of scrolling to view the cards 'stacked'. In a desktop view, side scrolling cards appear with arrows to encourage navigation and interaction with the page.
An example is:
You can use side scrolling cards if you have four or more cards.
Troubleshooting
These are some of the common issues people run into when using the variety of cards content blocks in Drupal.
It won't save
Sometimes when you hit 'update' or 'add block' cards blocks won't save. This is normally for one of two reasons.
- You haven't selected a variant - scroll up and choose the colour variant that suits your project best
- The url you've included isn't valid - ensure that you have selected the correct link 'type' (content, managed link or media) and ensure that you select the correct content in the 'link' section. If it doesn't appear in the drop down, it isn't valid.
If the image does not look right
If your image doesn't look correct on your card/cards, there are two things you can do to troubleshoot:
- Resize the image - It is best that images used in cards are rectangular in shape, and larger than they will be displayed in the card itself. As a general rule, resizing to approximately 760px x 440px will be large enough and rectangular enough for the system to fit into a card container.
- Modify the focal point on the media file - The focal point of your media file helps the system determine which part of the image it is most important to display. To modify, navigate to the media file of the image you are using and drag the '+' on the image preview. Only change the focal point on images you own.
Find more guidance for Cards
Check out Cards for more information and guidance.
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.