Cards2024-04-15T00:34:26+00:00

Cards

On this page

    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

    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.

    Card with arrow

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    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.

    Card with top icon

    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:

    qh-card-action

    For the Single action Card with Arrow, use two classes:

    qh-card-action qh-card-action-arrow

    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.

    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.

    Card with top icon

    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

    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

    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.

    Card with top icon

    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.

    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
    Back to top