Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.3 Mobile App CTA

This callout highlights the availability of the associated mobile app, offering a quick path for users to download the app and access the product on the go. It typically features app store buttons, branded device imagery, a concise headline, and a supporting subtext. Use this component when promoting the app in educational or membership-driven contexts.

  • Headline: Emphasizes mobility and learning benefits.
  • Subtext: Brief, informative, with brand reinforcement.
  • App Store Buttons: Use official assets with proper spacing.
  • Visuals: Incorporate realistic device mockups that align with ACC branding.

Example

Default styling

<aside class="columns_1 grid isolation_isolate rows_3 m-y_5:lg m-t_4 max-w_30 m_auto p-x_4" style="--row-1:90px; --row-2:90px;">
    <div data-label="background" class="bg_accent-5 row-end_end row-start_2 col_all flex shadow_bevel-light br_solid br_1 br_accent-4" style="border-radius: 16px;"></div>
    <div data-label="product-image" class="row_all col_all grid">
        <div class="bg_contain bg_no-repeat m-t_n3" style="background-image: url( 'https://www.acc.org/~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/Learn-Mobile.png' ); background-position: center top;"></div>
    </div>
    <div data-label="content-container" class="bg_white br_radius m_3 p_4 reading-typography row-end_end row-start_n2 shadow_overlap-light z_2 col_all br_solid br_black-2 br_1">
        <h4 class="font_xbold text_center font_4:lg font_3">Learn on the Go!</h4>
        <p class="text_center">Access you SAPs from anywhere on the mobile app ACC Learn.</p>
        <div class="grid columns_2 content_center gap_2 justify_center">
            <a class="bg_black br_radius ga-external" href="https://apps.apple.com/us/app/acc-learn/id1497013017" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/appstore.svg" alt="Download on the App Store"></a>
            <a class="bg_black br_radius ga-external" href="https://play.google.com/store/apps/details?id=org.acc.learn.android&amp;hl=en_US&amp;pli=1" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/googleplay.svg" alt="Get it on Google Play"></a>
        </div>
        <div class="text_center m-t_3 m-b_n2"><a href="https://www.acc.org//-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/2020/10/01/G20147-ACC-Lifelong-Learning-App-Info-Sheet.pdf" target="_blank"><small>Learn
                    More</small></a></div>
    </div>
</aside>
Copy Code