imsdev.github.io/web-components/course-card/course-card.html at 58f14ffe56e501e01c4d553d919f19a2e22d7650 · imsdev/imsdev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- HTML template -->
<link href="web-components/course-card/course-card.css" rel="stylesheet">
<div class="course-card">
    <div>
        <img class="course-img" src="">
    </div>
    <div>
        <div>
            <h2 class="course-name"></h2>
            <p class="course-desc"></p>
            <div class="column-g">
                <div class="inline-g">
                    <p>Level: <span class="course-level"></span></p>
                    <p>Cost: <span class="course-cost"></span></p>
                    <p>Badge: <span class="course-badge"></span></p>
                    <p>Time: <span class="course-time"></span></p>
                </div>
                <!-- Uncomment if using self-paced/live distinction -->
                <!-- <div class="inline-g">
                    <p>Self-paced:</p>
                    <div>
                        <p>Level: <span class="course-level"></span></p>
                        <p>Cost: <span class="course-cost"></span></p>
                        <p>Badge: <span class="course-badge"></span></p>
                        <p>Time: <span class="course-time"></span></p>
                    </div>
                </div> -->
                <div class="inline-g live-course">
                    <p>Instructor-led:</p>
                    <div>
                        <p>Level: <span class="live-level"></span></p>
                        <p>Cost: <span class="live-cost"></span></p>
                        <p>Badge: <span class="live-badge"></span></p>
                        <p>Time: <span class="live-time"></span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="link-g">
            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
            <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
        </div>
    </div>
</div>