I've been working on developing a so-called "learning card" lately and one of the ways I can finally get it to both be functionally sound and look visually appealing is by using slots. The tag in HTML is an element that lets us create separate DOM trees with our own custom elements and bring these trees together. Below is a basic example of what this looks like in HTML: 
I've been using slots similar to this to try and style the "learning card" in different ways. Below is an example of the card I am working on, but keep in mind this card is subject to change over time: 
To make this project a bit easier to manage and to get a good overview of how elements within a card interact with each other I've seperated this card project into 4 different parts: An icon element, A card scaffold, A banner with a header, sub header, and icon, combining scaffold and icon into one card. A bit easier said than done but this is where slots come in...
By using Slots we can pass HTML into the header, sub header, and body of the card to style it in ways that we want. The first thing I did was the header: 
This is just a basic example of the header title and two slots for our header and sub header that allows us to pass HTML into these slots.
Now that I have a sub header and header slot for my card I can focus on putting icons into the Card and putting content into the card body. Below is an example of what code I used to render my icons on the card: 
This allows me to put custom icons such as a lightbulb, question mark, and beaker on the card to make it more stylish and visually appealing.
Getting content into the body of the card was a little bit more difficult, but I was able to get some bullet points into the card with this code below: 
Now every time I click on the card banner the body content displays two bullet points:
*Plz
*Work
Thankfully my plea was answered and this code ACTUALLY WORKED and now I can actually put some meaningful content into the body of the card other than "Plz work".
Overall my card is still very much a work in progress and with all of the success I've discussed in this post I've had just as many setbacks, errors, and issues that I will likely continue to run into until this card is finalized. If you want to see how I am progressing with the "learning card" you can see my progress here: https://github.com/TheKodingKrab/project-two
Top comments (0)