Image-Card Component

Description

Image-Card Component provides an image wrapped inside of a card. Card contains heading and optional description and link. Additionally, a hover can also be set for the card. Cards must be contained within a wrapper container, which will display the cards in a default 4 column grid. The grid will resize to a 2 column grid and finally a 1 column grid as the screen size shrinks.

Image-Card Component requires a wrapper container and two JS files to work: one file for the component and one helper file for the wrapper - which will monitor screen size and adjust the wrapper styles accordingly (update this secondary file to change default styles for the grid).

Demo

Available attributes:

data-cardHover - options include: 'True' (OPTIONAL)
data-cardImageURL - specify URL to be used for image
data-cardHeading - specify the heading to appear in the card
data-cardDescription - specify description that should follow the heading (OPTIONAL)
data-cardLink - specify URL to be used for button (OPTIONAL)

Excluded attributes will default to the following:

data-cardHeading - 'Card Heading'

HTML


    <div class="card-container">

        <image-card 

            data-cardHover="True" 

            data-cardImageURL="images/1.jpg" 

            data-cardHeading="Card 1" 

            data-cardDescription ="This is the card description" 

            data-cardLink="https://www.google.com"> 

        </image-card> 

        <!-- add as many cards as desired inside the container-->

    </div>
 


    <script src="imageCard.min.js"></script>
 
    <script src="cardResize.min.js"></script>

Image-Card Component

Description

Demo

Available attributes:

Excluded attributes will default to the following:

HTML

Javascript