bulma-cards

Bulma Components

Responsive Cards

A growing collection of responsive UI cards that you can use/copy-paste in your @bulma projects. Some of these cards have animated hover effects, scroll down to see it in action.

Download From Github Follow @FarhadurRahim

Example: #01

Placeholder image

Dummy Text

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy

See the Pen Example#01 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #02

Placeholder image Christian Kogler

Dummy Text

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy

See the Pen Example#02 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #03

Placeholder image

Dummy Text

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy

See the Pen Example#03 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #04

Placeholder image

Dummy Text

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy

See the Pen Example#04 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #05

Design Inspiration: https://codepen.io/steveschoger/pen/XwzRRZ

Placeholder image

Dummy Text

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy

196 km from Istanbul
★★★★★ 10 Reviews

*Places to visit: Istanbul, Kireçburnu & Ankara

See the Pen Example#05 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #06

Design Inspiration: https://codepen.io/steveschoger/pen/YbQXGq

Placeholder image

Castlevania • 10000y old

$12,750,000

Arjantin Cd. No:30, 06700

3 Bedrooms
2 Bathrooms

Realtor

Placeholder image

John Dume

(000) 000-0000

See the Pen Example#06 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #07

Design Inspiration: https://penpot.app

Placeholder image

Dummy text title for web

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy, Lorem ipsum leo risus, porta ac consectetur..

See the Pen Example#07 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #08

Placeholder image

01.

Bowl office collection

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non miy losre, Lorem ipsum leo risus, porta consectetur..

See the Pen Example#08 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #09 - Animated Title and Caption

Dummy text title

Lorem ipsum leo risus, porta ac thes consectetur ac, vestibulum at eros. Donec id elit non miy losre..

See the Pen xxqQzwy by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #10 - Animated Title and Caption with Zooming

Dummy text title

Lorem ipsum leo risus, porta ac thes consectetur ac, vestibulum at eros. Donec id elit non miy losre..

See the Pen Example#10 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #11 - Tour Planner

Design Inspiration: https://dribbble.com/shots/8157859-Travel-App

Placeholder image
200
334
Placeholder image
Placeholder image Placeholder image Placeholder image

Cappadocia, Turkey

Lorem ipsum leo risus in Donec id elit

See the Pen Example#11 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #12 - Travel Catalog

Design Inspiration: Travel Category Page by Faria Anzum

Placeholder image
Cappadocia, Turkey
15/Day

Lorem ipsum leo risus

15 Days Tour
★★★★★

See the Pen Example#12 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Example: #13 - Product Catalog

Placeholder image

Hot Collection

Lorem ipsum leo risus

★★★★★

Lorem ipsum dolor sit amet la bum consectetur adipisicing elit leori

$45.00

Add to Cart

See the Pen Example#13 - Bulma Card by Farhadur Rahim (@webmechanicx) on CodePen.

Made with ♥ in Rajshahi