Icon Card Panel

Icon Card Panels

Why use Icon Card Panels?

Sometimes you just want a simple icon instead of an image as an eye-catching way of highlighting a feature you'd like to promote.

Icon Card Panels are very similar to Image Card Panels, and like them can have background images and colours, and different column arrangements.

Simple Icon Panel

As with the Image Card Panel, you can have a simple white panel but now with icons rather than images linking through to key features.

Rows of 3 and 2

If you have a number of icons that don't fit neatly into a 3 or 4 column grid, you can still display them nicely as rows of 3 and 2 using a 3 column layout centred in the panel.

  • phone

    Phone

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • tablet

    Tablet

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • laptop

    Laptop

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • desktop

    Desktop

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • book

    Book

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Outline icons

By default icons have solid coloured backgrounds, but they can just have outlines with white backgrounds.

  • music-note

    Music

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • guitar

    Guitar

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Coloured cards

The icons can be coloured, but so can the card backgrounds themselves.

  • game

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • hearts

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • dice

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Background image and colours

As with the Image Card Panel you can use background images in combination with colours, and change the text colour between dark and white to suit the image. With background images the cards can have frosted backgrounds, which can give a nice effect.

  • ice-cream

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • snow

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Large icons

You can make icons bigger.

  • cheese

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • pizza

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Large icons without circles

Or you can have large icons but without the circle normally around icons. You might also notice an optional 'Read more' button below the cards.

  • bicycle

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • car

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

Left-aligned title and cards

Again - like Image Card Panels - you can align title, text, and cards to the left.

  • golf

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • soccer

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.

  • football

    Heading

    Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat.