Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

6.12 Content List Item

This is how content items should be displayed in list form.

Recipes.ContentList.Sub.Credits - Credits Recipes.ContentList.Sub.Thumbnail - Thumbnail
Sub Components in Design:

    Example

    Default styling

    editor’s pick
    Cardiovascular Team Section

    Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology

    On Demand Till:June 11, 2022
    • CNE 1
    • CME 1
    • COP 1

    The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...

    • Keywords:
    • Acute Coronary Syndrome
    • Cardiac Surgical Procedures
    • Coronary Artery Bypass
    • Heart Arrest
    • Heart Failure
    • Hemorrhage
    • Hospital Mortality
    • Ischemic Attack, Transient
    • Lower Extremity
    • Myocardial Infarction
    • Myocardial Revascularization
    • Patient Care Team
    • Percutaneous Coronary Intervention
    • Peripheral Arterial Disease
    • Risk Factors
    • Secondary Prevention
    • Shock, Cardiogenic
    • Stroke
    • Vascular Diseases
    • Webinars: Live
    • Online: Yes
    • Access Type: Paid
    • Price: $888
    • Document Type: Guidelines
    • Publish Date: Mar 28, 2014
    • Focused Update: Jan 28, 2019 (Open Update)
    Summary iCal PDF PDF JACC Search
    NOTE:
    Merge all the things.
    <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
        <div class="absolute r_n1 t_3 text_center flex flex_column:md justify_end align-right font_n2:md font_n3 overflow_hidden">
            <div class="flex flex_row justify_end c_white"><span class="flex_shrink p-y_2 p-x_3 br_1 br_solid br_white-7 bg_acc-1"><span class="p-x_2 m-t_1 m-b_2">editor’s pick</span> <i class="fas fa-fw m-t_1 m-b_2 fa-thumbs-up"></i></span></div>
        </div>
        <div class="flex flex_row:md flex_column gap-x_4">
            <div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
            	<img src="https://picsum.photos/110/110" alt="" class="w_100">
            </div>        <div class="flex_auto m-r_4:md">
                <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Cardiovascular Team Section</span>
                <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology</h2>
                <div class="meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold">
                    <span class="c_black-7 m-r_3">Apr 11, 2022</span>
                    <a href="/">Julianne Fallon, PharmD</a>
                </div>
                <div class="font-size_down font_bold m-b_0:md m-b_3 m-l_0:md m-l_3 meta">
                    <span class="c_black-6 font_italic m-r_3"><strong class="p-r_3">On Demand Till:</strong>June 11, 2022</span>
                </div>
                <div class="credits">
                	<ul class="ul_none flex flex_wrap font_n2 font_n1:md font_n1:print self_end">
                		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                			<div class="inline-block br_1 br_radius c_white  br_CNE-n1 bg_CNE br_solid">
                				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                					<span class="flex_auto">CNE</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                				</div>
                			</div>
                		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                			<div class="inline-block br_1 br_radius c_white  br_CME-n1 bg_CME br_solid">
                				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                					<span class="flex_auto">CME</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                				</div>
                			</div>
                		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                			<div class="inline-block br_1 br_radius c_white  br_COP-n1 bg_COP br_solid">
                				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                					<span class="flex_auto">COP</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                				</div>
                			</div>
                		</li>	</ul>
                </div>        </div>
        </div>
        <div class="flex flex_row:md flex_column gap-x_4">
            <div class="flex flex_column-reverse flex_row:md gap-x_4">
                <div class="article-content">
                    <p class="excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>
                    <div class="authors-list p-y_1 font_n2:md font_n3">
                        <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Ty J. Gluckman, MD, MHA, FACC</a>
                        <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Nicole M. Bhave, MD, FACC</a>
                        <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Larry A. Allen, MD, MHS, FACC</a>
                        <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Eugene H. Chung, MD, MSc, FACC</a>
                        <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Erica S. Spatz, MD, MHS, FACC</a>
                        <span class="collapse" id="authorToggle">
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Enrico Ammirati, MD, PhD</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Aaron L. Baggish, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Biykem Bozkurt, MD, PhD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>William K. Cornwell, III, MD, MSCS</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Kimberly G. Harmon, MD</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Jonathan H. Kim, MD, MSc, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Anuradha Lala, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Benjamin D. Levine, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Matthew W. Martinez, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Oyere Onuma, MD, MSc</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Dermot Phelan, MD, PhD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Valentina O. Puntmann, MD, PhD</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Saurabh Rajpal, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Pam R. Taub, MD, FACC</a>
                            <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Amanda K. Verma, MD, FACC</a>
                        </span>
                        <a class="font_bold" data-bs-toggle="collapse" href="#authorToggle" role="button" aria-expanded="false" aria-controls="authorToggle">Show More</a>
                    </div>
                    <div class="topics-list p-y_1 font_n2:md font_n3">
                        <ul class="ul_inline-comma">
                            <li class="no-after font_bold">Clinical Topics: </li>
                            <li><a href="/">Acute Coronary Syndromes</a></li>
                            <li><a href="/">Arrhythmias and Clinical EP</a></li>
                            <li><a href="/">Cardiac Surgery</a></li>
                            <li><a href="/">Heart Failure and Cardiomyopathies</a></li>
                            <li><a href="/">Invasive Cardiovascular Angiography and Intervention</a></li>
                            <li><a href="/">Prevention</a></li>
                        </ul>
                        <div class="collapse" id="topicsToggle">
                            <ul class="ul_inline-comma">
                                <li><a href="/">Vascular Medicine</a></li>
                                <li><a href="/">Atherosclerotic Disease (CAD/PAD)</a></li>
                                <li><a href="/">Implantable Devices</a></li>
                                <li><a href="/">SCD/Ventricular Arrhythmias</a></li>
                                <li><a href="/">Aortic Surgery</a></li>
                                <li><a href="/">Cardiac Surgery and Arrhythmias</a></li>
                                <li><a href="/">Cardiac Surgery and Heart Failure</a></li>
                                <li><a href="/">Acute Heart Failure</a></li>
                                <li><a href="/">Interventions and ACS</a></li>
                                <li><a href="/">Interventions and Vascular Medicine</a></li>
                            </ul>
                        </div>
                        <a class="font_bold" data-bs-toggle="collapse" href="#topicsToggle" role="button" aria-expanded="false" aria-controls="topicsToggle">Show More</a>
                    </div>
                    <div class="keywords-list p-y_1 font_n2:md font_n3">
                        <ul class="ul_inline-comma">
                            <li class="no-after font_bold">Keywords: </li>
                            <li>Acute Coronary Syndrome</li>
                            <li>Cardiac Surgical Procedures</li>
                            <li>Coronary Artery Bypass</li>
                            <li>Heart Arrest</li>
                            <li>Heart Failure</li>
                        </ul>
                        <div class="collapse" id="keywordsToggle">
                            <ul class="ul_inline-comma">
                                <li>Hemorrhage</li>
                                <li>Hospital Mortality</li>
                                <li>Ischemic Attack, Transient</li>
                                <li>Lower Extremity</li>
                                <li>Myocardial Infarction</li>
                                <li>Myocardial Revascularization</li>
                                <li>Patient Care Team</li>
                                <li>Percutaneous Coronary Intervention</li>
                                <li>Peripheral Arterial Disease</li>
                                <li>Risk Factors</li>
                                <li>Secondary Prevention</li>
                                <li>Shock, Cardiogenic</li>
                                <li>Stroke</li>
                                <li>Vascular Diseases</li>
                            </ul>
                        </div>
                        <a class="font_bold" data-bs-toggle="collapse" href="#keywordsToggle" role="button" aria-expanded="false" aria-controls="keywordsToggle">Show More</a>
                    </div>
                    <div>
                        <ul class="additional-details ul_none font_n1">
                            <li><span class="font_bold">Webinars: </span> Live</li>
                            <li><span class="font_bold">Online: </span> Yes</li>
                            <li><span class="font_bold">Access Type:</span> Paid</li>
                            <li><span class="font_bold">Price: </span> $888</li>
                            <li><span class="font_bold">Document Type:</span> Guidelines</li>
                            <li><span class="font_bold">Publish Date:</span> Mar 28, 2014</li>
                            <li><span class="font_bold">Focused Update:</span> Jan 28, 2019 <a class="link c_primary h:c_primary-n2" href="/" target="_blank">(Open Update)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="article-tools m-l_0 m-l_4:md m-y_2">
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-volume m-r_3"></i> <span class="nowrap text">Summary</span></a>
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-calendar m-r_3"></i> <span class="nowrap text">iCal</span></a>
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-file-pdf m-r_3"></i> <span class="nowrap text">PDF</span></a>
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-file-pdf m-r_3"></i> <span class="nowrap text">PDF</span></a>
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-book-open m-r_3"></i> <span class="nowrap text">JACC</span></a>
                    <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-search alt m-r_3"></i> <span class="nowrap text">Search</span></a>
                </div>
            </div>
        </div>
    </article>
    Copy Code