Categories List #2

Site administration -> Appearance -> Alpha -> Block #

You can use any HTML block area to use a preset. You can even add an HTML preset anywhere on the page. There are fully customizable and reusable.

Preview

HTML Code

<div class="content">
    <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-icons">
                    <div class="rui-icon-container">
                        <span class="rui-icon-container"><img class="icon" alt="Guest access" title="Guest access" src="https://roseathemes.com/alpha/1/theme/image.php/alpha/enrol_guest/1676737926/withoutpassword"></span>
                    </div>
                </div>

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

                    <a href="#" tabindex="-1">
                        <figure class="rui-course-card-img-top" style="background-image: url(https://roseathemes.com/alpha/1/pluginfile.php/290/course/overviewfiles/course-img-5.jpg);"></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="aalink coursename">
                                    Biology Foundation Course
                                </a>
                            </h4>
                        </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 rui-user-Teacher" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/5/user/icon/alpha/f1?rev=19158" class="rui-card-avatar" alt="System Administrator">
                    </a>
                    <a href="#" class="rui-card-contact rui-user-Teacher" data-toggle="tooltip" data-placement="top" title="Sophia Fox - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/178/user/icon/alpha/f1?rev=10889" class="rui-card-avatar" alt="Sophia Fox">
                    </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-icons">
                    <div class="rui-icon-container">
                        <span class="rui-icon-container"><img class="icon " alt="Guest access" title="Guest access" src="https://roseathemes.com/alpha/1/theme/image.php/alpha/enrol_guest/1676737926/withoutpassword"></span>
                    </div>
                </div>

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

                    <a href="#" tabindex="-1">
                        <figure class="rui-course-card-img-top" style="background-image: url(https://roseathemes.com/alpha/1/pluginfile.php/270/course/overviewfiles/course-img-4.jpg);"></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="aalink coursename">
                                    Gods and Kings: The Art History of Mesopotamia and Arabia
                                </a>
                            </h4>
                        </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 rui-user-Teacher" data-toggle="tooltip" data-placement="top" title="System Administrator - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/5/user/icon/alpha/f1?rev=19158" class="rui-card-avatar" alt="System Administrator">
                    </a>
                    <a href="#" class="rui-card-contact rui-user-Teacher" data-toggle="tooltip" data-placement="top" title="Sophia Fox - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/178/user/icon/alpha/f1?rev=10889" class="rui-card-avatar" alt="Sophia Fox">
                    </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-icons">
                    <div class="rui-icon-container">
                        <span class="rui-icon-container"><img class="icon " alt="Guest access" title="Guest access" src="https://roseathemes.com/alpha/1/theme/image.php/alpha/enrol_guest/1676737926/withoutpassword"></span>
                    </div>
                </div>

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

                    <a href="https://roseathemes.com/alpha/1/course/view.php?id=10" tabindex="-1">
                        <figure class="rui-course-card-img-top" style="background-image: url(https://roseathemes.com/alpha/1/pluginfile.php/215/course/overviewfiles/course-img-3.jpg);"></figure>
                    </a>

                    <div class="rui-course-card-body">
                        <div class="d-flex mb-1">
                            <h4 class="rui-course-card-title mb-1">
                                <a href="https://roseathemes.com/alpha/1/course/view.php?id=10" class="aalink coursename">
                                    Lectures on Greek History and Culture
                                </a>
                            </h4>
                        </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 rui-user-Teacher" data-toggle="tooltip" data-placement="top"
                        title="System Administrator - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/5/user/icon/alpha/f1?rev=19158" class="rui-card-avatar" alt="System Administrator">
                    </a>
                    <a href="#" class="rui-card-contact rui-user-Teacher" data-toggle="tooltip" data-placement="top"
                        title="Sophia Fox - Teacher">
                        <img src="https://roseathemes.com/alpha/1/pluginfile.php/178/user/icon/alpha/f1?rev=10889" class="rui-card-avatar" alt="Sophia Fox">
                    </a>
                </div>


                <div class="rui-course-card-footer">
                    <a href="https://roseathemes.com/alpha/1/course/view.php?id=10"
                        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="https://roseathemes.com/alpha/1/course/view.php?id=5" tabindex="-1">
                        <figure class="rui-course-card-img-top" style="background-image: url(https://roseathemes.com/alpha/1/pluginfile.php/80/course/overviewfiles/course-img-2.jpg);"></figure>
                    </a>

                    <div class="rui-course-card-body">
                        <div class="d-flex mb-1">
                            <h4 class="rui-course-card-title mb-1">
                                <a href="https://roseathemes.com/alpha/1/course/view.php?id=5" class="aalink coursename">
                                    Revision: Chemistry
                                </a>
                            </h4>
                        </div>

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

                    </div>
                </div>
                <div class="rui-course-card-footer">
                    <a href="https://roseathemes.com/alpha/1/course/view.php?id=5"
                        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>
</div>
```

Icons

https://iconoir.com/