❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free Cards Snippet

Product description


The most beautiful and comprehensive collection of cards designed over Bootstrap3. From plain cards to full backgrounds to gradients to anything you may need. We have created this set thanks to a lot of people asking for them and we hope you will find good use for them.

Use cards whenever you have modular information, that you can draw attention to in a page. In our live preview you will find examples for blog cards, vacations cards or something simple like quotes. The possibilities are endless, but you feel something is missing, tell us your opinion in the comments below.

Why cards?
Because they are beautiful and easy to go through by the end user. We think cards are the future step in web development, helping you to design a page that looks good on any device. You can see them on social networks , blogs, e-commerce sites or mobile apps, they are literally everywhere! So join the gang and create your own awesome cards!

Why hipster cards?
Because these cards are creative and opinionated, they’re not afraid to be bold and look just like they feel like. Of course we can argue on this subject for a lot of time, and of course we are not hipsters ourselves. But for the sake of web design, you should definitely check them out!

Product certified by: Creative Tim
Hipster As F*** Cards - Fully Coded and Responsive HTML5
Hipster As F*** Cards - Crafted with Bootstrap - the most popular Front End Framework
Downloads
11,039
Version
1.1.0
Changelog
Updated
8 years ago
Released
8 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

26 Web Developers commented on this product

adamhtml
  • downloaded
8 years ago

I don't know why people had so many problems with this template. It works really great for my and I give you guys over at Creative Tim a big thumbs up!

alexpaduraru
  • owner

@adamhtml thank you for the kind words :D
8 years ago

adamhtml
  • downloaded
8 years ago

@axelut also, when I used this with your Light Bootstrap Dashboard theme, the .cards CSS had a name collision and didn't work. Sorry, I didn't notice this until I tried to use it for an hybrid theme I was trying to develop.

alexpaduraru
  • owner

@adamhtml Thank you for the information. Technically they were not supposed to work together because the Dashboard was built for a purpose, the Hipster Cards are build for something else. As a quick fix to solve this problem is to take the "hipster_cards.css" and "hipster-cards.js" and using any text editor to "Find and Replace All" the instances of class ".card" with ".hipster-card" and then everywhere in HTML where you need to use the "hipster cards" replace class="card" with "hipster-card". That should work smooth :-)
8 years ago

أفندينا.فندون
  • downloaded
7 years ago

I can't say a word this is awesome , simple , and so easy Thank you for this great snippet

amirhazz
  • downloaded
7 years ago

Really appreciate your work as a developer.

alexpaduraru
  • owner

Anonymous Tim you're welcome! :D
7 years ago

gg1toronto
  • downloaded
7 years ago

these are great! please tell me if and how I make some of them rotate per the rotating cards example thx

arjanhuisman0
  • downloaded
7 years ago

thank you for this aswell. I have the same question as greggq9 did, a year ago. Although it looks great on mobile devices, the left and right margins are too large. I can't seem to locate the wrapper or container class in the CSS... and my left and right adjustments to the .card class do not change. Any tips?

alexpaduraru
  • owner

@arjanhuisman0 thank you for using our product. Please check line 828 in hipster-cards.css where is the .card class and you will find a max-width. You can replace that value with anything you want or you can remove it and everything will be fine. Best, Alex!
7 years ago

arjanhuisman0
  • downloaded
7 years ago

Hi Alex. Indeed, i already tested with the max width option, added min width options to it, played with min/max heightetc..... What then happens is on mobile that anything above a min. 260 width , will not look good on any iphone345 and older android. Therefore my question; the left and right margins are too large. Can you please tell me how to make adjustments to those margins?

alexpaduraru
  • owner

@arjanhuisman0 I've just removed the max-width and everything is looking fine on iPhone 5 screen size, please check the next image: http://imgur.com/a/Yb1I6
7 years ago

arjanhuisman0
  • downloaded
7 years ago

Many thanks for your prompt response. Indeed , i agree, for hipster cards, everything lookes fine, splendid. For my cards, not so. (https://utap.at/hipster/) However, my question is, how can we make adjustments, to the left and right margins

programmeurfou
  • downloaded
6 years ago

Thank you.

rc
  • downloaded
6 years ago

Hi, can you point me to some instructions for installing Hipster as F*** Cards, Get S*** Done, and Get S*** Done Pro. Sorry, I'm a newbie about this and not sure how to add "components' into my wordpress site. Thank you.

alexpaduraru
  • owner

Thank you for using our products. You need basic knowledge of HTML/CSS and Bootstrap in order to work with our products. More about bootstrap here: http://getbootstrap.com/. Unfortunately, we don't know how our products can be integrated with Wordpress because we don't have Wordpress knowledge. We made a tutorial on how to work with one of our dashboards: https://www.youtube.com/watch?v=c3M3NQtFyqM&t=10s maybe that will give you an idea on how to work with our products. Best, Alex!
6 years ago

You have to be logged in to post a comment. Login here.