UltraCX Icon Card Components
Usage
Use icon cards to help users find the right information quickly. They can combine a variety of content, including text, icons and links.
Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns. Ensure headings are direct and summaries are concise.
Card One
This is an icon card.
Card Two
This is an icon card.
Card Three
This is an icon card.
Usage
Cards can be made up of:
- A title, to provide a snapshot of the content
- Written content, to provide further details
- visual elements like images, to provide visual prominence.
- buttons, to allow users to have a clear indicator of how to click-through to a new page with the full content indicated to by the card.
You only need a headline, some written content and an icon chosen from Flowbite for a icon card. All other elements are optional and will depend on a user's and content editor's needs.
- Group together icon cards with similar content.
- Use only a single style of card within a set of cards.
- Keep the content clear and concise.
- Only use one piece of information per card.
- Avoid repeating content in a group of icon cards.
- Avoid overloading icon cards with content.
Variants
- Icon Card (single card)
- Icon Cards (listing)
Left-aligned non-clickable icon cards
This example shows five icon cards with left-aligned content, no card links, and varied text lengths to test wrapping, spacing and visual balance.
Clear service pathways
Help users understand their options quickly with concise, structured content and simple next steps.
Long heading example for testing how icon card titles wrap across multiple lines
This card is useful for checking how the component handles longer headings without breaking the layout.
Consistent page building
Use reusable components to keep layouts, spacing and presentation consistent across different sections of the site, even when content is managed by multiple teams over time.
Editor-friendly content
Structured fields make it easier for editors to add headings, descriptions and icons without needing to write custom HTML.