Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Subs

Source: dist/css/cardiosmart_boot.css, line 7160

8 Subs

Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone but are composed into larger, reusable structures.

These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text, or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.

Common use cases:
- {{> 'Sub.Sub.Data.Duration'}} — Displays session duration
- {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier
- {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button

Naming Convention:
Sub.Type.Name — Organized by category (e.g., Data, Credit, ActionButtons, ClassList)

NOTE:
Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.

Source: dist/css/cardiosmart_boot.css, line 6895

8.1.1.1 Read More Arrow

This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.

Example

Default styling

<span class="fa-stack font_6 order_2">
        <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
        <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
</span>
Copy Code 
<!-- ACCProductLinks -->
<section class="acc-websites flex_auto">
        <ul class="ul_none lh_2 font_0">
            <li class="c_white">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC.org</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1 br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">JACC Journals</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1 br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Quality Improvement for Institutions</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/NCDR-Home">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">NCDR</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://cvquality.acc.org/accreditation">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC Accreditation Services</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.cardiosmart.org/For-Clinicians">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">CardioSmart</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.medaxiom.com/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">MedAxiom</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.acc.org/About-ACC/Contact-Us">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Contact Us</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
        </ul>
    </section>
<!-- /ACCProductLinks -->
Copy Code

Source: dist/css/cardiosmart_boot.css, line 6494

8.1.2.1.2 Address

Address and contact information for Heart House

<section class="address c_white">
    <h3 class="font_accent font_1 m-b_0 font_normal font_regular">American College of Cardiology</h3>
    <address>
        <!-- http://microformats.org/wiki/hcard -->
        <h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4">Heart House</h4>
        <div class="flex flex_column flex_row:md font_0 font_copy gap-x_5">
        <div class="flex_auto">
            <ul class="ul_none lh_0">
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="street-address">2400 N St. NW</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="locality ">Washington</span>,
                    <span class="city-name ">
                <abbr title="District of Colombia">DC</abbr>
                </span>
                    <span class="postal-code">20037</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
                        <strong class="p-r_2 inline block:md inline:lg">Email:</strong>
                        <span class="inline block:md inline:lg">membercare@acc.org</span></a>
                </li>
            </ul>
        </div>
        <div class="flex_auto">
        <ul class="ul_none lh_0">
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Phone:</strong><span class=" block inline:lg">1-202-375-6000</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+18002534636" href="tel:+18002534636" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Toll Free:</strong><span class=" block inline:lg">1-800-253-4636</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Fax:</strong>
                <span class="block inline:lg">1202-375-7000</span>
                </a>
            </li>
        </ul>
        </div>
        </div>
    </address>
</section>
Copy Code

Example

Default styling

© 2023 American College of Cardiology Foundation. All rights reserved. 
    <div class="texture_light bg_shade-1 p_4">
        <cite class="c_shade-1 font_italic font_bold font_n2 p_2 lh_2">&copy; 2023 American College of Cardiology Foundation. All rights reserved.</cite>
    </div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 6655

8.1.2.1.4 Social Links

The college has a collection of social or secondary platforms we interact with.

Example

Default styling

Stay Connected 

<!-- Social -->
<h4 class="c_white font_regular font_accent m-b_3 m-b_4:lg text_center text_left:lg">Stay Connected
</h4>
<ul class="flex social-bar ul_none c_white h:c_white m_0">
    <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-youtube"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="bg_linkedin social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-linkedin-in"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-facebook-square"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-square-x-twitter"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.instagram.com/americancollegeofcardiology" target="_blank" class="bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-instagram"></i></a></li>
    <!--<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US" target="_blank" class="bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-google-play"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-apple"></i></a></li>-->
</ul>
<!-- Social -->
Copy Code

Source: dist/css/cardiosmart_boot.css, line 6441

8.1.2.1.5 Sub Footer

Description: ACC has some basic legal information that should be on every property.

<!-- subfooter -->
<div id="subfooter" class="bg_primary c_white font_n1 p-x_4 p-y_4">
    <ul class="block footer-bottom-links ul_none">
        <li class="inline p-r_2 p-y_2"><a href="https://www.acc.org/Footer-Pages/Media-Center"
                    class="c_white-6 h:c_white">Media Center</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Quick-Start-Guide"
                    class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Advertising-and-Sponsorship-Policy"
                    class="c_white-6 h:c_white">Advertising &amp; Sponsorship Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Clinical-Content-Disclaimer"
                    class="c_white-6 h:c_white">Clinical Content Disclaimer</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Editorial-Board"
                    class="c_white-6 h:c_white">Editorial Board</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Privacy-Policy"
                    class="c_white-6 h:c_white">Privacy Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Registered-User-Agreement"
                    class="c_white-6 h:c_white">Registered User Agreement</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Terms-and-Conditions"
                    class="c_white-6 h:c_white">Terms of Service</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Cookie-Policy"
                    class="c_white-6 h:c_white">Cookie Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/sitemap-acc.xml" class="c_white-6 h:c_white">Site
                    Map</a></li>
    </ul>
    <!-- /footer-bottom-links -->
</div>
<!-- /subfooter -->
Copy Code

Source: dist/css/cardiosmart_boot.css, line 7455

8.1.3.1.1.1 Tab: Basic

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

Example

Default styling

  • Link 
    • <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a
    id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink"  role="tab" aria-controls="BasicLink" aria-selected="true"
    class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7436

    8.1.3.1.1.2 Tab: Active

    Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

    Example

    Default styling

  • Active 
    • <li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a
        id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink"  role="tab" aria-controls="ActiveLink" aria-selected="true"
        class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
        href="#">Active</a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7474

    8.1.3.1.1.3 Tab: Disabled

    Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

    <li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
    <a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
    Copy Code 
    <div class="m-y_4 bg_acc p_4" id="nav_jump">
    <nav class="bg_black-2 c_white br_3 br_radius br_solid br_black-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light">
        <ul class="flex_column flex_row:md ul_none nav">
        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
                Active
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
                Disabled
            </a>
        </li>        </ul>
    </nav>
</div>
    Copy Code

    Example

    Default styling

  • Link 
    • <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
        Link
    </a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7379

    8.1.3.1.2.2 Tab Dark: Active

    Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

    <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
        Active
    </a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7417

    8.1.3.1.2.3 Tab Dark: Disabled

    Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

    <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
        Disabled
    </a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7568

    8.1.3.2.1 Tab: Default
    experimental

    Description: Active State of Tab. Add and remove the active is-active class from the li-tag toggle the active effect

    Example

    Default styling

    caution:
    This item is not finalized and might be subject to change
    NOTE:
    Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
    <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <span
         class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
        >Link</span>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7592

    8.1.3.2.1.1 Tab: Active
    experimental

    Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

    Example

    Default styling

  • Active
    • caution:
    This item is not finalized and might be subject to change
    NOTE:
    Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
    <li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <a
        id="ActiveLinkUI-tab"
        data-bs-toggle="tab"
        data-bs-target="#ActiveLinkUI"
        role="tab"
        aria-controls="ActiveLinkUI"
        aria-selected="true"
        class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
        href="#">Active</a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7620

    8.1.3.2.1.2 Tab: Disabled
    experimental

    Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

    caution:
    This item is not finalized and might be subject to change
    NOTE:
    Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
    <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
        href="#"
        tabindex="-1"
        aria-disabled="true">
        Disabled</a>
</li>
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 7210

    8.2 Data

    There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.

    Source: dist/css/cardiosmart_boot.css, line 5984

    8.2.1 Agenda Item

    Description: Agenda items are any event or sessions that are scheduled for a specific date, location, and time.

    Source: dist/css/cardiosmart_boot.css, line 6038

    8.2.1.1 Date

    Description: There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.

    Example

    Default styling

    Saturday, Nov. 20, 2021
    FORMAT:
    Day-of-Week, Month-Abbreviation. Day, Year 
    Saturday, Nov. 20, 2021
    Copy Code

    Source: dist/css/cardiosmart_boot.css, line 6052

    8.2.1.2 Date and Time

    Description: This is when you need to show Date and Time

    Sub.Data.Agenda.Date - Date Sub.Data.Agenda.Time.Start - Start Time
    Data Elements:

      Example

      Default styling

      Saturday, Nov. 20, 2021 @ 11:15 a.m. EDT
      FORMAT:
      Day-of-Week, Month-Abbreviation. Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.
      NOTE:
      Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST. 
      Saturday, Nov. 20, 2021 @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
      Copy Code

      Example

      Default styling

      12:15 p.m.
      FORMAT:
      12 hour with 'a.m.'/'p.m'. 
      12:15 p.m.
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6010

      8.2.1.3.2 Time Moment

      Description: The time at which a Agenda is item is scheduled to be active, give access, or start playing.

      Example

      Default styling

      11:15 a.m.
      FORMAT:
      12 hour with 'a.m.'/'p.m'. 
      11:15 a.m.
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 5994

      8.2.1.4 Time Range

      Description: The range of time at which a Agenda item is in a certain state.

      Example

      Default styling

      @ 11:15 a.m. – 12:15 p.m. EDT
      FORMAT:
      12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.
      NOTE:
      The 'a.m.'/'p.m.' if the same should only occur on the last time mark. 11:15 a.m. - 11:30 a.m. should be shortened to 11:15 - 11:30 a.m. 
      @ 11:15 a.m. – 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6072

      8.2.2 Member

      Description: Often we need to represent a member as a Faculty or Chair who created or participated an initative.

      Source: dist/css/cardiosmart_boot.css, line 6103

      8.2.2.1 Full Name

      The full name of the Member member

      Example

      Default styling

      Pepper H. Soda III, MD, FACC
      FORMAT:
      First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics 
      Pepper H. Soda III, MD, FACC
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6117

      8.2.2.2 Location

      Description: The location of the Member member

      Example

      Default styling

      New York, NY, USA
      FORMAT:
      City, State, Country
      NOTE:
      if the conference country is USA you can drop the country if it is USA. 
      New York, NY, USA
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6082

      8.2.2.3 Photo

      Description: A photo of the member

      Example

      Default styling

      Pepper H. Soda III, MD, FACC
      FORMAT:
      300px by 300px 
      <img
    class="aspect_1x1 w_100 "
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/>
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6133

      8.2.2.4 Title

      Description: the roles of the Member member within the session

      Example

      Default styling

      Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
      FORMAT:
      Institution Title, Institution Division, Institution
      NOTE:
      This format is currently not being enforced. 
      Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6152

      8.2.2.4.1 Institution

      Description: Institution of the Member member where they hold a title

      Example

      Default styling

      Mount SugarLoaf Hospital 
      Mount SugarLoaf Hospital
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6165

      8.2.2.4.2 Institution Division

      Description: The Division of the Institution of the Member member where they hold a title

      Example

      Default styling

      Department of Cardiology 
      Department of Cardiology
      Copy Code

      Example

      Default styling

      Physician-in-Chief 
      Physician-in-Chief
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 6191

      8.2.3 Sponsor

      Description: Sponsor are industry that has offered money or support.

      Source: dist/css/cardiosmart_boot.css, line 6211

      8.2.3.1 Address

      Description: Sponsor's Name

      <address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address>
      Copy Code

      Example

      Default styling

      LogoIpsum 
      LogoIpsum
      Copy Code

      Example

      Default styling

      http://wwww.LogoIpsum.com 
      http://wwww.LogoIpsum.com
      Copy Code 
      <a class="website " target="_blank"  href="http://wwww.LogoIpsum.com">Website</a>
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 7192

      8.3 Recipe

      Patterns that are used through out the refactors on ACC.org

      Source: dist/css/cardiosmart_boot.css, line 7201

      8.3.1 Articles

      There are multiple sub components that are used through out the most common page type on ACC.org

      Source: dist/css/cardiosmart_boot.css, line 7219

      8.4 Class Lists

      Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items

      Example

      Default styling

      columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
      NOTE:
      Triple up cards with shaded background are used only in full screen pages 
      columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
      Copy Code

      Example

      Default styling

      flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
      NOTE:
      Icon and Header use differnt classes because they are a simpler component. 
      flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
      Copy Code

      Example

      Default styling

      columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
      NOTE:
      split layouts great for half page cards 
      columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
      Copy Code

      Example

      Default styling

      columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
      NOTE:
      Triple up splits 
      columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
      Copy Code

      Example

      Default styling

      columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none 
      columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
      Copy Code

      Source: dist/css/cardiosmart_boot.css, line 7183

      8.5 Placeholders

      Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.

      Example

      Default styling

      https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42 
      https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
      Copy Code

      Example

      Default styling

      Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters) 
      Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters) 
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters) 
      Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Di dolores (20 Chars) 
      Di dolores (20&nbsp;Chars)
      Copy Code

      Example

      Default styling

      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters) 
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Commodi dolores (30 Characters) 
      Commodi dolores (30&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Rerum libg dero pariatur (40 Characters) 
      Rerum libg dero pariatur (40&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Sed ut perspiciatis unde omnis iste natus er (60 Characters) 
      Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters) 
      Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)
      Copy Code

      Example

      Default styling

      Lorem Ipsum

      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

      Header Level 2

      1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. Aliquam tincidunt mauris eu risus.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

      Header Level 3

      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • Aliquam tincidunt mauris eu risus.
      Table of Contents
      1. How to Prepare for the Boards
      2. General Principles of Cardiovascular Medicine
      3. Arrhythmias
      4. Coronary Artery Disease
      5. Heart Failure & Cardiomyopathy
      6. Valvular Disease
      7. Pericardial Disease
      8. Congenital Heart Disease
      9. Vascular Diseases
      10. Systemic Hypertension and Hypotension
      11. Pulmonary Circulation Disorders
      12. Systemic Disorders Affecting the Circulatory System
      13. Miscellaneous
        • Cardiovascular Genetics
        • CPR, Post-Resuscitation Care
        • Cardiac Critical Care
        • Sleep Disordered Breathing
        • Sports Cardiology
        • Pregnancy and Cardiac Disease
        • Cardiovascular Operative Management
        • Pharmacology
        • General Principles of Cardiovascular Medicine
      <div class="reading-typography ">
    <h1>Lorem Ipsum</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    <h3>Header Level 3</h3>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    <button class="btn btn-primary">Button</button>
	<details>
        <summary ><strong>Table of Contents</strong></summary>
        <div>
            <ol>
                <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                </li>
                <li data-line="2" dir="auto">Arrhythmias</li>
                <li data-line="3" dir="auto">Coronary Artery Disease</li>
                <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                <li data-line="5" dir="auto">Valvular Disease</li>
                <li data-line="6" dir="auto">Pericardial Disease</li>
                <li data-line="7" dir="auto">Congenital Heart Disease</li>
                <li data-line="8" dir="auto">Vascular Diseases</li>
                <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                    System</li>
                <li data-line="12" dir="auto">
                    Miscellaneous
                    <ul>
                        <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                        <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                        <li data-line="15" dir="auto">Cardiac Critical Care</li>
                        <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                        <li data-line="17" dir="auto">Sports Cardiology</li>
                        <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                        <li data-line="19" dir="auto">Cardiovascular Operative Management
                        </li>
                        <li data-line="20" dir="auto">Pharmacology</li>
                        <li data-line="21" dir="auto">General Principles of Cardiovascular
                            Medicine</li>
                    </ul>
                </li>
            </ol>
        </div>
    </details>
</div>
      Copy Code