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

RecipesPage

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

6.1 Page Title

Dynamical Driven from the Meta Data, and should also populate the meta Tag Title in the header of the html (Emphasis Level)

Example

Quality Comes First in Carbs vs. Fats Debate

<header class="">
	<h1 data-attr="title" class="">Quality Comes First in Carbs vs. Fats Debate</h1>
Copy Code

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

6.2 Block Quotes Large

Description: Text that needs a little extra something when it is quoted.

Example

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

Dr. Ainsley Conolly, FACC 
<blockquote class="bg_highlight-5 flex block p_4 p-y_5:md  br_round relative z1 m-x_4:md m-x_5 shadow_bevel-light br_2 br_solid br_highlight-4  font_display">
    <i class="absolute font_5 font_7:md  t_2 t_3:md l_n5 m-l_n3 fas fa-quote-left fa-fw c_highlight-2 z_1 text-shadow_black-1"></i>
    <div class="flex_auto font_2:md font_1 p-x_5:md p-x_3 c_black z_2">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Numquam consequuntur delectus vero. Ratione fugit totam
        ipsum aperiam modi! Quas facilis consequuntur totam quod
        inventore atque magnam deleniti labore quae minus?</p>
        <cite class="c_highlight-n3 float_right font_ui font_bold font_0 m-r_4 m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <i class="absolute b_3:md b_4 c_highlight-2 fa-fw fa-quote-right fas font_5 font_7:md m-r_n3 r_n5 text-shadow_black-1 z_1"></i>
</blockquote>
Copy Code

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

6.3 Block Quotes Small

Description: Text that needs a little extra something when it is quoted.

Example

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam consequuntur delectus vero. Ratione fugit totam ipsum aperiam modi! Quas facilis consequuntur totam quod inventore atque magnam deleniti labore quae minus?

Dr. Ainsley Conolly, FACC 
<blockquote class="flex relative font_display">
    <div class="bg_highlight bg_hightlight c_highlight-5 flex_none font_2 p_2"><i class="fas fa-quote-left fa-fw"></i></div>
    <div class="a:_block c_black flex_auto font_0 p-l_4">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Numquam consequuntur delectus vero. Ratione fugit totam
        ipsum aperiam modi! Quas facilis consequuntur totam quod
        inventore atque magnam deleniti labore quae minus?</p>
        <cite class="c_highlight-n3 float_right font_ui font_bold font_n1  m-t_n3"><i class="fa-user fal p-r_3"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
</blockquote>
Copy Code

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

6.4 Hub, Concept, or Category Link

Main pages have concepts or categories which lead to a deeper dive of content. (Emphasis Level Item)

Example

Hub Link (Emphasis Level Item)
<div>Hub Link (Emphasis Level Item)</div>
Copy Code

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

6.5 Page Intro Content

Content that is the teaser or leading concept of the page. This is an (Emphasis Level Item)

Example

Page Intro(Emphasis Item)
<div>Page Intro(Emphasis Item)</div>
Copy Code

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

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

6.7 Living With

A dynamic block that fills the Topic Name into the call to action and links to the corresponding sub page "Living With X"

Example

A dynamic block that fills the Topic Name into the call to action and links to the corresponding sub page "Living With X".
<div>A dynamic block that fills the Topic Name into the call to action and links to the corresponding sub page "Living With X".</div>
Copy Code

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

6.8 Editor Credit

Meta Data Driven Component that renders when it published/last reviewed and who is credited as reviewers for the page. (Third Level Content)

<cite class="font_italic font_n2 font_ui">
   <ul class="flex flex_wrap m-l_0:md m-l_3 ul_none" data-attr="editors">
      <li class="p-r_3" data-attr="date">
         Last Edited<span class="font_bold c_secondary p-x_2 ">
            DD/MM/YYYY</span>
      </li>
      <li class="block br-l_1 br_none br_primary-3 br_solid:md m-b_0:md m-b_n2 p-l_0 p-l_3:md p-r_2 w_100 w_auto:md">
         Medical Reviewer(s):
      </li>
      <li class="p-l_3:md p-r_3" data-attr="editor">
         <a class="link"><i class="fas fa-user p-r_3 c_black-5"></i>Simon
            Puckett</a>
      </li>
      <li class="br-l_1 br_secondary-3 br_dotted:md br_none p-l_3:md p-r_3" data-attr="editor">
         <a class="link"><i class="fas fa-user p-r_3 c_black-5"></i>Margret
            Choe</a>
      </li>
   </ul>
</cite>
Copy Code