Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Sitecore

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

7.1.1 Related References

An organized list of references or citations. This structure helps users to find additional resources or sources related to the content.

Example

Default styling

Related References:

  1. 0000000000000000000000
  2. 0000000000000000000000
  3. 0000000000000000000000
<h3>Related References:</h3>
<ol class="marker_primary">
    <li>0000000000000000000000</li>
    <li>0000000000000000000000</li>
    <li>0000000000000000000000</li>
</ol>
Copy Code

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

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

    7.2.1 Podcast Player

    A multimedia component designed specifically for audio playback. This player features controls for playing, pausing, adjusting volume, and more. It includes a fallback link for browsers that don't support HTML5 audio, as well as a prominent call to action to encourage podcast subscription.

    <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>
    Copy Code

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

    7.3.1 Twitter Link List

    A list of Twitter profiles, each accompanied by a name. Provides an organized display for multiple Twitter links, which could be useful for events, authors, or featured users.

    Sitecore.Twitter.Button - Twitter Button
    Sub Components in Design:
      <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>
      Copy Code

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

      7.3.2 Twitter Button

      A styled button for linking to a Twitter profile. The button includes a Twitter icon and a username.

      <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>
      Copy Code