Info Cards are a great way to present key content in a compact, visually appealing format. They not only showcase important information but also act as gateways to other pages on your site, allowing users to easily explore more detailed sections or related contents.
Check out how the component looks like at sample.isomer.gov.sg.
Limitations
Overall component
Info card component title (mandatory) - 100 characters
Info card component description - 200 characters
Max is 12 infocards per component (Add item will be greyed out)
Per Card
Info card title (mandatory) - 100 characters
Info card description - 150 characters
Linking info cards are optional
If there are images,
Uploading image is mandatory
Images alt text is mandatory.
Images guideline
Images will resize according to screen sizes, number of columns chosen for component etc. Thus, there is no single, clearly defined "safe space" in terms of pixels, as it depends on the specific layout and screen size you’re working with.
An info card’s image aspect ratio ranges from 9:5 to 7:2 (extreme case; in tablet view).
As a general rule of thumb, an info card image should be a minimum 800px by 400px - 2:1 aspect ratio.
Aim to center any key content within a 344x280px area.
Avoid placing essential elements too close to the left, right, top, or bottom edges, as these parts are the first to be cropped when resizing or when the viewport is narrower (especially on mobile).
Best practices
Keep content concise
The title and description should be brief and to the point. Users should be able to quickly understand description at first glance.
Use engaging, relevant images
Ensure the image is high quality and relevant to the content. A blurry or irrelevant image can reduce the card’s effectiveness.
Group related cards together
If you have a list of Info cards, group similar content together to help users easily navigate the site.
How to create
Fill up the title and description. You will be able to choose column variant here.
For Cards with image variant, you will need to
Fill up the title
Upload an image
Insert image alt text (mandatory)
The newly created card will only appear in your preview if all mandatory fields are filled.
If your uploaded image doesn't appear immediately, particularly on GSIB devices, this may be due to virus scans causing loading delays. To verify that your image has been uploaded successfully, switch from 'Default' to 'Full screen' mode using the toggle in the top right corner of the preview pane. The image should be visible in full screen mode.
You can choose either Default or Resize to fit option.
Default: Image will fill the space (Left image)
Resize to fit: The image will resize to fit the space while keeping its original proportions/aspect ratio. This may create empty spaces on the sides or top/bottom, similar to black bars on a TV screen. (Right image below)
Click on Save block only if you see the new card appears in your preview.
If the preview is not showing your card, you would have to check if there are any missing fields in the particular card.
Asides from Cards with image variant, you can choose Cards without image variant.
Common queries
I am unable to save my cards?
You might need to check if there are missing mandatory fields per card. As long as there are missing fields, the cards component cannot be saved.
In this case, the alt text field was empty.
