Cards

Warning: Advanced Material

This page demonstrates creating a page of cards in the Cuyamaca College instance of Canvas. This will not work in the free version or any other college at this time. It is important to follow the steps below exactly to get it to work. A single misstep breaks the whole thing.

Once I'm convinced this really works for faculty, I'll post the CSS to the Canvas Community so other colleges can have it too. It is created using a bulleted list and requires changing only one line in the HTML. 

What you are creating

 

Instructions

This video shows the steps that are detailed below.

 
Plain English Instructions:

  1. Upload your image files
  2. Create a bulleted list with the text of the links
  3. Insert images before the first letter of each list item
  4. Highlight the image and text for each list item and use the Links sidebar to link to places in your course
  5. Add a line break between each image and link text

 

Detailed Instructions

  1. Upload images using Files before starting. Images must be 150px x 150px.
  2. Edit a Content Page and click inside the RCE
  3. Click the Bullet List toolbar icon to start a bulleted list
  4. Type the text of the links you want to have on each card. For example,
    • Week 1
    • Week 2
    • Week 3
    • Week 4
  5. Click the link above the toolbars that says "HTML Editor"
  6. Replace the text in the HTML code that says <ul> with
    <ul class="cc-cards">
  7. Return to the RCE by clicking the link that says Rich Content Editor

In this section you will add images to the cards. If you just want text cards without images, go to step 12. 

  1. Take a deep breath. You're doing great so far!
  2. Put the cursor in front of the W on the Week 1 bullet (or whatever your link text says)
  3. Click the Embed Image toolbar icon and find the image file you want to use for the first bullet under the Canvas tab. If the image is just there for decoration, type "decorative" in the alt text field, otherwise type a short description there.
  4. Click the Update button to finish selecting your image.

Now you're going to add a link to both the image and the text.

  1. Highlight both the image and the text
  2. Select the module you want the card to link to in the sidebar or use the the Link to URL icon if it's to another website.

Next move the text below the image instead of to the right of it.

  1. Put the cursor between the image and the text. This can be hard to do, so use the left and right arrow keys to get it in the right spot.
  2. Press Shift-Enter (hold down the shift key while carefully pressing the Enter key only one time). This is the step I mess up more than any other. Make sure you're holding that shift key down before pressing Enter!

It doesn't look like it, but you're done, so Save! The cards won't show as anything but the bulleted list in the RCE, but as soon as you Save, you should see your cards. Let me know how I can improve this!

 

HTML

<ul class="cc-cards">

    <li><a href="#"> <img src="https://unsplash.it/150/150?image=950" alt="" /> <br />Week 1 </a></li>
    <li><a href="#"> <img src="https://unsplash.it/150/150?image=1080" alt="" /> <br />Week 2 </a></li>
    <li><a href="#"> <img src="https://unsplash.it/150/150?image=1002" alt="" /> <br />Week 3 </a></li>
<!--  copy/paste <li> tag as many times as needed  -->
</ul>

 

Keep in mind that real code in the HTML editor is about 10 times more complicated than this because you will add links to real pages, and images with long messy names. Making this code work correctly can be a challenge. The <a> tag has to wrap around an <img> tag, followed by a new line break <br>, then the link text.

Images from unsplash Links to an external site. and unsplash.it Links to an external site.