Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

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

5.4 Side Bar

Description: Side navigation show up when you are with in a content area like topic.

Example

Default styling

<nav class="hidden-print m-r_0 m_3 nav-sub">
<ul class="bg_shade-5 flex flex_column font_0 font_bold font_ui nav">
  <li class="nav-item active">
    <a class="bg_shade-n2 c_white font_1 h:bg_white-4 h:c_black lh_1 nav-link p-l_3 p-y_2 p-y_3" href="/accreditation/heartcare-center-recognition-program" target="_self"><i class="fa fa-home p-r_3"></i>Atrial Fibrillation</a>
  </li>
  <li data-nav="parent" class="nav-item parent">
    <ul data-nav="child" class="flex_column font_n1 nav text-indent_2 bg_shade-4">
      <li class="nav-item">
        <a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/benefits-of-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Overview</a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/steps-to-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Living With</a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/testimonials-and-success-stories" target="_self"><i class="fa fa-holder toggle"></i>Risks
        </a>
      </li>
    </ul>
  </li>
  <li data-nav="parent" class="display_none nav-item parent">
    <a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/services" target="_self"><i class="fa fa-holder toggle"></i>Tools</a>
    <ul data-nav="child" class="bg_shade-4 flex_column font_n1 nav text-indent_1">
      <li class="nav-item parent">
        <a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/CCL" target="_self"><i class="fa fa-holder toggle"></i>Cardiac Cath Lab Accreditation</a>
        <ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/OnDemandCathLabwebianrs" target="_self">On-Demand Cath Lab
              Webinars</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/CCLBenefits" target="_self">Cardiac Cath Lab Features
              Benefits</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/cardiac-cath-lab-accreditation-training" target="_self">Cardiac Cath Lab
              Accreditation Training</a>
          </li>
        </ul>
      </li>
      <li class="nav-item parent">
        <a class="nav-link c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation</a>
        <ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/cpcwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Chest Pain Center
              Webinars</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCDesignations" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation
              Designations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCBenefits" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation Features
              Benefits</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCsupplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation Guidelines</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCArticles" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation Articles
              Abstracts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCPublications" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation Pubs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCQuestions" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center FAQs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/chest-pain-center-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
              Accreditation Training</a>
          </li>
        </ul>
      </li>
      <li class="nav-item parent">
        <a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/EP" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Accreditation</a>
        <ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/register-for-webinar" target="_self"><i class="fa fa-holder toggle"></i>On-Demand EP Webinars</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/EPBenefits" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Features
              Benefits</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/electrophysiology-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology
              Accreditation Training</a>
          </li>
        </ul>
      </li>
      <li class="nav-item parent">
        <a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/HF" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation</a>
        <ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/hfwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Heart Failure
              Webinars</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFBenefits" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
              Features Benefits</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/supplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
              Guidelines</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFArticles" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
              Articles and Abstracts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFPublications" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
              Publications</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFQuestions" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure FAQs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/heart-failure-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
              Training</a>
          </li>
        </ul>
      </li>
      <li class="nav-item parent">
        <a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/TCV" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve
          Certification</a>
        <ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
          <li class="nav-item">
            <a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/TCV/TCV-certification-training" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve
              Certification Training</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="h:bg_black-1 c_shade-n3 nav-link p-y_2" href="/accreditation/services/C4Certification" target="_self"><i class="fa fa-holder toggle"></i>C4 Certification</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/heartcare-center-recognition-program" target="_self"><i class="fa fa-holder toggle"></i>Tools</a>
  </li>
  <li class="nav-item">
    <a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/acc-quality-summit-2020" target="_self"><i class="fa fa-holder toggle"></i>Articles</a>
  </li>
  <li class="active current nav-item">
    <a class="a:bg_accent a:c_white c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/brand" target="_self"><i class="fa fa-holder toggle"></i>News</a>
    <ul data-nav="child" class="flex_column font_n1 nav text-indent_2 bg_shade-4">
      <li class="nav-item">
        <a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/benefits-of-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Featured</a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/steps-to-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Latest</a>
      </li>
      <li class="active nav-item">
        <a class="a:bg_accent-n2 a:c_accent-5 h:bg_black-2 h:c_black lh_3 nav-link p-l_5 p-y_2 text-indent_0" href="/accreditation/about-accreditation/testimonials-and-success-stories" target="_self"><i class="fa fa-holder toggle"></i>Quality Comes First in Carbs vs.
          Fats Debate</a>
      </li>
    </ul>
  </li>
  <li data-nav="parent" class="nav-item parent">
    <a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/advocacy" target="_self"><i class="fa fa-holder toggle"></i>Resources</a>
  </li>
</ul>
</nav>
Copy Code