Icon Cards 2.0

An alternative design for Icon cards.

This example combines icons with text, and an optional button in a neatly organised card layout, and an improved hover effect.

Icon cards are ideal for showing important information, such as "Success" or "Error" message

You have the ability to add an icon at the top, followed by text like a title or description as well as a button. You can link the button to another web page, a document or an image.

Card styles and sizes can be changed to match your colour scheme.

There is also the built in variant options, which include primary, warning, info etc.


This is an Example Icon Card

Example Icon Card, using the "Success" Variant.

Size 3

Example Icon Card

This is an example icon card with a "Danger" variant.

Size 7

Example Icon Card

Without an icon or a button. There are no links on an icon card with no icon or button.

Size 4, Custom colour style. Offset by 4 giving it a centred appearance.


Image Cards 2.0

Image cards are versatile components that combine images with text, buttons, or other elements in a neatly organised card layout. Each card includes an image at the top, followed by text like a title or description, and optional actions...

Read More