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

5.6.2 Scannable Blockquote

This component presents a styled blockquote element. The blockquote starts with an iconic quotation mark, followed by the actual quote text and a citation. The design uses flexible box model to ensure icon and text alignment.

Sub.Data.Member.FullName - Full Name

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)
Pepper H. Soda III, MD, FACC

NOTE:

This design doesn't allow inclusion of photos because it is intentionally scannable.

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

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

Code Sample

Copy Code