Source: dist/css/acc_boot.css, line 9144

5.6 Quotes

Recipes.Quote.Decrative - Quote Card Recipes.Quote.Scannable - Quote Single Icon

Sub Components in Design:

Example

Default styling

Single Icon Quote is for scannable and large collections

Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Pepper H. Soda III, MD, FACC
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Pepper H. Soda III, MD, FACC
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Pepper H. Soda III, MD, FACC
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Pepper H. Soda III, MD, FACC

Quotes with Photos are for visual interest max to 3

Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Sub.Data.Member.FullName Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Sub.Data.Member.FullName Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Sub.Data.Member.FullName Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital

FORMAT:

Content - 250 characters should be able to caputure valuable informatioon in a quote.

NOTE:

250 characters on average about 40 words meaning it is 10 seconds or time to read. Quote should be valuable because our users time is valueable.

<h2>Single Icon Quote is for scannable and large collections</h2>
<ul class="grid columns_2:md columns_1 ul_none gap_4">
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
</ul>
<h2>Quotes with Photos are for visual interest max to 3</h2>
<ul class="grid columns_3:lg columns_2:md columns_1 ul_none gap_4 gap_5:lg ">
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
</ul>

<h2>Single Icon Quote is for scannable and large collections</h2>
<ul class="grid columns_2:md columns_1 ul_none gap_4">
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
</ul>
<h2>Quotes with Photos are for visual interest max to 3</h2>
<ul class="grid columns_3:lg columns_2:md columns_1 ul_none gap_4 gap_5:lg ">
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Sub.Data.Member.FullName</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
</ul>

Code Sample

Copy Code

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap