Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 9337

7.2 Podcast Player

A styled player for podcasts. Includes a content section, a list of related references, twitter links to the presenters, and an audio player interface with a subscribe button.

Sitecore.Article.References - Related References Sitecore.Twitter.List - TwitterList Sitecore.Podcast.Player - Player
Sub Components in Design:
    <div class="reading-typography">
    <!-- STARRT: Content -->
        <p>Content Goes here </p>
    <!-- END: Content -->
    <!-- STARRT: Related References -->
        <h3>Related References:</h3>
        <ol class="marker_primary">
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
        </ol>    <!-- END: Related References -->
    <!-- START: Twitter List -->
        <h3>Twitter Links:</h3>
        <ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
        <!-- START: Twitter Link: Duplicate as needed -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END: Twitter Link -->
        <!-- DELETE ME -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END DELETE ME -->
        </ul>    <!-- END: Twitter List -->
    <!-- START: Player -->
        <div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
            <audio class="w_100" controls="">
                <source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
            </audio>
            <div class="grid items_center justify_center">
                <a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
                    to the ACCEL Lite Podcast</a>
            </div>
        </div>   <!-- END: Player -->
</div>
    Copy Code