Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.5.1.2 Reverse Color Card

This pattern presents card layouts on a dark or brand-colored background, reversing standard text and accent colors for emphasis.

  • Use for highlighting third-level CTA combined in the Introduction area.
  • Do not use for long-form or dense text (contrast readability issue).
Sub.ClassList.Card.Reverse - Reverse Color Card Classlist
Data Elements:

    Example

    Default styling

    Membership Quick-links

    • Renew or Join Sections

      Pay your annual dues or join a Member Section in the renewal portal.

    • DocMatter

      Connect with your community, ask clinical questions and more in ACC’s members-only collaboration portal.

    • Member Directory

      Search ACC members by name, location or clinical focus.

    <div data-item="cta-overlay"
    class="bg_primary-n2 c_white color_inherit br_round shadow_overlap-light p_4 p_5:lg reading-typography relative z_1">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">Membership Quick-links</strong>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
        <p class="font-size_up">
        </p>
        <ul class="ul_none">
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://www.acc.org/my-acc/my-membership">Renew or Join Sections</a>
                <p>Pay your annual dues or join a Member Section in the renewal portal.</p>
            </li>
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://federated.acc.org/ACCFederatedlogin/PostSP?SP=https://www.docmatter.com/dm/auth/acc&amp;_ga=2.94361949.1390219747.1721069291-1638134164.1669745868">DocMatter</a>
                <p>Connect with your community, ask clinical questions and more in ACC’s members-only collaboration portal.</p>
            </li>
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://tools.acc.org/ACCConnect/">Member Directory</a>
                <p>Search ACC members by name, location or clinical focus.</p>
            </li>
        </ul>
    </div>
</div>
    Copy Code