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

Simplest version, size 3 (so you can fit 4 in)

This is an Example Icon Card

Simplest version, size 3 (so you can fit 4 in)

This is an Example Icon Card

Simplest version, size 3 (so you can fit 4 in)

This is an Example Icon Card

Simplest version, size 3 (so you can fit 4 in)

Add features like read more and buttons with links (all optional)

This is an Example Icon Card

Example Icon Card, using the "Success" Variant.

Size 3

This is an Example Icon Card

Example Icon Card, using the "Success" Variant.

Size 3

This is an Example Icon Card

Example Icon Card, using the "Success" Variant.

Size 3

This is an Example Icon Card

Example Icon Card, using the "Success" Variant.

Size 3

Use the built in styles your organisation creates

Example Icon Card

Bittersweet theme

Size 3

Example Icon Card

Blue Jeans theme

Size 3

Use the built in styles of danger, success, info

Example Icon Card

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

Size 3

Example Icon Card

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

Size 3

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.


Icon Cards 3.0

Back to all components. fas fa-arrow-circle-left. An alternative design for Icon cards.

Read More

This webpage was built with Mition