Course card

<div class="ds-card-set">

    <div href="http://example.org" class="ds-card ds-card--linked">
        <a href="http://example.org" class="ds-card__link"></a>
        <header class="ds-card__header">
            <div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>
            
            <span class="ds-card__tag-alt">New course</span>
        </header>

        <div class="ds-card__body">
            <h3 class="ds-card__heading">Bachelor of Business Analytics</h3>
            <p>Develop your analytical skills and data-driven strategic thinking. Help businesses identify commercial opportunities and solve problems.</p>
        </div>
    </div>

    <div href="http://example.org" class="ds-card ds-card--linked">
        <a href="http://example.org" class="ds-card__link"></a>
        <header class="ds-card__header">
            <div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>

            <span class="ds-card__tag">Featured course</span>
        </header>

        <div class="ds-card__body">
            <h3 class="ds-card__heading">Bachelor of Business</h3>
            <p>Get ready for your business career. Enter the workforce equipped with the skills and knowledge employers demand.</p>
        </div>
    </div>

    <div href="http://example.org" class="ds-card ds-card--linked">
        <a href="http://example.org" class="ds-card__link"></a>
        <header class="ds-card__header">
            <div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>

            <span class="ds-card__tag-alt">New course</span>

            <div class="ds-card__save">
                <input id="save-1003820" class="save-course-icon" data-course-id="1003820" data-course-name="Bachelor of Business Analytics" type="checkbox" value="save this course" title="save this course" data-ltu-cm-bp="SaveCourseClicked">
                <label for="save-1003820">Save this course</label>
            </div>
        </header>

        <div class="ds-card__body">
            <h3 class="ds-card__heading">Bachelor of Business Analytics</h3>
            <p>Develop your analytical skills and data-driven strategic thinking. Help businesses identify commercial opportunities and solve problems.</p>
        </div>
    </div>

    <div href="http://example.org" class="ds-card ds-card--linked">
        <a href="http://example.org" class="ds-card__link"></a>
        <header class="ds-card__header">
            <div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>

            <span class="ds-card__tag">Featured course</span>

            <div class="ds-card__save">
                <input id="save-836880" class="save-course-icon" data-course-id="836880" data-course-name="Bachelor of Business" type="checkbox" value="save this course" title="save this course" data-ltu-cm-bp="SaveCourseClicked">
                <label for="save-836880">Save this course</label>

                <div id="save-course-note" class="interaction-note"><button class="close-note" onclick="closeNote(this); return false;" data-ltu-cm-bp="ClosePopUpClicked"></button><p class="zero-margin">Bachelor of Business added to "<a href="/courses/my-saved-courses?favourites=836928,836880" data-ltu-cm-bp="ViewSavedCoursesPopUpClicked">My saved courses</a>". Now you can <a class="compare-course-link" href="/courses/my-saved-courses/compare-courses?type=UG&amp;favourites=836928,836880">Compare them</a>.</p></div>
            </div>
        </header>

        <div class="ds-card__body">
            <h3 class="ds-card__heading">Bachelor of Business</h3>
            <p>Get ready for your business career. Enter the workforce equipped with the skills and knowledge employers demand.</p>
        </div>
    </div>

</div>

