Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

Component

Source: dist/css/bespoke_all.css, line 1031

1.1 MicroSite

A MicroSite (Conversion Focused Sub-Section), exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.

The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.

This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.

A Microsite Must

  • Have a user goal
  • Have a call to action for conversion.
  • Have a focused audience so the voice can be taylored to the action.

    Source: dist/css/bespoke_all.css, line 1042

    1.1.1 Hero Image with CTA

    The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

    Component.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image Component.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Component.MicroSite.Sub.PageTitleTreatment - Page Title Treatment Component.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight
    Sub Components in Design:

      Example

      Default styling

      Hero Image

      Hero Statement Mision of the Page ™

      Call to Action Title (CTA). You Should be Engaged

      CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

      NOTE:
      The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button. 
      <div grid-template="hero-image-cta" id="hero" class="font_3:lg font_2:md font_1">
    <div grid-area="background" class="col_all overflow_hidden row_all">
        <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
            media="(min-width: 1024px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
            media="(min-width: 768px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
            media="(min-width: 400px)" class="display_none">
          <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
            class="flex_100">
        </picture>    </div>
    <div grid-area="breadcrumb" class="z_1 flex flex_row justify_start">
        <nav data-item="hero-image-breadcrumb-nav" class="font-size_down-2 relative isolation_isolate p-y_3 p-x_4 c_white-8">
        	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
        	The Parent of This Micro Section of the Site</a>
        </nav>    </div>
    <div grid-area="title" class="relative font-size_up-2 m-y_6:lg m-y_5:md">
        <h1 data-item="hero-title"
          class="font-size_up-2 m_0 c_white isolation_isolate relative">
          Hero Statement Mision of  the Page &trade;</h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
        <div data-item="cta-callout" class="z_1 font-size_0 c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
              <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
              <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
              <div class="grid justify_center items_center ">
                <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
              </div></div>    </div>
</div>
      Copy Code

      Source: dist/css/bespoke_all.css, line 1081

      1.1.2 Micro Branding with CTA Button

      The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

      Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image Component.MicroSite.Sub.PageTitleTreatment - Page Title Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button
      Sub Components in Design:

        Example

        Default styling

        Hero Image

        Hero Statement Mision of the Page™

        NOTE:
        Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button. 
        <div grid-template="hero-image-cta" template-option="micro" class="isolation_isolate overflow_hidden relative">
    <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
        media="(min-width: 1024px)" class="display_none">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
        media="(min-width: 768px)" class="display_none">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
        media="(min-width: 400px)" class="display_none">
      <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
        class="flex_100">
    </picture>  <div grid-area="title">
    <h1 data-item="hero-title"
      class="m_0 m-y_3 m-y_0:lg c_white isolation_isolate relative">
      <span class="display_none:lg"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
      <span class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
    </h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div>  </div>
</div>
        Copy Code

        Source: dist/css/bespoke_all.css, line 1227

        1.1.3.1.1 Responsive Hero Image

        The Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300

        Example

        Default styling

        Hero Image
        NOTE:
        It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results. 
          <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
      media="(min-width: 1024px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
      media="(min-width: 768px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
      media="(min-width: 400px)" class="display_none">
    <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
      class="flex_100">
  </picture>
        Copy Code

        Source: dist/css/bespoke_all.css, line 1160

        1.1.3.1.2 Hero Image Breadcrumb Nav

        The Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.

        Example

        Default styling

        NOTE:
        The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail. 
        <nav data-item="hero-image-breadcrumb-nav" class=" relative isolation_isolate p-y_3 p-x_4 c_white-8">
	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
	The Parent of This Micro Section of the Site</a>
</nav>
        Copy Code

        Source: dist/css/bespoke_all.css, line 1139

        1.1.3.1.3 CTA Button

        The CTA Button is just a centered button for the highlighted call-to-action.

        Example

        Default styling

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background. 
        <div class="grid justify_center items_center ">
  <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
