The card component is used to provide a brief summary of content or a task, often with a link to more detail.
Cards are frequently displayed alongside other cards and group related content or tasks.
Cards are used to organise information related to a single topic.
Cards – single action
Implementation
Add a class to the Avada nested column:
qh-card-action
For the Single action Card with Top Icon, use two classes:
qh-card-action qh-card-action-top-icon And, use the Avada Icon element with Light icons
Cards – multi action
Default card (H3 linked)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius ligula nunc, eget volutpat metus porta id. In hac habitasse platea dictumst. Nulla et nibh pellentesque nulla imperdiet feugiat.
Default card with icon list (H3 linked)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius ligula nunc, eget volutpat metus porta id. In hac habitasse platea dictumst. Nulla et nibh pellentesque nulla imperdiet feugiat.
![bariatric-pre-surgery](https://dev.metronorth.health.qld.gov.au/wp-content/uploads/2020/09/bariatric-pre-surgery.jpg)
Card with image and icon list
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Implementation
Add a class to the Avada nested column
qh-card-multi-action
For the Multi-action Card with Top Icon, use two classes:
qh-card-multi-action qh-card-action-top-icon
And, use the Avada Icon element with Light icons
For icon lists:
Add a class to the
qh-icon-block
Only use Font Awesome 5 icons (until Avada supports v.6 icons).
- Light icons (fal)
- Include fa-fw (fixed width) and fa-lg (large)
Cards – no action
Default card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius ligula nunc, eget volutpat metus porta id. In hac habitasse platea dictumst. Nulla et nibh pellentesque nulla imperdiet feugiat.
![bariatric-pre-surgery](https://dev.metronorth.health.qld.gov.au/wp-content/uploads/2020/09/bariatric-pre-surgery.jpg)
Card with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius ligula nunc, eget volutpat metus porta id. In hac habitasse platea dictumst. Nulla et nibh pellentesque nulla imperdiet feugiat.
Implementation
Add a class to the Avada nested column. Do not link the column in the ‘Link URL’ field.
qh-card-no-action
For the No action Card with Top Icon, use two classes:
qh-card-no-action qh-card-action-top-icon
And, use the Avada Icon element with Light icons
Usage guidelines
When to use it
- Aggregation pages that display a variety of content types at the same time on the same page
When not to use it
- Avoid using cards instead of table rows for organised information
- If the reader needs to read the content in order, use a list or simple paragraphs with headings
- Cards are also a poor choice when users need to compare between multiple options, since cards often aren’t structured in a predictable way from item to item
- You have many sections with little information in each—use a table
- to link to content lower down on the page, consider in-page navigation
How to use cards
Do
- Display cards together in a grid or vertical list
- Keep to one concept per card: You can use multiple elements such as images, text, links and icons but they should all constitute one thought or action
- Consider and choose text and visual elements carefully: Test your cards with minimal content and only add additional content or graphics where they give needed context to the user
- Keep text short and concise: According to Google’s Material Design guidelines, cards should “display a small amount of information at a glance, usually no more than 2-3 lines of text”
Don’t
- Overload with information as the card links to content that contains more detail
- Use multiple different styles of cards in the same section. This can create conflicting visual messages, and cause visually cluttered page
- Don’t include inline links. A card should be a singular link or provide a limited set of actions