<!-- <div class="ds-block">

    <div class="ds-course-card">
        <div class="ds-course-card__header">

            <p class="ds-course-card__tags">
                <span class="ds-course-card__tag ds-course-card__tag--featured ds-icon-clock">Starting soon</span>
                <span class="ds-course-card__tag ds-icon-award">Degree</span>                           
                <span class="ds-course-card__tag ds-icon-star">Popular course</span>
            </p>

            <h3 class="ds-course-card__course-name">Bachelor of Business</h3>
            <p  class="ds-course-card__course-description">Get ready for your business career. Enter the workforce equipped with the skills and knowledge employers demand.</p>

        </div>
        <div class="ds-course-card__body">
            <div class="ds-tabs">
                <div class="ds-tabs-nav ds-tabs-nav--in-card" role="tablist">
                    <button class="ds-tabs-nav__tab ds-tabs-nav__tab--in-card" role="tab"
                        aria-selected="true"
                        aria-controls="tab1"
                        id="tab1trigger">Melbourne</button>
            
                    <button class="ds-tabs-nav__tab ds-tabs-nav__tab--in-card" role="tab"
                        aria-selected="false"
                        aria-controls="tab2"
                        id="tab2trigger"
                        tabindex="-1">Sydney</button>
            
                    <button class="ds-tabs-nav__tab ds-tabs-nav__tab--in-card" role="tab"
                        aria-selected="false"
                        aria-controls="tab3"
                        id="tab3trigger"
                        tabindex="-1">Other</button>
                </div>
            
                <div class="ds-tabs-content">
                    <div id="tab1" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab1trigger">
                        <div class="ds-table-wrapper">
                            <table class="ds-table ds-table--unstyled">
                                <tbody>
                                    <tr>
                                        <th>ATAR:</th>
                                        <td>65.40</td>
                                    </tr>
                                    <tr>
                                        <th>Start dates:</th>
                                        <td>Semester 1 (March 2020), Term 4 (July 2020), Semester 2 (July 2020), Term 5 (September 2020), Term 6 (November 2020), Summer (November 2020)</td>
                                    </tr>
                                    <tr>
                                        <th>Duration:</th>
                                        <td>3 years full-time or part-time equivalent</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <p class="ds-card--course__CTA"><a href="#" class="ds-btn-primary ds-icon-chevron-right" href="#">View course</a></p>
                    </div>
            
                    <div id="tab2" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab2trigger" hidden>
                        <div class="ds-table-wrapper">
                            <table class="ds-table ds-table--unstyled">
                                <tbody>
                                    <tr>
                                        <th>ATAR:</th>
                                        <td>65.40</td>
                                    </tr>
                                    <tr>
                                        <th>Start dates:</th>
                                        <td>Semester 1 (March 2020), Term 4 (July 2020), Semester 2 (July 2020), Term 5 (September 2020), Term 6 (November 2020), Summer (November 2020)</td>
                                    </tr>
                                    <tr>
                                        <th>Duration:</th>
                                        <td>3 years full-time or part-time equivalent</td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="ds-card--course__CTA"><a href="#" class="ds-btn-primary ds-icon-chevron-right" href="#">View course</a></p>
                        </div>
                    </div>

                    <div id="tab3" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab3trigger" hidden>
                        <div class="ds-table-wrapper">
                            <table class="ds-table ds-table--unstyled">
                                <tbody>
                                    <tr>
                                        <th>ATAR:</th>
                                        <td>65.40</td>
                                    </tr>
                                    <tr>
                                        <th>Start dates:</th>
                                        <td>Semester 1 (March 2020), Term 4 (July 2020), Semester 2 (July 2020), Term 5 (September 2020), Term 6 (November 2020), Summer (November 2020)</td>
                                    </tr>
                                    <tr>
                                        <th>Duration:</th>
                                        <td>3 years full-time or part-time equivalent</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>  
                        <p class="ds-card--course__CTA"><a href="#" class="ds-btn-primary ds-icon-chevron-right" href="#">View course</a></p>
                    </div>

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

</div> -->
<div class="ds-block">
<div href="http://example.org" class="ds-card">
    <header class="ds-card__header">

        <span class="ds-card__tag-course">Popular course</span>
    </header>

    <div class="ds-card__body">
        <h3 class="ds-card__heading">Bachelor of Business Analytics</h3>
        <p class="ds-card__subheading">Undergraduate course</p>

        <div class="ds-tabs">
            <div class="ds-tabs-nav" role="tablist">
                <button class="ds-tabs-nav__tab" role="tab" aria-selected="true" aria-controls="tab1"
                    id="tab1trigger">Melbourne</button>

                <button class="ds-tabs-nav__tab" role="tab" aria-selected="false" aria-controls="tab2"
                    id="tab2trigger" tabindex="-1">Sydney</button>
            </div>

            <div class="ds-tabs-content">
                <div id="tab1" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab1trigger">
                    <div class="ds-table-wrapper">
                        <table class="ds-table ds-table--unstyled">
                            <tbody>
                                <tr>
                                    <th>ATAR:</th>
                                    <td>65.40</td>
                                </tr>
                                <tr>
                                    <th>Start dates:</th>
                                    <td>Multiple start dates at various locations</td>
                                </tr>
                                <tr>
                                    <th>Duration:</th>
                                    <td>3 years full-time or part-time equivalent</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="tab2" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab2trigger"
                    hidden>
                    <div class="ds-table-wrapper">
                        <table class="ds-table ds-table--unstyled">
                            <tbody>
                                <tr>
                                    <th>ATAR:</th>
                                    <td>75.40 </td>
                                </tr>
                                <tr>
                                    <th>Start dates:</th>
                                    <td>Multiple start dates at various locations</td>
                                </tr>
                                <tr>
                                    <th>Duration:</th>
                                    <td>3 years full-time or part-time equivalent</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
           
            <div class="course-card__actions">
                <a class="ds-btn-primary ds-icon-chevron-right" href="#">View course</a>
                <button data-saved="false" class="ds-btn ds-icon-heart ds-icon--before ds-card__save--course-search" aria-haspopup="true">Save and compare</button>
         
                    <div id="save-course-note" class="interaction-note"><button class="close-note" onclick="closeNote(this); return false;" data-ltu-cm-bp="ClosePopUpClicked"></button><p class="zero-margin">Bachelor of Business added to "<a href="/courses/my-saved-courses?favourites=836928,836880" data-ltu-cm-bp="ViewSavedCoursesPopUpClicked">My saved courses</a>". Now you can <a class="compare-course-link" href="/courses/my-saved-courses/compare-courses?type=UG&amp;favourites=836928,836880">Compare them</a>.</p></div>
                </div>
  
        </div>
    </div>
</div>
</div>