</div>
        Copy Code

        Source: dist/css/bespoke_all.css, line 1114

        1.1.3.1.4 CTA Highlight

        The CTA Highlight component is used to create a highlighted call-to-action section.

        Example s

        Modifier: inverted

        This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.

        Call to Action Title (CTA). You Should be Engaged

        CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background. 
        <div data-item="cta-callout" class="[modifier class] c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
      <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
      <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div></div>
        Copy Code

        Source: dist/css/bespoke_all.css, line 1181

        1.1.3.2 Page Title Treatment

        MicroSite Page Title Treatment component is used to style and emphasize page titles.

        Example s

        Modifier: font-color

        This modifier class is used to customize the font color of the page title.

        Hero Statement Mision of the Page ™

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience. 
        <h1 data-item="hero-title"
  class="[modifier class] c_white isolation_isolate relative">
  Hero Statement Mision of  the Page &trade;</h1>
        Copy Code

        Example

        Default styling

        Hero Statement Mision of the Page™

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience. 
        <h1 data-item="hero-title"
  class=" c_white isolation_isolate relative">
  <span class="display_none:lg"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
  <span class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
</h1>
        Copy Code

        Source: dist/css/bespoke_all.css, line 154

        1.2.1.1 Disabled

        This component represents a disabled state variation of the wizard navigation with chevrons. The disabled state is applied to the "Wizard Progress" bar, indicating that it is currently disabled and not accessible.

        Example

        Default styling

        <ol class="bg_black-2 br_1 br_black-3 br_solid c_black c_black-6 disabled flex flex_row font-size_down-1 font_bold font_display items_center lh_0 m-t_n3 m-x_n3 m_0 p_0 ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas  fa-lock inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas  fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>
        Copy Code

        Source: dist/css/bespoke_all.css, line 228

        1.3 Responsive Table with Mobile Card Layout

        This component represents a responsive table that transforms each row into a card layout on mobile devices. It provides an optimized display for smaller screens, enhancing readability and usability.

        Example

        Default styling

        Fuit Vegitable Meat
        Data 1-1 Data 1-2 Data 1-3
        Data 2-1 Data 2-2 Data 2-3 
        <div class="responsive-table">
    <table class="table table-striped">
        <thead >
            <tr class="display_none table-row:md">
                <th class="">Fuit</th>
                <th class="">Vegitable</th>
                <th class="">Meat</th>
            </tr>
        </thead>
    <tbody class="table-body table-row-group:md flex flex_column">
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Fruit">Data 1-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 1-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 1-3</td>
        </tr>
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto"  data-label="Fruit">Data 2-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 2-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 2-3</td>
        </tr>
    </tbody>
</table>
    <!-- More table rows -->
</div>
        Copy Code

        Source: dist/css/bespoke_all.css, line 371

        1.4.1 Page Layout

        Descripition:

        1. Overall Structure:
          • Design the layout to incorporate columns for content and sidebars.
          • [sidebar] [content] [sidebar]
          • the parent uses `grid-template="page-layout"`
          • the children uses `grid-area="content|sidebar-primary|sidebar-secondary"`
        2. Column Configuration:
          • Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
          • Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
        3. Sidebar Specifications:
          • Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
          • Sidebars do not respect the page margin but adhere to margins between themselves and content.
          • Sidebars placed on the edge will extend to the edge of the container.
            Responsive Design:
          • `Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
          • `Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
          • The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
        4. Content Area:
          • Allocate remaining space on the page for the content area, respecting a page margin.

        Example

        Default styling

        Document(fullscreen)

        Document

        Content No Sidebars

        Content

        Content with Primary Sidebar

        sidebar primary
        content

        Content with Primary Sidebar - Reverse template-option="reverse"

        sidebar primary (reverse)
        content (reverse)

        Content with Secondary Sidebar

        sidebar secondary
        content

        Content with Secondary Sidebar - Reverse template-option="reverse"

        sidebar secondary
        content

        Both Sidebars

        sidebar secondary
        content center
        sidebar primary

        Both Sidebars

        sidebar secondary
        content center
        sidebar primary
        <h4>Document(fullscreen)</h4>
<section grid-template="page-layout" >
    <div grid-area="fullscreen">Document</div>
</section>
<h4>Content No Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="content">Content</div>
</section>
<h4>Content with Primary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-primary">sidebar primary</div>
    <div grid-area="content">content</div>
</section>
<h4>Content with Primary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-primary">sidebar primary (reverse)</div>
    <div grid-area="content">content (reverse)</div>
