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: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

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

6.6 Collapsed Content Section

Easy to edit content wells wrapped in a collapsing mechanism. These content area should support all rich text needs and hyperlinks (Primary Level Content)

Example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab voluptatibus ut quibusdam officiis, debitis quae ipsum fugiat, facere repellat assumenda dolorum ducimus ad rem blanditiis, deleniti dolorem consequuntur nostrum corrupti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid tempora quo optio explicabo deleniti cupiditate ducimus error, quam minus rem mollitia. Sequi sint ratione voluptatem assumenda mollitia id rerum.
<div class="accordion" id="accordionExample">
  <div class="br_none card">
    <div class="bg_white-0 br_none card-header p-b_0 p-t_3 p-x_0" id="headingOne">
        <h2 class="m_0"><button class="block br_none btn btn-link font_1 font_bold h:bg_primary-5 h:underline-none text_left w_100 collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <i class="fas icon-toggle_plus-minus p-r_3"></i>Collapsible Group Item #1
        </button></h2>
    </div>
    <div id="collapseOne" class="br-b_1 br-t_1 br_black-2 br_dotted card-body collapse m-x_3 m-b_2 m-t_3 p-b_4 p-l_3 p-t_2 " aria-labelledby="headingOne" data-parent="#accordionExample" style="">
      <div class="">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
   <div class="br_none card">
    <div class="bg_white-0 br_none card-header p-b_0 p-t_3 p-x_0" id="headerTwo">
         <h2 class="m_0"><button class="block br_none btn btn-link font_1 font_bold h:bg_primary-5 h:underline-none text_left w_100 collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <i class="fas icon-toggle_plus-minus p-r_3"></i>Collapsible Group Item #2
        </button></h2>
    </div>
    <div id="collapseTwo" class="br-b_1 br-t_1 br_black-2 br_dotted card-body collapse m-x_3 m-b_2 m-t_3 p-b_4 p-l_3 p-t_2 " aria-labelledby="headerTwo" data-parent="#accordionExample" style="">
      <div class="">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
    <div class="br_none card">
    <div class="bg_white-0 br_none card-header p-b_0 p-t_3 p-x_0" id="headingThree">
         <h2 class="m_0"><button class="block br_none btn btn-link font_1 font_bold h:bg_primary-5 h:underline-none text_left undecorated w_100" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
          <i class="fas icon-toggle_plus-minus p-r_3"></i>Collapsible Group Item #3
        </button></h2>
    </div>
    <div id="collapseThree" class="br-b_1 br-t_1 br_black-2 br_dotted card-body collapse m-x_3 m-b_2 m-t_3 p-b_4 p-l_3 p-t_2  show" aria-labelledby="headingThree" data-parent="#accordionExample" style="">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab voluptatibus ut quibusdam officiis, debitis quae ipsum fugiat, facere repellat assumenda dolorum ducimus ad rem blanditiis, deleniti dolorem consequuntur nostrum corrupti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid tempora quo optio explicabo deleniti cupiditate ducimus error, quam minus rem mollitia. Sequi sint ratione voluptatem assumenda mollitia id rerum.
    </div>
  </div>
</div>
Copy Code