Skip to main content

The Icon Card List Container and Icon Card List Item components are designed to work together to create card-based layouts. The Icon Card List Container serves as a flexible framework, allowing authors to control the number of cards per row, adjust spacing between cards, and set margins above and below the component. Each Icon Card List Item offers customization options for selecting an icon from our library, setting its size, adding text and links, and customizing the card’s style and padding. This combination of components is useful for presenting information in a clean, organized format, such as highlighting key features, categories, or services.

Content Options

Visit the icon library to browse and choose icons for your cards.

Link Options

  • Text (required): This is the visible text for the link that users will click on.
  • Link to page (required): This field specifies the URL the link should navigate to when clicked.
  • Anchor: This optional field allows you to define a specific section of the destination page by using an anchor (e.g., #my-section-id). It is useful for directing users to a particular section within a webpage.
  • Open link in: This dropdown menu lets you choose whether to open the link in the same window, or in a new tab.
  • Title attribute: This optional field lets you add additional descriptive text for the link. This text appears as a tooltip when a user hovers over the link, enhancing accessibility and user guidance.

Layout and Styling Options

Card Style

Not all card styles work perfectly on every background. While text colors are automatically adjusted to be light or dark based on the background, some combinations may still reduce readability. Authors should test their designs to ensure the text remains clear and easy to read.

Usage

Do

  • Choose icons that visually represent the content or purpose of the card to make it more intuitive.
  • Keep the text concise and easy to understand for users.
  • Ensure the link destination matches the text and purpose of the card.
  • Use consistent styling across all cards in a set for a clean and professional look.
  • Adjust the spacing and layout options to fit the overall design of the page.
  • Preview your cards on the page to make sure they fit well with surrounding content.
  • Group related cards together logically to help users easily find information.

Don't

  • Avoid using overly long text in the cards that makes them look cluttered.
  • Don’t mix different styles or icon sizes within the same group of cards.
  • Refrain from using icons that don’t relate to the card’s content or purpose.
  • Avoid adding unnecessary or decorative links that don’t provide value to users.
  • Don’t rely on the cards to convey critical information if they’re not the primary focus of the page.
  • Refrain from placing too many cards on a single page, as it can overwhelm users.

Accessibility

  • Make sure text has enough contrast against the background to be easily readable. Not all card style options work on every background.
  • Use clear and descriptive text for links so users know where they will go when clicking. If the link text isn’t enough to provide context, consider adding a title attribute for extra detail, but ensure the link text is still meaningful on its own.