Icon cards

Start building fast, beautiful and modern looking websites in no time using our theme.
All elements

Icons cards: Style 1

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You can easily align to right the block icon by adding the .block-icon-right on the icon's container.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 2

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Switch to a smaller icon adding the .block-icon-sm on the icon's container.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 3

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 4

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 4 (centered)

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons cards: Style 4 (right aligned)

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons cards: Style 5

Add any background class .bg-* on the block icon to make it shiny and colorful. You can find all the classes in the colors dedicated page.

Silken Truth

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

The Cold Ice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Soaring of Stars

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Change the shape of the block icon by adding the class .circle or .rounded on the icon's wrapper.

Silken Truth

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

The Cold Ice

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Soaring of Stars

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Icons cards: Style 6

These icon blocks are the same as above, only that they don't have a background, but a 2px border. You can, also, opt for circle or rounded icons.

Silken Truth

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

The Cold Ice

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Soaring of Stars

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Add the .active class on the icon block to make it look and stay as if it was hovered.

Silken Truth

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

The Cold Ice

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Soaring of Stars

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Icons cards: Style 7

Silken Truth

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

The Cold Ice

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Soaring of Stars

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Silken Truth

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

The Cold Ice

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Soaring of Stars

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Icons cards: Style 8

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Carefully crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Continuously improved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Carefully crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Continuously improved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Carefully crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Continuously improved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Icons cards: Style 9

Use any of the predefined colors (e.g: bg-blue) to change the icon's background.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Icons cards: Style 10

15 Aug

Clamtown weekly news

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Fall in love with Tribus

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Cracking the Tribus code

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Best practices for Tribus

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.