</section>
<h4>Content with Secondary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content</div>
</section>
<h4>Content with Secondary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content</div>
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content center</div>
    <div grid-area="sidebar-primary">sidebar primary</div>
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content center</div>
    <div grid-area="sidebar-primary">sidebar primary</div>
</section>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->
        Copy Code

        Example

        Default styling

        Clinical Trials Research Pathway

        The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles. ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop instrumental roles, including clinical research coordinator, investigator and principle investigators.

        The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150 learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and funding opportunities in clinical trials research.

        Education

        ACC Award Opportunities

        Publications & Articles

        Explore Cardiovascular Pathways:Physician|CV Team|Clinical Trials Research

        advertisment
        advertisment 
        <div grid-template="page-layout">
    <main grid-area="content" class="reading-typography">
        <h1 id="clinical-trials-research-pathway">Clinical Trials Research Pathway</h1>
        <p>The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.
            ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop
            instrumental roles, including clinical research coordinator, investigator and principle investigators.</p>
        <p>The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical
            Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150
            learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and
            funding opportunities in clinical trials research.</p>
        <h3 id="education">Education</h3>
        <ul>
            <li><a href="#">Webinar: ACC Research, Clinical Trials and Publishing Series</a></li>
            <li><a href="#">Live Education: How to Become a CV Investigator</a></li>
            <li><a href="#">Live Education: Clinical Trials Research: Upping Your Game Program</a></li>
        </ul>
        <h3 id="acc-award-opportunities">ACC Award Opportunities</h3>
        <ul>
            <li><a href="#">Douglas P. Zipes Distinguished Young Scientist Award</a></li>
            <li><a href="#">Young Investigator Awards at ACC.23/WCC</a></li>
            <li><a href="#">ACC/ABC Merck Research Fellowship Awards</a></li>
            <li><a href="#">ACC/ABC Bristol Myers Squibb Research Fellowship Awards</a></li>
        </ul>
        <h3 id="publications--articles">Publications &amp; Articles</h3>
        <ul>
            <li><a href="#">Gender Diversity in Cardiovascular Trial Research Begins at the Top (JACC)</a></li>
            <li><a href="#">Clinical Research in a Big Data, High-Tech World (Cardiology)</a></li>
        </ul>
        <hr>
        <p><strong>Explore Cardiovascular Pathways:</strong><a href="../CardiologyCareers_Physician/">Physician</a><code
                class="language-plaintext highlighter-rouge">|</code><a href="../CardiologyCareers_CVTeam/">CV
                Team</a><code class="language-plaintext highlighter-rouge">|</code><a
                href="../CardiologyCareers_ClinicalTrial/">Clinical Trials Research</a></p>
    </main>
    <section grid-area="sidebar-primary">
        <nav class="nav-sub bg_primary c_white font_2 font_ui">
            <ul class="ul_none flex_column flex">
                <li class="nav-item font-size_up" data-nav="parent">
                    <div class="bg_black-4"><a href="../CardiologyCareers"
                            class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">A
                            Career in Cardiology</a></div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div
                            class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                data-bs-target=".howToStart" aria-controls=".howToStart"><span class="fa-stack"><i
                                        class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                        class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_Start/"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">How
                                to Start</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse howToStart show">
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_Physician/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Physician
                                                    Pathway</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_CVTeam/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">CV
                                                    Team Pathway</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a
                                                    href="../CardiologyCareers_ClinicalTrial/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Clinical
                                                    Trial Pathway</a></div>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_Development"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Development
                                &amp; Leadership Programs</a></div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div
                            class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse"><span
                                    class="fa-stack"><i class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                        class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Resources</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_Gallery/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Video
                                                    Gallery</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a
                                                    href="../CardiologyCareers_PersonalStory/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Personal
                                                    Stories</a></div>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_ContactUs"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Contact
                                Us</a></div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
            <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
            <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
            </div>
            <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
            </div>
    </section>
    <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
        <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative reading-typography">
            <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                    Content</span></h2>
            <ul class="font-size_down-1 m-t_n4 ul_none">
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                        Guideline</a></li>
                <li class="m-b_4"><a href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
            </ul>
        </aside>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
        <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
        <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
        </div>
        <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
        </div>
        <aside id="recommended-for-you" class="tabgroup br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Recommended Content for You</span></h2>
            <div class="tab-content authenticated-nothing-selected active">
                <article class="article-recommended-tease flex font_unset">
                    <div class="main-image"><img src="https://picsum.photos/53/53"></div>
                    <div class="article-content p-l_3 font-size_down-2">
                        <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                        <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                            recommendations.</p>
                    </div>
                </article>
            </div>
        </aside>
        <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                    Articles from ACC.org</span></h2>
            <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade" data-enable-infinite-scroll="false">
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Feb 06, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 23, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                            Who Do Not Have Diabetes</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 16, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 09, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 03, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                    <div>&nbsp;</div>
                </li>
            </ul>
        </aside>
    </div>
