Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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