Pick A Card, Any Card

A CSS Library of Material Design Inspired Cards

Profile Card1

Traditional image cards with action items at the footer.

Image Cards

Secondary text

Text area for card to be updated by user.

Profile Card 1 HTML Source Code

<div class="profileCard1">
<img src="../sources/images/lowery.jpg" alt="bman1">
<div class="textcontainer">
<h4> <b> Image Cards </b> </h4>
<h6> Secondary text </h6>
<p> Text area for card to be updated by user. </p>
<div class="actionItems">
<button class="button"> Button1 </button>
<button class="button"> Button2 </button>
</div>
</div>
</div>

Profile Card2

Traditional image cards with action items at the footer.

Image Cards

Text area for card to be updated by user.

Profile Card 2 HTML Source Code

<div class="profileCard2">
<img src="../sources/images/lowery.jpg" alt="bman2">
<div class="textcontainer">
<h4> <b> Image Cards </b></h4>
<p> Text area for card to be updated by user. </p>
<button class="button"> Button 1 </button>
<button class="button">Button 2 </button>
</div>
</div>

Profile Card3

Traditional image cards with action items at the footer.

Image Cards

Text area for card to be updated by user.

Profile Card 3 HTML Source Code

<div class="profileCard3">
<img src="../sources/images/lowery.jpg" alt="bman3">
<div class="textcontainer">
<h4> <b> Image Cards </b> </h4>
<p> Text area for card to be updated by user. </p>
<button class="button"> Button 1 </button>
<button class="button"> Button 2 </button>
</div>
</div>

Drop Down Card

Traditional image cards with action items at the footer.

Image Cards

Click Here

Text area for card to be updated by user.

DropDown Card HTML Source Code

<div class="dropDownCard">
<img src="../sources/images/conroy.jpg" alt="bman4">
<div class="container">
<h4> <b> Image Cards </b> </h4>
<input type="checkbox" id="collapsible" class="toggle">
<label for="collapsible" class="lbl-toggle"> Click Here </label>
<div class="collapsible-content">
<p> Text area for card to be updated by user. </p>
<button class="button"> Button 1 </button>
<button class="button"> Button 2 </button>
</div>
</div>
</div>

Image Card 1

Image Card with text at bottom but no insert.

Floodlight Proofing Against Really Dark Skies

Can these lights hurt blimps? Why are we using blimps?

Image Card 1 HTML Source Code

<div class="imageCard1">
<img src="../sources/images/batSSkyline.jpg">
<div class="textcontainer">
<h1> <b> Floodlight Proofing Against Really Dark Skies </b></h1>
<h3>Can these lights hurt blimps? Why are we using blimps?</h3>
</div> </div>

Icon Card

Icon Cards with small amounts of text contained in one flowing container

Icon Cards

Text area for card to be updated by user.

DropDown Card HTML Source Code

<div class="iconCard">
<img src="../sources/images/home.png" alt="home">
<div class="text">
<h4><b>Icon Cards</b></h4>
<p>Text area for card to be updated by user.</p>
</div> </div>

How To Use

Grab the CDN link by clicking here. You can use the link to download the source code and review the instructions for how to use the cards in my library.

Please Note!

These are the cards as they'll appear on your project.

Remember; you can update the colors, text, etc., for each listed card can be updated using the SCSS files.

ALSO: When you've clicked on the 'Show HTML' link directly beneath the cards, you'll get a view of the source code of the HTML. You'll need to follow that structure for the cards to render them correctly on your site.

Hire Me!

Email

Email Me

I'm a burgeoning Web Developer who's eager to learn and broaden my understanding of React, JavaScript, JQuery, MySQL, and SASS.

Please, feel free to review my Github page and my portfolio for more information on where I'm currently at in my Web Development journey.