Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

6.12.1 Content List Item: Event

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

    Example

    Default styling

    Live Meetings

    ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!

    April 22, 2022 - March 01, 2023
    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...

    • Meeting Type: Live Meetings
    • Meeting Venue: Virtual (On Demand)
    • Price: $888
    • Access Type: Free
    iCal
    <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
        <div class="flex flex_row:md flex_column gap-x_4">
            <div class="flex_none" style="width: clamp(75px, 10vw, 125px);">
            	<div class="cal-date text_center font_3">
            		<a class="bg_primary block c_white flex_column flex justify_stretch h:bg_pimary-n2 h:undecorated" href="">
            			<span class="block flex_none font-size_down p-y_1">Apr</span>
            			<span class="block br-b_2 br-t_2 br_solid flex_auto font-size_up-1 font_xbold grid items_center p-x_4 text_center aspect_16x9 "><span class="nowrap">22 - 23
            			</span></span>
            			<span class="block flex_none font-size_down p-y_1">2022</span>
            		</a>
            	</div>
            </div>        <div class="flex_auto m-r_4:md">
                <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Live Meetings</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">ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!</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">April 22, 2022 - March 01, 2023</span>
                </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>
                        <ul class="additional-details list-unstyled font_n1">
                            <li><span class="font_bold">Meeting Type: </span> Live Meetings</li>
                            <li><span class="font_bold">Meeting Venue: </span> Virtual (On Demand)</li>
                            <li><span class="font_bold">Price: </span> $888</li>
                            <li><span class="font_bold">Access Type: </span> Free</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-calendar m-r_3"></i> <span class="nowrap text">iCal</span></a>
                </div>
            </div>
        </div>
    </article>
    Copy Code