Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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