Arches: JACC & UC Only Patterns

Arches:JACC & UC Only Patterns

Multi Product Brand Style System by the American College of Cardiology

Subs

Source: dist/css/journal_recipe.css, line 1405

3 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/journal_recipe.css, line 1140

3.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

Source: dist/css/journal_recipe.css, line 1455

3.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/journal_recipe.css, line 1437

3.3 Recipe

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

Source: dist/css/journal_recipe.css, line 1446

3.3.1 Articles

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

Source: dist/css/journal_recipe.css, line 1464

3.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/journal_recipe.css, line 1428

3.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