This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Edu

<a href="" class="bg_black-3 br_none br_radius c_black-7 cursor_not-allowed disabled font_1 font_2:md font_medium h:bg_black-3 h:c_black-7 h:undecorated undecorated inline-block m-t_0:md m-t_3 opacity_5 p-x_4 p-y_3 shadow_emboss-light text_center w_100 w_auto:md">Coming Soon</a>
Copy Code
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
Copy Code
<div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
    <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
    <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
</div>
Copy Code

Example

Guidelines & Policies

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-book-medical p-r_3"></i>
    Guidelines & Policies
</h1>
Copy Code

Example

Self-paced Learning

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-book-reader p-r_3"></i>
    Self-paced Learning
</h1>
Copy Code

Example

Resources

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-clipboard-user p-r_3"></i>
    Resources
</h1>
Copy Code

Example

Webinars

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-desktop-alt p-r_3"></i>
    Webinars
</h1>
Copy Code

Example

Infographics

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-file-chart-pie p-r_3"></i>
    Infographics
</h1>
Copy Code

Example

Articles

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-file-medical-alt p-r_3"></i>
    Articles
</h1>
Copy Code

Example

Images

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-images p-r_3"></i>
    Images
</h1>
Copy Code

Example

Clinical Trials

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-microscope p-r_3"></i>
    Clinical Trials
</h1>
Copy Code

Example

Articles and Abstracts

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-newspaper p-r_3"></i>
    Articles and Abstracts
</h1>
Copy Code

Example

Patient Case Quizzes

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-notes-medical p-r_3"></i>
    Patient Case Quizzes
</h1>
Copy Code

Example

On Demand

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <span class="fa-stack font_n2">
       	<i class="fa-rectangle-landscape fas fa-stack-2x"></i>
<i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
    </span>
    On Demand
</h1>
Copy Code

Example

Podcasts

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-podcast p-r_3"></i>
    Podcasts
</h1>
Copy Code

Example

Featured

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-stars p-r_3"></i>
    Featured
</h1>
Copy Code

Example

Clinical Toolkit

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <span class="fa-stack font_n2">
        <i class="fa-box fa fa-stack-2x"></i>
        <i style="top: 22%;font-size: 75%;" class="fa-tools fas c_white fa-stack-1x"></i>
    </span>
    Clinical Toolkit
</h1>
Copy Code

Example

Expert Consensus

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-user-chart p-r_3"></i>
    Expert Consensus
</h1>
Copy Code

Example

Expert Panel Discussions

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-users-class p-r_3"></i>
    Expert Panel Discussions
</h1>
Copy Code

Example

<div class="flex flex_column flex_row:md gap-x_4 max-w_70">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-notes-medical far fa-stack-2x text-shadow_black-1"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Patient Case Quizzes</div>
    <p class="lh_2 font_1 p-b_3">Test your knowledge and sharpen your diagnostic skills to bring appropriate treatment to your patients sooner.</p>
    <section class="br_1 br_solid br_primary br-r_0 br-l_0 font_0">
        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>    </section>
</main>
</div>
Copy Code

Example

Guidelines & Policies

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-book-medical fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Guidelines & Policies</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Self-paced Learning

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-book-reader fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Self-paced Learning</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Certified Education

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
    <i class="fa-certificate fa-stack-2x fas text-shadow_black-1"></i>
    <i style="font-size:85%" class="c_white fa-book-reader fa-stack-1x fas text-shadow_black-n1"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Certified Education</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
    <section>
         <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
    </section>
</main>
</div>
Copy Code

Example

Resources

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-clipboard-user fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Resources</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Webinars

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-desktop-alt fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Webinars</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Infographics

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-file-chart-pie fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Infographics</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Articles

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-file-medical-alt fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Images

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-images fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Images</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Clinical Trials

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-microscope fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Clinical Trials</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Articles and Abstracts

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-newspaper fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles and Abstracts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Patient Case Quizzes

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-notes-medical fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Patient Case Quizzes</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

On Demand

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-rectangle-wide fas c_acc fa-stack-2x text-shadow_black-1 "></i>
        <i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">On Demand</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
     <section>
        <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
     </section>
</main>
</div>
Copy Code

Example

Podcasts

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-podcast fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Podcasts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Featured

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-stars fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Featured</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Clinical Toolkit

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-box fa fa-stack-2x text-shadow_black-1"></i>
        <i style="top: 22%;font-size: 75%;" class="c_acc-4 fa-stack-1x fa-tools fas"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Clinical Toolkit</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
     <section>
        <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
     </section>
</main>
</div>
Copy Code

Example

Expert Consensus

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-user-chart fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Consensus</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code

Example

Expert Panel Discussions

Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!

Learn More
<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-users-class fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Panel Discussions</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>
Copy Code