Create Interactive Cards

What are interactive cards?

I’ll be perfectly honest with you all. I don’t know what to call this interaction. For this week’s YouTube video, I had the placeholder:

Create Interactive Cards

I fully intended to create a more interesting and creative name, but that never happened. However, I do think this interaction is very interesting - especially for a course homepage or a unit overview page. I created these cards to help guide and direct students who were participating in an online, asynchronous focus group. I wanted something clean and nice to look at. I was also studying neumorphism in photoshop and web design and was looking for an outlet to try out some new things. And that’s where we are today. I’m going to give you my code to help you create similar interactions.

External CSS

The first portion of this interaction consists of code that needs to be uploaded into the Canvas Theme Editor. I would suggest copying and pasting my code directly into your beta or test institution CSS file. Play around with the settings: change the colors, try different dimensions and letter spacing, etc. And of course, you are welcome to use whatever naming conventions you choose.

/*
*
* ==========================================
* INTERACTIVE CARDS
* ==========================================
*
*/

.cardpage {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.cardbody{
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cardcontainer{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1100px;
}
.card{
    width: 300px;
    background: #e0e5ec;
    padding: 40px 30px;
    margin: 20px 10px;
    border-radius: 1rem;
    box-shadow: 5px 5px 10px rgba(163,177,198,.8),
                -9px -9px 16px 5px rgba(255,255,255,.5);
}
.card h4{
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    box-sizing: border-box;
}
.card h5{
    text-align: center;
    color: #9b9b9b;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card p{
    color: #696969;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 0;
    line-height: 1.5rem;
}
.card a{
    display: block;
    padding: 1.2rem;
    text-align: center;
    text-decoration: none;
        background-color: #e0e5ec; 
        border-style:hidden;
    color: #2E3B6A
    margin: 10px 0;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 3px 3px 10px rgba(163,177,198,.8),
                -5px -5px 16px 5px rgba(255,255,255,.5);
    border-radius: 100px;
}
.card a:hover{
    box-shadow: inset 5px 5px 10px rgba(163,177,198,.4),
            inset   -5px -5px 10px rgba(255,255,255,.4);
    background-color: #e0e5ec; 
}

HTML

Below is a pretty simple and straightforward bit of HTML code for you to render the cards on your Canvas page. Follow the video instructions for a demonstration. You will first need three <div>’s, the first with a class="cardpage", the second with class="cardbody", and the third with class="cardcontainer". Each individual card will sit within these <div>’s. The individual card with have a class="card cardpage". From here, the elements of the card will be as such:

• <h4> This is the title of the card - keep it short and simple

• <h5> This is just a little bit of subtitle text

• <img> I recommend uploading some simple images. I use images that are about 200px wide, 150px tall. Best approach is to upload the image directly into Canvas, insert it on the page, and copy the URL and place it in the code below.

• <a> This anchor tag is the hyperlinked text. I have different color for the text whether it is an active link or a placeholder (coming soon!). When it is active, you’ll want to put the URL in. I think it’s best to use it for only internal Canvas pages. When you link to an external webpage, you get the “external source” icon, and the word(s) become underlined, even if you specify text-decoration: none; in the internal CSS (see the screenshot below).

If you copy the code below and paste it onto your Canvas test page, you will have access to both a live and a “coming soon” card. Upload your images, replace the href URL’s with your own course links, and change out the wording. Once you get a card created, you can duplicate it and create a navigation menu.

<div class="cardpage" style="margin-top: 50px;">
    <div class="cardbody">
        <div class="cardcontainer">
            <div class="card cardpage">
                <h4>Introductions</h4>
                <h5>Get to know everyone</h5>
                <img style="display: block; margin: 20px auto 20px auto;" src="URL" />
                <a style="text-decoration: none; color: #2e3b6a;" title="Introductions and Icebreaker" href="URL">Participate</a>
            </div>
            <div class="card cardpage">
                <h4>Midterm</h4>
                <h5>Instructions for project</h5>
                <img style="display: block; margin: 20px auto 20px auto;" src="URL" />
                <a class="btn" style="color: #9b9b9b;">Coming soon</a>
            </div>
        </div>
    </div>
</div>

I recommend this interaction for course homepages and navigation pages. It’s a slick interface that is pleasant to look at. Try playing around with the properties: change the font size, color, and spacing, give the card a different width and height. Instead of a series of card, perhaps you’ll want to create a template for a large card, such as a “did you know” information box that you can float to the side. Perhaps you can remove the box-shadows and create more of a flat interaction. Have fun with this. And…

Happy teaching and learning!

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas