Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

single icon

  • 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
  • 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
  • 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
  • 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
  • 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

floating icons

  • 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
  • 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
  • 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
  • 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
  • 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
<h2>single icon</h2>
<ul class="grid columns_5:lg columns_3:md columns_1 ul_none gap_4">
    <li class="col_all col-end_2:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_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_accent-n4 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></li>
    <li class="col_all col-end_3:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_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_accent-n4 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></li>
    <li class="col_all col-end_4:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_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_accent-n4 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></li>
    <li class="col_all col-end_5:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_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_accent-n4 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></li>
    <li class="col_all col-end_6:md wrapper-container"><blockquote class="flex flex_row:sm flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc c_acc-4 flex_none font_1 font_2:sm font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto font_n1 font_0:sm font_1:md p_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_accent-n4 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></li>
</ul>
<h2>floating icons</h2>
<ul class="grid columns_5:lg columns_3:md columns_1 ul_none gap_5">
    <li class="col_all col-end_2:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
    <div class="flex_shrink l_n3:md relative">
        <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
    </div>
    <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light 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_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <div class="flex_shrink r_n3:md relative">
    <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
    </div>
</blockquote></li>
    <li class="col_all col-end_3:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
    <div class="flex_shrink l_n3:md relative">
        <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
    </div>
    <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light 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_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <div class="flex_shrink r_n3:md relative">
    <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
    </div>
</blockquote></li>
    <li class="col_all col-end_4:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
    <div class="flex_shrink l_n3:md relative">
        <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
    </div>
    <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light 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_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <div class="flex_shrink r_n3:md relative">
    <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
    </div>
</blockquote></li>
    <li class="col_all col-end_5:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
    <div class="flex_shrink l_n3:md relative">
        <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
    </div>
    <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light 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_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <div class="flex_shrink r_n3:md relative">
    <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
    </div>
</blockquote></li>
    <li class="col_all col-end_6:md wrapper-container"><blockquote class="flex flex_column flex_row:md  relative z_11 m_4 m_5:md  font_copy">
    <div class="flex_shrink l_n3:md relative">
        <i class="absolute font_7 font_10:md  t_n4 t_3:md l_0 l_n5:md fas fa-quote-left fa-fw c_acc-2 z_1 text-shadow_black-1" aria-hidden="true"></i>
    </div>
    <div class="br_1 br_black-1 br_radius br_solid c_black flex_100 flex_auto font_1 font_2:md font_3:lg m-x_n4:md p-x_4 p-x_6:md p-y_5 p-y_5:md shadow_bevel-light 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_acc-n3 float_right font-size_down-2 font_accent font_bold font_ui m-r_4 m-t_n3"><i class="fa-user fas fa-solid p-r_3" aria-hidden="true"></i>Dr. Ainsley Conolly, FACC</cite>
    </div>
    <div class="flex_shrink r_n3:md relative">
    <i class="absolute b_3:md  c_acc-2 fa-fw fa-quote-right fas font_7 font_10:md r_n5:md r_3 b_n4 text-shadow_black-2 z_1" aria-hidden="true"></i>
    </div>
</blockquote></li>
</ul>
Copy Code