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

5.6.1 Decrative Blockquote

This component is a blockquote that has been designed with an emphasis on style. It starts and ends with iconic quotation marks, followed by the actual quote text and a citation. The design uses flexible box model to ensure that the text and the quote icons align correctly. It also applies shadows, borders, and background colors to make the blockquote visually distinct.

Sub.Data.Member.FullName - Full Name Sub.Data.Member.Title - Title

Data Elements:

Example

Default styling

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

NOTE:

This component can drop the photo.

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

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

Code Sample

Copy Code