Course List

Site administration -> Appearance -> Space -> Block #

Preview

HTML Code

<div class="courses">
    <div class="rui-course-card-deck mt-2">

        <div class="rui-course-card" role="listitem" data-region="course-content">

            <div class="rui-course-card-wrapper">

                <a href="#" tabindex="-1">
                    <figure class="rui-course-card-img">
                        <img src="https://assets.rosea.io/space/demo/course-smpl-img.jpg" alt="">
                    </figure>
                </a>

                <div class="rui-course-card-body">
                    <div class="d-flex mb-1">
                        <h4 class="rui-course-card-title mb-1">
                            <a href="#" class="coursename">
                                Biology Foundation Course Biology Foundation Course
                            </a>
                        </h4>
                    </div>

                    <div class="rui-course-card-text">
                        <div class="no-overflow">Make better videos with the ultimate course on video production, planning, cinematography, editing &amp; distribution.<br>
                            The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text ...</div>
                    </div>

                    <div class="d-inline-flex mt-2">
                        <div class="rui-course-cat-badge">
                            Expert
                        </div>
                    </div>

                </div>
            </div>

            <div class="rui-card-course-contacts">
                <a href="#" class="rui-card-contact" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                    <img src="https://assets.rosea.io/space/demo/avatar.png" class="rui-card-avatar" alt="System Administrator">
                </a>
            </div>


            <div class="rui-course-card-footer">
                <a href="" class="rui-course-card-link btn btn-primary">
                    <span class="rui-course-card-link-text">Get access</span>
                    <svg width="22" height="22" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H4.75"></path>
                    </svg>
                </a>
            </div>



        </div>
        <div class="rui-course-card" role="listitem" data-region="course-content">

            <div class="rui-course-card-wrapper">

                <a href="#" tabindex="-1">
                    <figure class="rui-course-card-img">
                        <img src="https://assets.rosea.io/space/demo/course-smpl-img.jpg" alt="">
                    </figure>
                </a>

                <div class="rui-course-card-body">
                    <div class="d-flex mb-1">
                        <h4 class="rui-course-card-title mb-1">
                            <a href="#" class="coursename">
                                Biology Foundation Course Biology Foundation Course
                            </a>
                        </h4>
                    </div>

                    <div class="rui-course-card-text">
                        <div class="no-overflow">Make better videos with the ultimate course on video production, planning, cinematography, editing &amp; distribution.<br>
                            The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text ...</div>
                    </div>

                    <div class="d-inline-flex mt-2">
                        <div class="rui-course-cat-badge">
                            Expert
                        </div>
                    </div>

                </div>
            </div>

            <div class="rui-card-course-contacts">
                <a href="#" class="rui-card-contact" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                    <img src="https://assets.rosea.io/space/demo/avatar.png" class="rui-card-avatar" alt="System Administrator">
                </a>
            </div>
            <div class="rui-course-card-footer">
                <a href="" class="rui-course-card-link btn btn-primary">
                    <span class="rui-course-card-link-text">Get access</span>
                    <svg width="22" height="22" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H4.75"></path>
                    </svg>
                </a>
            </div>

        </div>
        <div class="rui-course-card" role="listitem" data-region="course-content">

            <div class="rui-course-card-wrapper">

                <a href="#" tabindex="-1">
                    <figure class="rui-course-card-img">
                        <img src="https://assets.rosea.io/space/demo/course-smpl-img.jpg" alt="">
                    </figure>
                </a>

                <div class="rui-course-card-body">
                    <div class="d-flex mb-1">
                        <h4 class="rui-course-card-title mb-1">
                            <a href="#" class="coursename">
                                Biology Foundation Course Biology Foundation Course
                            </a>
                        </h4>
                    </div>

                    <div class="rui-course-card-text">
                        <div class="no-overflow">Make better videos with the ultimate course on video production, planning, cinematography, editing &amp; distribution.<br>
                            The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text ...</div>
                    </div>

                    <div class="d-inline-flex mt-2">
                        <div class="rui-course-cat-badge">
                            Expert
                        </div>
                    </div>

                </div>
            </div>

            <div class="rui-card-course-contacts">
                <a href="#" class="rui-card-contact" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                    <img src="https://assets.rosea.io/space/demo/avatar.png" class="rui-card-avatar" alt="System Administrator">
                </a>
            </div>
            <div class="rui-course-card-footer">
                <a href="" class="rui-course-card-link btn btn-primary">
                    <span class="rui-course-card-link-text">Get access</span>
                    <svg width="22" height="22" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H4.75"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div class="rui-course-card" role="listitem" data-region="course-content">

            <div class="rui-course-card-wrapper">

                <a href="#" tabindex="-1">
                    <figure class="rui-course-card-img">
                        <img src="https://assets.rosea.io/space/demo/course-smpl-img.jpg" alt="">
                    </figure>
                </a>

                <div class="rui-course-card-body">
                    <div class="d-flex mb-1">
                        <h4 class="rui-course-card-title mb-1">
                            <a href="#" class="coursename">
                                Biology Foundation Course Biology Foundation Course
                            </a>
                        </h4>
                    </div>

                    <div class="rui-course-card-text">
                        <div class="no-overflow">Make better videos with the ultimate course on video production, planning, cinematography, editing &amp; distribution.<br>
                            The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text ...</div>
                    </div>

                    <div class="d-inline-flex mt-2">
                        <div class="rui-course-cat-badge">
                            Expert
                        </div>
                    </div>

                </div>
            </div>
            <div class="rui-card-course-contacts">
                <a href="#" class="rui-card-contact" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                    <img src="https://assets.rosea.io/space/demo/avatar.png" class="rui-card-avatar" alt="System Administrator">
                </a>
            </div>
            <div class="rui-course-card-footer">
                <a href="" class="rui-course-card-link btn btn-primary">
                    <span class="rui-course-card-link-text">Get access</span>
                    <svg width="22" height="22" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H4.75"></path>
                    </svg>
                </a>
            </div>

        </div>
    </div>
</div>