This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Recipes

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

5.1 Price Table

A collection of price points and the various features of each at a glance.

Recipes.PriceTable.default - default Recipes.PriceTable.preferred - preferred
Sub Components in Design:

    Example

    <nav class="bg_black-1">
        <ul class="flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0">
            <li>
                <div data-element="data-table" class="br_round bg_white p_5:md p_4">
                    <header class="font_display font_4">
                        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
                        <h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
                    </header>
                    <main>
                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.</p>
                        <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
                            <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
                            <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
                            <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
                            <li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
                        </ul>
                    </main>
                    <footer class="m-b_n3"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
                </div>
            </li>        <li>
                    <div data-element="data-table" class="br_round bg_primary-n2 p_5:md p_4 c_white-8">
                        <header class="font_display font_4">
                            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Advanced</h2>
                            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
                        </header>
                        <main>
                            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.</p>
                            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Phased</li>
                                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Automated</li>
                                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Cross-platform</li>
                            </ul>
                        </main>
                        <footer class="m-b_n3"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
                    </div>
                </li>    </ul>
    </nav>
    Copy Code

    Example

  • Advanced

    $99/Month

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.

    • Phased
    • Automated
    • Cross-platform
  • <li>
            <div data-element="data-table" class="br_round bg_primary-n2 p_5:md p_4 c_white-8">
                <header class="font_display font_4">
                    <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Advanced</h2>
                    <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
                </header>
                <main>
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.</p>
                    <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                        <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Phased</li>
                        <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Automated</li>
                        <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Cross-platform</li>
                    </ul>
                </main>
                <footer class="m-b_n3"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
            </div>
        </li>
    Copy Code

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

    5.1.2 Price Table Default

    A combination UI that shows the price point and value for a product with a nav button to start the purchase.

    Example

  • Basic

    $39/Month

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.

    • Quality-focused
    • Phased
    • Automated
    • Cross-platform
  • <li>
        <div data-element="data-table" class="br_round bg_white p_5:md p_4">
            <header class="font_display font_4">
                <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
                <h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
            </header>
            <main>
                <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.</p>
                <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
                    <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
                    <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
                    <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
                    <li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
                </ul>
            </main>
            <footer class="m-b_n3"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
        </div>
    </li>
    Copy Code

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

    5.2 Advertisment Spaces

    Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.

    Example

    advertisment
    <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2">
       <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
          <img src="https://picsum.photos/300/250"/>
       </div>
       <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
    </div>
    Copy Code

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

    5.3 Cookie Banner

    Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.

    • The system will present the learner with a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
    • The system will allow the user to dismiss the pop up by clicking the Accept/OK button
    • The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
    • The system will track and record the users date/time when they accepted the pop up.
    NOTE:
    This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.
    <div class="'fixed' b_0 r_0 l_0 grid justify-content-center bg_acc opacity_8 z_5">
        <div class="flex_row flex">
            <div class="flex_auto c_white p_3 p_4:md">
                <h1>This site uses cookies to improve your experience. </h1>
                <p>By continuing to use our site, you agree to our <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/cookie-policy" target="_blank">Cookie Policy</a>, <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/privacy-policy">Privacy Policy</a> and <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></p></div>
            <div class="flex_auto grid text_center justify_center">
                <a class="btn btn-primary self_center p-x_5 shadow_overlap-light">OK</a>
            </div>
        </div>
    </div>
    Copy Code

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

    5.4 Interactive Extras

    Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.

    Example

    This is a header

    This is a card.

    It has an easy to override visual style, and is appropriately subdued.

    I am so clickable
    <div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="" >
      <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
        This is a header
      </div>
      <img src="https://picsum.photos/400/300">
      <div class="card-section card-body">
        <h4>This is a card.</h4>
    	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
    	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
      </div>
    </div>
    Copy Code

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

    5.4.3 Aspect Ratio

    To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.

    Example s

    Default styling

     

    .aspect_8x10

    lock image to a 8 to 10 ratio

     

    .aspect_1x1

    lock image to a 1 to 1 ratio

     

    .aspect_2x1

    lock image to a 2 to 1 ratio

     

    .aspect_3x2

    lock image to a 3 to 2 ratio

     

    .aspect_4x3

    lock image to a 4 to 3 ratio

     

    .aspect_16x9

    lock image to a 16 to 9 ratio

     

    .aspect_21x9

    lock image to a 21 to 9 ratio

     

    .aspect_4x1

    lock image to a 4 to 1 ratio

     
    <div class="grid-w_2 max-w_20"  data-style="[modifier class]" >
       <div class="m-y_2 lorem-loader [modifier class] ">&nbsp;</div>
    </div>
    Copy Code

    Example

    This is a header

    This is a card.

    It has an easy to override visual style, and is appropriately subdued.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

    <div class="card shadow_2 cell small-6 large-4 max-w_30" >
        <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
        This is a header
        </div>
        <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
            <h4>This is a card.</h4>
            <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
            <img src="https://picsum.photos/400/300">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        </div>
        <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
    </div>
    Copy Code

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

    5.4.5 Stars

    experimental

    Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.

    Experimental: This item is not finalized and might be subject to change

    Example

    <ul class="ul_none flex flex_inline star-rating">
        <li class="flex_shrink"> <i class="fas fa-star"></i></li>
        <li class="flex_shrink"> <i class="fas fa-star"></i></li>
        <li class="flex_shrink"> <i class="fas fa-star"></i></li>
        <li class="flex_shrink"> <i class="fas fa-star"></i></li>
        <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    </ul>
    Copy Code

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

    5.4.6 Lorem Text Loader

    deprecated

    It is often we need to have space held for a return of details or text.

    Deprecated: This set of components was never fully utilized and will be removed for sake of size. 06/01/21

    Example

     

     

     

     

    <div class="max-w_40">
       <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
       <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
       <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
       <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
    </div>
    Copy Code

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

    5.4.7 Is Active Toggle

    Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.

    Example s

    Default styling

    • FA Solid [modifier class] active
    • FA Regular [modifier class] active
    • FA Light [modifier class] active

    .icon-toggle_plus-minus

    Toggle between plus and minus square

    • FA Solid icon-toggle_plus-minus active
    • FA Regular icon-toggle_plus-minus active
    • FA Light icon-toggle_plus-minus active

    .icon-toggle_chevron-up-down

    Toggle a chevron pointing up and then down.

    • FA Solid icon-toggle_chevron-up-down active
    • FA Regular icon-toggle_chevron-up-down active
    • FA Light icon-toggle_chevron-up-down active

    .icon-toggle_chevron-double-up-down

    Toggle the double chevron to point up when active

    • FA Solid icon-toggle_chevron-double-up-down active
    • FA Regular icon-toggle_chevron-double-up-down active
    • FA Light icon-toggle_chevron-double-up-down active

    .icon-toggle_chevron-double-left-right

    Toggle chevron left and right

    • FA Solid icon-toggle_chevron-double-left-right active
    • FA Regular icon-toggle_chevron-double-left-right active
    • FA Light icon-toggle_chevron-double-left-right active

    .icon-toggle_arrow-circle

    Toggle the arrow to have a circle when active.

    • FA Solid icon-toggle_arrow-circle active
    • FA Regular icon-toggle_arrow-circle active
    • FA Light icon-toggle_arrow-circle active

    .icon-toggle_bars-times

    Toggle between bars and times

    • FA Solid icon-toggle_bars-times active
    • FA Regular icon-toggle_bars-times active
    • FA Light icon-toggle_bars-times active

    .icon-toggle_check-sqaure

    Check Marks toggle on and off

    • FA Solid icon-toggle_check-sqaure active
    • FA Regular icon-toggle_check-sqaure active
    • FA Light icon-toggle_check-sqaure active

    .icon-toggle_check-circle

    Check Marks toggle on and off

    • FA Solid icon-toggle_check-circle active
    • FA Regular icon-toggle_check-circle active
    • FA Light icon-toggle_check-circle active

    .icon-toggle_check

    Check Marks toggle on and off

    • FA Solid icon-toggle_check active
    • FA Regular icon-toggle_check active
    • FA Light icon-toggle_check active
    <ul data-style="[modifier class]" class="ul_none m_0 p_0">
    	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
    	<i class="flex_none m-r_5 font_3 fas fa-fw [modifier class]"></i>
    			<span class="flex_auto ">FA Solid [modifier class]</span>
    			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
    	</li>
    	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
    	<i class="flex_none m-r_5 font_3 far  fa-fw [modifier class]"></i>
    			<span class="flex_auto ">FA Regular [modifier class]</span>
    			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
    	</li>
    	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
    	<i class="flex_none m-r_5 font_3 fal fa-fw [modifier class]"></i>
    			<span class="flex_auto">FA Light [modifier class]</span>
    			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
    	</li>
    </ul>
    Copy Code

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

    5.5 Mobile Nav

    deprecated

    Placed in applications used for navigation in mobile apps.

    Deprecated: This pattern was never utilized.

    Example

    <div class="texture-medium bg_shade-3 relative" style="max-width:412px;max-height:732px;width:100vw;height:100vh">
    <div id="nav" class="bg_acc c_white shadow_3 font_2 flex sticky b_0 l_0 r_0 w_100">
        <a href="#/" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0 router-link-exact-active router-link-active"><i class="fas m_2 fa-sign-out-alt"></i></a>
        <a href="#/search" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-search"></i></a>
        <a href="#/shared" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-share-alt-square"></i></span></a>
        <a href="#/history" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-history"></i></span></a>
        <a href="#/about" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-info-square"></i></a>
    </div>
    </div>
    Copy Code

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

    5.9 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

      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

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

      5.9.1 Content List Item: Event

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

        Example

        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
        NOTE:
        This has only one content row, headline is moved down into the rest of the content area.
        <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 flex_column flex_row:md gap-x_4 w_100">
                    <div class="article-content flex-grow_1">
                        <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Guidelines</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">Atrial Fibrillation: Guideline For the Management of Patients</h2>
                        <div class="meta m-t_2:md m-l_0 m-b_3 m-b_0:md font_bold">
                            <span class="c_black-7 m-r_3">Mar 28, 2014</span>
                        </div>
                        <div>
                            <ul class="additional-details list-unstyled font_n1">
                                <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 flex flex_nowrap:lg flex_wrap m-l_0 m-l_4:md m-y_2 self_start:md self_stretch text_center">
                        <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                            <i class="fas fa-book-open font_5 font_9:lg m-b_2:md"></i>
                            <span class="text block lh_2">JACC</span>
                        </a>
                        <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                            <i class="fas fa-file-pdf font_5 font_9:lg m-b_2:md"></i>
                            <span class="text block lh_2">PDF</span>
                        </a>
                        <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                            <i class="fab fa-hubspot font_5 font_9:lg m-b_2:md"></i>
                            <span class="text block lh_2">Hub</span>
                        </a>
                        <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                            <i class="fas fa-search alt font_5 font_9:lg m-b_2:md"></i>
                            <span class="text block lh_2 max-w_10:md">Search within Guidelines</span>
                        </a>
                    </div>
                </div>
            </div>
        </article>
        Copy Code

        Example

        Slides

        Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure

        Apr 11, 2022
        <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="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">Slides</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">Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure</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>
                    </div>
                </div>
            </div>
        </article>
        Copy Code

        Example

        Cardiovascular Team Section

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

        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...

        <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="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><br>
                    </div>
                </div>
            </div>
            <div class="flex flex_row:md flex_column gap-x_4 w_100">
                <div class="flex flex_column-reverse flex_row:md gap-x_4 flex-grow_1">
                    <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>
                </div>
            </div>
        </article>
        Copy Code

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

        5.9.5.1 Calendar Block

        Calendars show the range of dates from start to end of the live moments of the date. It doesn't include the extended dates of on demand.

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

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

        5.9.5.2 Credits

        Credits are used to display the value of the content and what type of certification it offers.

        Recipes.ContentList.Sub.SingleCredit - Credit Chiclets
        Sub Components in Design:

          Example

          • CNE 1
          • CME 1
          • COP 1
          <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>
          Copy Code

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

          5.9.5.3 Credit Chiclets

          This pattern is exactly the same with the needed markup class of the credit color.

          Example s

          Default styling

        • [modifier class] 1
        • CNE

          Nursing Education

        • CNE 1
        • CME

          Medical Education

        • CME 1
        • NOTE:
          This pattern relies on the the inclusion of the credit color codes style sheet.
          <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_[modifier class]-n1 bg_[modifier class] br_solid">
          		<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
          			<span class="flex_auto">[modifier class]</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>
          Copy Code

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

          5.9.5.4 Image Thumbnails

          images thumbnails are used to display the images associated with the content. the aspect of the images are 1:1.

          Example

          <div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
          	<img src="https://picsum.photos/110/110" alt="" class="w_100">
          </div>
          Copy Code

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

          5.10 Ordered Cards

          Having cards order on page to help users find there way through steps can some times be very helpful.

          Example

          First it is bad

          This is a card.

          It has an easy to override visual style, and is appropriately subdued.

          Then it is not right

          This is a card.

          It has an easy to override visual style, and is appropriately subdued.

          At last it is good

          This is a card.

          It has an easy to override visual style, and is appropriately subdued.

          <div class="flex texture_medium counter_reset p_5">
             <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
                <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
                      <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
                <div class="flex_auto p_3">First it is bad</div>
                </div>
                <div class="card-section p-x_4 p-y_3">
                <h4>This is a card.</h4>
                <p>It has an easy to override visual style, and is appropriately subdued.</p>
                </div>
             </div>
                <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
                <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
                      <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
                <div class="flex_auto p_3">Then it is not right</div>
                </div>
                <div class="card-section p-x_4 p-y_3">
                <h4>This is a card.</h4>
                <p>It has an easy to override visual style, and is appropriately subdued.</p>
                </div>
             </div>
                <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
                <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
                      <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
                <div class="flex_auto p_3">At last it is good</div>
                </div>
                <div class="card-section p-x_4 p-y_3">
                <h4>This is a card.</h4>
                <p>It has an easy to override visual style, and is appropriately subdued.</p>
                </div>
             </div>
          </div>
          Copy Code