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 8693

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

    Default styling

    • 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
    • primary

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

      • primary
      • Automated
      • Cross-platform
    • secondary

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

      • secondary
      • Automated
      • Cross-platform
    NOTE:
    Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.
    <ul class="gap_5 ul_none grid column_1 columns_2:md columns_3:lg">
        <li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light ">
                <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:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
        </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_primary-n2">
            <header class="font_display font_4">
                <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">primary</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>primary</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:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
        </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_secondary-n2">
            <header class="font_display font_4">
                <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">secondary</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>secondary</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:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
        </li></ul>
    Copy Code

    Example

    Default styling

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

    • Automated
    • Cross-platform
  • <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 "></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></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:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li>
    Copy Code

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

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

    Default styling

  • 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 data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light ">
            <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:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
    </li>
    Copy Code

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

    6.2 Advertisment Spaces

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

    Example

    Default styling

    advertisment
    <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
       <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
          <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
       </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 7172

    6.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:md flex_column 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_none grid justify_center p_5:md p_4 text_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 9189

    6.4.1 Card Group

    experimental

    A component group containing multiple instances of the "Recipes.Edu.Card" component, with different classes modifying the appearance of each card.

    Card - Recipes.Edu.Card
    Sub Components in Design:

      Example

      Default styling

      Heart Failure

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      Special

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      Acute Cardiac Transplant Rejection (Version 6)

      What You Will Learn:

      Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

      caution:
      This item is not finalized and might be subject to change.
      <section class="reading-typography">
      <h2>Heart Failure</h2>
      <div class="grid columns_2:md columns_3:lg gap_4">
          <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_hf" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div>    <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_hf" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div>    <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_hf" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div></div>
      </section>
      <section class="reading-typography">
      <h2>Special</h2>
      <div class="grid columns_2:md columns_3:lg gap_4">
          <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_special" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div>    <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_special" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div>    <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
              <div>
                  <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 bg_special" data-item="CardLabel">
                      Acute Cardiac Transplant Rejection
                      <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                  </h2>
                  <div class="p-x_4">
                      <h3 class="c_black font-size_up font_medium font_display">
                          What You Will Learn:
                      </h2>
                      <div class="font-size_0" data-item="LearningDiscription">
                          <p>
                              Know the clinical pharmacology and use of immunosuppressive
                              medications and other interventions in heart transplant patients in
                              the treatment of rejection.
                          </p>
                      </div>
                  </div>
                  </div>
                  <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                      <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                          <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                      </div>
                      <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                          <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                              <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                              <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                              <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                          </ul>
                          <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                              Heart Failure</a>
                      </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                          <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                              <li class="font_bold no-after">Learning Domain:</li>
                              <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                              <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                          </ul>
                      </aside>        </footer>
          </div></div>
      </section>
      Copy Code

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

      6.4.2 EDU Card

      The EDU Card is a content display component that gives a brief summary of an educational topic. It includes a label, description of what the user will learn, supporting COCATS references, a link to further details, and a call-to-action button.

      caution: This item is not finalized and might be subject to change Recipes.Edu.Card.Sub.LearningDomainTags - Tag List Recipes.Edu.Card.Sub.COCATSReference - COCATS Reference
      Sub Components in Design:

        Example s

        bg_hf

        Coloring the header of the card with the color-code from pathways_v2 colors for 'Heart Failure'.

        Acute Cardiac Transplant Rejection (Version 6)

        What You Will Learn:

        Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

        bg_special

        Coloring the header of the card with the color-code from pathways_v2 colors for 'Special'.

        Acute Cardiac Transplant Rejection (Version 6)

        What You Will Learn:

        Know the clinical pharmacology and use of immunosuppressive medications and other interventions in heart transplant patients in the treatment of rejection.

        NOTE:
        Be aware This pattern requires the innclusion of the Pathway_v2 color-code styles sheet.
        <div class="br_1 br_black-3 br_radius br_solid flex flex_column isolate_isolation justify_between relative shadow_overlap-light isolate_isolation" data-item="CARD">
            <div>
                <h2 class="bg_black-3 c_white font-size_up-1 font_display p_4 text-shadow_black-1 font_display m_0 lh_2 [modifier class]" data-item="CardLabel">
                    Acute Cardiac Transplant Rejection
                    <span class="opacity_8 block font-size_down-2 font_medium lh_3" data-item="CardSubLabel">(Version 6)</span>
                </h2>
                <div class="p-x_4">
                    <h3 class="c_black font-size_up font_medium font_display">
                        What You Will Learn:
                    </h2>
                    <div class="font-size_0" data-item="LearningDiscription">
                        <p>
                            Know the clinical pharmacology and use of immunosuppressive
                            medications and other interventions in heart transplant patients in
                            the treatment of rejection.
                        </p>
                    </div>
                </div>
                </div>
                <footer class="br-t_1 br_black-2 br_dotted  m-t_auto ">
                    <div data-item="CTA"  class="grid items_center justify_center p-y_3">
                        <a href="http://www.google.com" class="z_1 not-link btn btn-secondary expanded-click-area extedned-click-area h:bg_primary" data-item="CallToActionURL">Get Started</a>
                    </div>
                    <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
                        <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                            <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                            <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                            <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
                        </ul>
                        <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                            Heart Failure</a>
                    </div>            <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
                        <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                            <li class="font_bold no-after">Learning Domain:</li>
                            <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                            <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
                        </ul>
                    </aside>        </footer>
        </div>
        Copy Code

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

        6.4.2.1.1 COCATS Reference (Core Cardiology Training Symposium)
        experimental

        This component is used to reference the Core Cardiology Training Symposium (COCATS) materials related to the content. It lists the tables and skills that are associated with the content and provides a link to the referenced document.

        caution:
        This item is not finalized and might be subject to change
        <div data-item="COCATS" class="bg_black-1 br-t_1 br_black-3 br_solid font_ui p-b_3 p-t_0 p-x_3 z_2 relative">
            <ul class="font-size_down-2 ul_inline-pipe ul_list-comma font_ui">
                <li class="c_acc font_bold no-after uppercase">Supporting COCATS:</li>
                <li data-item="TableReference">MK <span class="font_medium" data-item="rowID">#9</span></li>
                <li data-item="TableReference">PCPS Skill <span class="font_medium" data-item="rowID">#3</span></li>
            </ul>
            <a data-item="TableReference" href="" class="block font-size_down-2 font_italic link underline expanded-click-area">Task Force 12 Table 1 –
                Heart Failure</a>
        </div>
        Copy Code

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

        6.4.2.1.2 Learning Domain Tags
        experimental

        This component displays the different learning domains that are related to an educational topic. It is usually found at the bottom of an EDU Card.

        Example

        Default styling

        caution:
        This item is not finalized and might be subject to change
        <aside class="bg_black-2 br-t_1 br_black-2 br_solid p_3 z_2 relative">
            <ul class="ul_inline-pipe ul_list-comma ul_none font-size_down-2">
                <li class="font_bold no-after">Learning Domain:</li>
                <li data-item="LearningDomainType">Cognitive Knowledge Skill</li>
                <li data-item="LearningDomainType">Interprofessional Collaborative Team Skills</li>
            </ul>
        </aside>
        Copy Code

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

        6.5 Interactive Extras

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

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

        6.5.1 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

        .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

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

        6.5.2 Stars

        experimental

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

        Example

        Default styling

        caution:
        This item is not finalized and might be subject to change
        <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

        Example

        Default styling

         

         

         

         

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

        6.5.4 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

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

        6.6.1 Lists with Icons

        This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the list combines an icon with a text description.

        NOTE:
        The read more is treated differently.
        <div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5">
            <h2>Highlighted Title</h2>
            <ul class="columns_2:md gap-x_6 gap-y_4 grid p-x_4:lg ul_none">
                <li class="flex flex_row items_start justify_start">
                    <i class="c_accent font_7 m-t_3 p-r_4 far fa-regular fa-newspaper" aria-hidden="true"></i>
                    <div class="font-size_up">
                        <strong>Free</strong> digital access to the <a href="http://www.onlinejacc.org/" target="_blank"><em>JACC</em> Journals</a>
                    </div>
                </li>
                <!-- ... Other list items here ... -->
                <li class="flex flex_row items_start justify_start gap_3 items_center">
                    <div class="font-size_up">
                        Read about more of our
                        <a href="/Membership/Join-Us/Benefits" target="_blank">Member Benifits</a>
                    </div>
                    <div class="flex flex_row  m-l_3">
                        <i class="c_accent font_6 m-t_3 fas fa-solid fa-ellipsis " aria-hidden="true"></i>
                        <i class="c_accent fa-chevron-right fa-solid fas font_6 m-l_n3 m-t_3" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
        Copy Code

        Example

        Default styling

         <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

        Example

        Default styling

        single icon

        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC

        floating icons

        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

          Dr. Ainsley Conolly, FACC
        <h2>single icon</h2>
        <ul class="grid columns_5:lg columns_3:md columns_1 ul_none gap_4">
            <li class="col_all col-end_2:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote></li>
            <li class="col_all col-end_3:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote></li>
            <li class="col_all col-end_4:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote></li>
            <li class="col_all col-end_5:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote></li>
            <li class="col_all col-end_6:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote></li>
        </ul>
        <h2>floating icons</h2>
        <ul class="grid columns_5:lg columns_3:md columns_1 ul_none gap_5">
            <li class="col_all col-end_2:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote></li>
            <li class="col_all col-end_3:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote></li>
            <li class="col_all col-end_4:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote></li>
            <li class="col_all col-end_5:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote></li>
            <li class="col_all col-end_6:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote></li>
        </ul>
        Copy Code

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

        6.8.1 Stylized Blockquote with Quote Icons

        This component is a blockquote that has been designed with an emphasis on style. It starts and ends with iconic quotation marks, followed by the actual quote text and a citation. The design uses flexible box model to ensure that the text and the quote icons align correctly. It also applies shadows, borders, and background colors to make the blockquote visually distinct.

        Caption: This component is a styled version of a blockquote, complete with quotation mark icons, background colors, and borders.

        Example

        Default styling

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

        Dr. Ainsley Conolly, FACC
        <blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
            <div class="flex_shrink l_n3:md relative">
                <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
            </div>
            <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light z_2">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
            <div class="flex_shrink r_n3:md relative">
            <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
            </div>
        </blockquote>
        Copy Code

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

        6.8.2 Blockquote with Icon

        This component presents a styled blockquote element. The blockquote starts with an iconic quotation mark, followed by the actual quote text and a citation. The design uses flexible box model to ensure icon and text alignment.

        Caption: The component is not finalized and may undergo changes.

        Example

        Default styling

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

        Dr. Ainsley Conolly, FACC
        <blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
            <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
                <i class="fas fa-quote-left fa-fw"></i>
            </div>
            <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Numquam consequuntur delectus vero. Ratione fugit totam
                ipsum aperiam modi! Quas facilis consequuntur totam quod
                inventore atque magnam deleniti labore quae minus?</p>
                <cite class="c_accent-n4 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
            </div>
        </blockquote>
        Copy Code

        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

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

            Default styling

            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

            Default styling

            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 8797

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

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

              Default styling

              • 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 8840

              6.12.5.3 Credit Chiclets

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

              Example s

              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 8822

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

              Default styling

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

              6.13 Ordered Cards

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

              Example

              Default styling

              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