</div>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->
        Copy Code

        Example

        Default styling

        ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the Practicing Clinician

        Feb 13, 2024   |  Alison Bailey, MD, FACC; Salim S. Virani, MD, FACC; Roger S. Blumenthal, MD, FACC

        Podcast
        Print
        Font Size
        A
        A
        A

        To improve our understanding of the basic principles in the treatment and management of patients with chronic heart disease, in this interview, Salim S. Virani, MD, PhD, FACC, and Roger S. Blumenthal, MD, FACC, discuss top takeaways from the ACC 2023 Guideline for Chronic CAD.

        Related References:

        1. Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer, L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S., Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A. M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for the Management of Patients With Chronic Coronary Disease: A Report of the American Heart Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines. Journal of the American College of Cardiology, 82(9), 833–955. https://doi.org/10.1016/j.jacc.2023.04.003
        Subscribe to the ACCEL Lite Podcast

        Clinical Topics:Acute Coronary Syndromes, Dyslipidemia, Invasive Cardiovascular Angiography and Intervention

        Keywords:ACCELLite, Statins


        < Back to Listings
        advertisment 
        <div grid-template="page-layout">
    <article grid-area="content" id="archesArticle" class="reading-typography">
        <h1>ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the
            Practicing Clinician</h1>
        <div class="article-meta">
            <p class="date m-y_2 font_n1 font_medium">Feb 13, 2024 &nbsp;&nbsp;|&nbsp;&nbsp;<a
                    href="http://www.acc.org/Membership/Person?id=f57aa35c-1898-4282-9223-d3703d9ee35c">Alison
                    Bailey, MD, FACC</a>; <a
                    href="http://www.acc.org/Membership/Person?id=d49209b7-1a04-42c4-aed2-3a773acce82b">Salim S.
                    Virani, MD, FACC</a>; <a
                    href="http://www.acc.org/Membership/Person?id=0e80b517-78fe-4960-9a3e-6a54fcb201f6">Roger S.
                    Blumenthal, MD, FACC</a></p>
            <h5 class="m-y_0 font_bold" style="clear: left;">Podcast</h5>
           <div class="flex flex_auto flex_row items_center p-t_0:md p-x_4 bg_secondary-5">
                <section class="font_n2 self_center social">
                    <ul class="flex items_center m_0 social-bar ul_none">
                        <li class="flex_shrink m_0"><a class="bg_shade-4 font-size_down-1 block c_shade-n2 font-size_down h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"><i class="fab fa-square-x-twitter" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="facebook c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="linkedin c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="youtube c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="google-play c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="apple-store c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple" aria-hidden="true"></i></a></li>
                    </ul>
                </section>
                    <div class="flex flex_auto self_center m-l_4">
                        <div id="print-page" class="c_primary cursor_pointer flex" onclick="window.print()" ontouchstart="window.print()"><span class="fa fa-print flex items_center m-r_2" aria-hidden="true"></span><span class="flex font_n2 items_center">Print</span></div>
                    </div>
                    <dl id="font-resizer" class="display_none flex:md items_baseline items_center m-y_0 p-t_1">
                        <dt class="font_n2 m-r_2">Font Size</dt>
                        <dd class="font_unset"><span onclick="changeFontSize('font_unset')" class="flex font_n3 m-b_n2 m-t_3 p-x_1 lh_4 cursor_pointer">A</span></dd>
                        <dd class="font-size_down"><span onclick="changeFontSize('font-size_down')" class="flex font_n1 m-t_3 p-x_1 lh_1 cursor_pointer">A</span></dd>
                        <dd class="font-size_up"><span onclick="changeFontSize('font-size_up')" class="flex font_1 m-t_2 p-x_1 lh_1 cursor_pointer">A</span></dd>
                    </dl>
                </div>
        </div>
        <div class="the-text">
            <div>
                <p>To improve our understanding of the basic principles in the treatment and management of patients
                    with chronic heart disease, in this interview, <strong>Salim S. Virani, MD, PhD, FACC</strong>,
                    and <strong>Roger S. Blumenthal, MD, FACC</strong>, discuss top takeaways from the ACC 2023
                    Guideline for Chronic CAD. </p>
                <h3>Related References:</h3>
                <ol>
                    <li>Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,
                        L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,
                        Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.
                        M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for
                        the Management of Patients With Chronic Coronary Disease: A Report of the American Heart
                        Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.
                        Journal of the American College of Cardiology, 82(9), 833–955. <a
                            href="https://doi.org/10.1016/j.jacc.2023.04.003"
                            target="_blank">https://doi.org/10.1016/j.jacc.2023.04.003</a></li>
                </ol>
                <div
                    class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
                    <audio class="w_100" controls="" id="html5_audio_jvtpc43x2e">
                        <source src="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3"
                            type="audio/mp3">
                        <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank"
                                href="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3">link to
                                the audio</a>instead.</p>
                    </audio>
                    <div class="grid items_center justify_center"><a href="/Latest-in-Cardiology/Features/Podcasts"
                            class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe to
                            the ACCEL Lite Podcast</a></div>
                </div>
            </div>
            <p class="topics-list font_n1"><b>Clinical Topics:</b><a
                    href="/Clinical-Topics/Acute-Coronary-Syndromes">Acute Coronary Syndromes, </a><a
                    href="/Clinical-Topics/Dyslipidemia">Dyslipidemia, </a><a
                    href="/Clinical-Topics/Invasive-Cardiovascular-Angiography-and-Intervention">Invasive
                    Cardiovascular Angiography and Intervention</a></p>
            <p class="keywords-list font_n1"><b>Keywords:</b><i>ACCELLite, </i><i>Statins</i></p><br><a href="#"
                id="backToListings" class="parent back-to-listing display_none:print">&lt; Back to Listings</a><br>
        </div>
    </article>
    <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
        <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative reading-typography">
            <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                    Content</span></h2>
            <ul class="font-size_down-1 m-t_n4 ul_none">
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                <li class="m-b_4"><a
                        href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                        Guideline</a></li>
                <li class="m-b_4"><a
                        href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
            </ul>
        </aside>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
        <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
        <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
        </div>
        <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
        </div>
        <aside id="recommended-for-you" class="tabgroup br_1 br_solid m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span
                    class="bg_white p-x_2">Recommended Content for You</span></h2>
            <div class="tab-content authenticated-nothing-selected active">
                <article class="article-recommended-tease flex font_unset">
                    <div class="main-image"><img src="https://picsum.photos/53/53"/></div>
                    <div class="article-content p-l_3 font-size_down-2">
                        <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                        <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                            recommendations.</p>
                    </div>
                </article>
            </div>
        </aside>
        <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                    Articles from ACC.org</span></h2>
            <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade"
                data-enable-infinite-scroll="false">
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Feb 06, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 23, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                            Who Do Not Have Diabetes</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 16, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 09, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 03, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                    <div>&nbsp;</div>
                </li>
            </ul>
        </aside>
    </div>
</div>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->
        Copy Code

        Source: dist/css/bespoke_all.css, line 467

        1.4.1.3 Demo Styles

        Descripition: Styles needed for demo and to not be included in enteprise styles

        Example

        Default styling

        <!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->
        Copy Code

        Source: dist/css/bespoke_all.css, line 90

        1.5 Wizard Progress with Chevrons

        This component represents a wizard Progress with chevrons. It is commonly used in multi-step processes or wizards to guide users through sequential steps. By utilizing this wizard Progress component, you can guide users through different steps or stages of a process while providing visual cues using icons and step labels.

        Example

        Default styling

        <ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-sign-in-alt inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>
        Copy Code

        Example

        Default styling

        This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard. 
        This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard.
<ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle completed">
        <i class="fas fa-check inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>
        Copy Code