5.1 Recipes.Article

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

5.1.1 Podcast

A styled player for podcasts. Includes a content section, a list of related references, twitter links to the presenters, and an audio player interface with a Subscribe button.

Sub.Recipe.Article.Podcasts.References - Related References Sub.Recipe.Article.Podcasts.Twitter.List - TwitterList Sub.Recipe.Article.Podcast.Player - Player

Sub Components in Design:

Example

Default styling

Content Goes here

Related References:

0000000000000000000000
0000000000000000000000
0000000000000000000000

Twitter Links:

Pepper H. Soda III, MD, FACC Tweat_DrSoda
Pepper H. Soda III, MD, FACC Tweat_DrSoda

Subscribe to the ACCEL Lite Podcast

<div class="reading-typography">
    <!-- STARRT: Content -->
        <p>Content Goes here </p>
    <!-- END: Content -->
    <!-- STARRT: Related References -->
        <h3>Related References:</h3>
        <ol class="marker_primary">
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
        </ol>    <!-- END: Related References -->
    <!-- START: Twitter List -->
        <h3>Twitter Links:</h3>
        <ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
        <!-- START: Twitter Link: Duplicate as needed -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END: Twitter Link -->
        <!-- DELETE ME -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END DELETE ME -->
        </ul>    <!-- END: Twitter List -->
    <!-- START: Player -->
        <div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
            <audio class="w_100" controls="">
                <source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
            </audio>
            <div class="grid items_center justify_center">
                <a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
                    to the ACCEL Lite Podcast</a>
            </div>
        </div>   <!-- END: Player -->
</div>

<div class="reading-typography">
    <!-- STARRT: Content -->
        <p>Content Goes here </p>
    <!-- END: Content -->
    <!-- STARRT: Related References -->
        <h3>Related References:</h3>
        <ol class="marker_primary">
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
        </ol>    <!-- END: Related References -->
    <!-- START: Twitter List -->
        <h3>Twitter Links:</h3>
        <ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
        <!-- START: Twitter Link: Duplicate as needed -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END: Twitter Link -->
        <!-- DELETE ME -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END DELETE ME -->
        </ul>    <!-- END: Twitter List -->
    <!-- START: Player -->
        <div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
            <audio class="w_100" controls="">
                <source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
            </audio>
            <div class="grid items_center justify_center">
                <a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
                    to the ACCEL Lite Podcast</a>
            </div>
        </div>   <!-- END: Player -->
</div>

Code Sample

Copy Code

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

5.2 Grid List

This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content.

Sub.Recipe.GridList.Item - Icon and Header

Sub Components in Design:

Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL

Data Elements:

Example

Default styling

Icon and Header with Link

NOTE:

The read more is treated differently.

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Icon and Header with Link</h2>
    <ul class="columns_2:md columns_3:lg columns_1 gap-x_5:lg gap-x_4:md gap-x_3 gap-y_4 grid p-x_4:lg p-x_3:md p-x_0 ul_none">
        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>    </ul>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Icon and Header with Link</h2>
    <ul class="columns_2:md columns_3:lg columns_1 gap-x_5:lg gap-x_4:md gap-x_3 gap-y_4 grid p-x_4:lg p-x_3:md p-x_0 ul_none">
        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>    </ul>
</div>

Code Sample

Copy Code

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

5.2.1 Grid List with Grouped List

This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content.

Sub.Recipe.GridList.GroupingList.Item - Icon and Bulleted List

Sub Components in Design:

Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL

Data Elements:

Example

Default styling

Highlighted Grouped List with Category Icon and Header

Distinctio et Consequatur
- Non sed quaerat non repudiandae ipsa.
- Aut consequatur inventore ipsum numquam tempore saepe.
- In aut delectus cum laboriosam facilis qui neque sed corporis similique.
- Possimus molestiae sint molestiae occaecati praesentium eaque maxime voluptatem sint qui.
Distinctio et Consequatur
- Non sed quaerat non repudiandae ipsa.
- Aut consequatur inventore ipsum numquam tempore saepe.
- In aut delectus cum laboriosam facilis qui neque sed corporis similique.
- Possimus molestiae sint molestiae occaecati praesentium eaque maxime voluptatem sint qui.
Distinctio et Consequatur
- Non sed quaerat non repudiandae ipsa.
- Aut consequatur inventore ipsum numquam tempore saepe.
- In aut delectus cum laboriosam facilis qui neque sed corporis similique.
- Possimus molestiae sint molestiae occaecati praesentium eaque maxime voluptatem sint qui.

NOTE:

These shouldn't use a read more.

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Grouped List with Category Icon and Header</h2>
    <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>    </ul>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Grouped List with Category Icon and Header</h2>
    <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>    </ul>
</div>

Code Sample

Copy Code

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

5.2.2 Grid List with Descriptions

This component presents a list of highlighted information with descripition

Sub.Recipe.GridList.IconText.Item - Icon with Discription Sub.Recipe.GridList.IconText.Item - Icon with Discription with link Sub.Recipe.GridList.LinkedIconText.ItemReadMore - Icon with Read More

Sub Components in Design:

Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL

Data Elements:

Example

Default styling

Highlighted Content with Icon, Header, and Description. Links in descriptions optional

nihil amet distinctio Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
Pass Your Boards with Confidence Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt Action Link.
nihil amet distinctio Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
Read More about our Member Benefits.

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area link" href="#">Action Link</a></strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <span class="fa-stack font_6 order_2">
                        <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                        <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
                </span>    <div class="font-size_up text_center text_left:md order_1">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Read More
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        about our <a class="expanded-click-area link" href="#">Member Benefits</a>.
                    </span>
                </div>
            </li>       </ul>
    </div>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area link" href="#">Action Link</a></strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <span class="fa-stack font_6 order_2">
                        <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                        <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
                </span>    <div class="font-size_up text_center text_left:md order_1">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Read More
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        about our <a class="expanded-click-area link" href="#">Member Benefits</a>.
                    </span>
                </div>
            </li>       </ul>
    </div>
</div>

Code Sample

Copy Code

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

5.2.3 Grid List with Linked Descriptions

This component presents linked description with a hover effect to help each item showcase it is clickable.

Sub.Recipe.GridList.IconText.Item - Linked Icon and Text

Sub Components in Design:

Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL

Data Elements:

Example

Default styling

Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional

NOTE:

The read more is treated differently.

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>        </ul>
    </div>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>        </ul>
    </div>
</div>

Code Sample

Copy Code

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

This callout highlights the availability of the associated mobile app, offering a quick path for users to download the app and access the product on the go. It typically features app store buttons, branded device imagery, a concise headline, and a supporting subtext. Use this component when promoting the app in educational or membership-driven contexts.

Headline: Emphasizes mobility and learning benefits.
Subtext: Brief, informative, with brand reinforcement.
App Store Buttons: Use official assets with proper spacing.
Visuals: Incorporate realistic device mockups that align with ACC branding.

Example

Default styling

<aside class="columns_1 grid isolation_isolate rows_3 m-y_5:lg m-t_4 max-w_30 m_auto p-x_4" style="--row-1:90px; --row-2:90px;">
    <div data-label="background" class="bg_accent-5 row-end_end row-start_2 col_all flex shadow_bevel-light br_solid br_1 br_accent-4" style="border-radius: 16px;"></div>
    <div data-label="product-image" class="row_all col_all grid">
        <div class="bg_contain bg_no-repeat m-t_n3" style="background-image: url( 'https://www.acc.org/~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/Learn-Mobile.png' ); background-position: center top;"></div>
    </div>
    <div data-label="content-container" class="bg_white br_radius m_3 p_4 reading-typography row-end_end row-start_n2 shadow_overlap-light z_2 col_all br_solid br_black-2 br_1">
        <h4 class="font_xbold text_center font_4:lg font_3">Learn on the Go!</h4>
        <p class="text_center">Access you SAPs from anywhere on the mobile app ACC Learn.</p>
        <div class="grid columns_2 content_center gap_2 justify_center">
            <a class="bg_black br_radius ga-external" href="https://apps.apple.com/us/app/acc-learn/id1497013017" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/appstore.svg" alt="Download on the App Store"></a>
            <a class="bg_black br_radius ga-external" href="https://play.google.com/store/apps/details?id=org.acc.learn.android&amp;hl=en_US&amp;pli=1" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/googleplay.svg" alt="Get it on Google Play"></a>
        </div>
        <div class="text_center m-t_3 m-b_n2"><a href="https://www.acc.org//-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/2020/10/01/G20147-ACC-Lifelong-Learning-App-Info-Sheet.pdf" target="_blank"><small>Learn
                    More</small></a></div>
    </div>
</aside>

<aside class="columns_1 grid isolation_isolate rows_3 m-y_5:lg m-t_4 max-w_30 m_auto p-x_4" style="--row-1:90px; --row-2:90px;">
    <div data-label="background" class="bg_accent-5 row-end_end row-start_2 col_all flex shadow_bevel-light br_solid br_1 br_accent-4" style="border-radius: 16px;"></div>
    <div data-label="product-image" class="row_all col_all grid">
        <div class="bg_contain bg_no-repeat m-t_n3" style="background-image: url( 'https://www.acc.org/~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/Learn-Mobile.png' ); background-position: center top;"></div>
    </div>
    <div data-label="content-container" class="bg_white br_radius m_3 p_4 reading-typography row-end_end row-start_n2 shadow_overlap-light z_2 col_all br_solid br_black-2 br_1">
        <h4 class="font_xbold text_center font_4:lg font_3">Learn on the Go!</h4>
        <p class="text_center">Access you SAPs from anywhere on the mobile app ACC Learn.</p>
        <div class="grid columns_2 content_center gap_2 justify_center">
            <a class="bg_black br_radius ga-external" href="https://apps.apple.com/us/app/acc-learn/id1497013017" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/appstore.svg" alt="Download on the App Store"></a>
            <a class="bg_black br_radius ga-external" href="https://play.google.com/store/apps/details?id=org.acc.learn.android&amp;hl=en_US&amp;pli=1" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/googleplay.svg" alt="Get it on Google Play"></a>
        </div>
        <div class="text_center m-t_3 m-b_n2"><a href="https://www.acc.org//-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/2020/10/01/G20147-ACC-Lifelong-Learning-App-Info-Sheet.pdf" target="_blank"><small>Learn
                    More</small></a></div>
    </div>
</aside>

Code Sample

Copy Code

5.4 Recipes.Page

5.4.1 Recipes.Page.Cards

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

5.4.1.1 Half Page Card - Dark

A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.

Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist Sub.Placeholder.Image.21x9 - Image 588w x 252w

Sub Components in Design:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

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)

NOTE:

Half Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.

<div data-type="card" class="bg_acc br_rounder br-tr_radius br-tl_radius c_white color_inherit flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        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>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary wrap">btn-primary wrap</button>        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </div>
</div>

<div data-type="card" class="bg_acc br_rounder br-tr_radius br-tl_radius c_white color_inherit flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        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>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary wrap">btn-primary wrap</button>        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </div>
</div>

Code Sample

Copy Code

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

5.4.1.1.1 Half Page Card - Light

A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.

Sub.Placeholder.Image.21x9 - Image 588w x 252w

Sub Components in Design:

Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist

Data Elements:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

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)

NOTE:

Half Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.

<div data-type="card" class="bg_white br-tr_radius br-tl_radius br_rounder flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        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>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary">btn-primary</button>        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div data-type="card" class="bg_white br-tr_radius br-tl_radius br_rounder flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        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>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary">btn-primary</button>        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

Code Sample

Copy Code

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

5.4.1.2 Simple Card

A simple card component ideal for summarizing key content with a clear call to action, it maintains vertical rhythm and visual hierarchy.

Sub.ClassList.Grid.Card.Split-Triple - Triple Card Holder Classlist

Data Elements:

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

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. (200 Characters)

NOTE:

Only 1 Action per card. This is to help with context of the action and focus.

<div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Commodi dolores (30&nbsp;Characters)
            <small class="block font-size_down-2 font_medium m-t_3"> Rerum libg dero pariatur (40&nbsp;Characters)</small>
        </h3>
        <p>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. (200&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Commodi dolores (30&nbsp;Characters)
            <small class="block font-size_down-2 font_medium m-t_3"> Rerum libg dero pariatur (40&nbsp;Characters)</small>
        </h3>
        <p>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. (200&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

Code Sample

Copy Code

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

5.4.1.2.1 Card with Inset Image

A simple card component with an inset image. Because of the image the headers and text should be more consise then the Simple Card.

Sub.Placeholder.Image.16x9 - Image 360w x 162h

Sub Components in Design:

Sub.ClassList.Grid.Card.Split-Triple - Triple Card Holder Classlist

Data Elements:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

FORMAT:

Header - Max Characters of 40

Content - Max Characters of 150

NOTE:

Only 1 Action per card. This is to help with context of the action and focus.

<div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:md p-x_5:lg p-t_3 p-t_4:md p-t_5:lg">
        <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" class="br_radius" />
    </div>
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Rerum libg dero pariatur (40&nbsp;Characters)
        </h3>
        <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:md p-x_5:lg p-t_3 p-t_4:md p-t_5:lg">
        <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" class="br_radius" />
    </div>
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Rerum libg dero pariatur (40&nbsp;Characters)
        </h3>
        <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

Code Sample

Copy Code

5.4.2 Recipes.Page.FollowUpCTA

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

5.4.2.1 Follow Up CTA – Basic

A promotional callout designed to encourage user engagement, typically placed after primary content. This basic variation uses minimal styling to emphasize clarity and focus on the call to action.

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

NOTE:

The CTA Description is optional

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md " style="--custom-font-size-up: 1;">
  <div data-item="cta" class=" font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
    <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)      </p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md " style="--custom-font-size-up: 1;">
  <div data-item="cta" class=" font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
    <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)      </p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

Code Sample

Copy Code

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

5.4.2.2 Follow Up CTA – Beveled Card

This variation enhances the CTA with a beveled white card set against a shaded background, drawing user attention through elevated visual hierarchy. Ideal for page breaks or key engagement moments.

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

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. (200 Characters)

NOTE:

The CTA Description is optional

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">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. (200&nbsp;Characters)</p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">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. (200&nbsp;Characters)</p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

Code Sample

Copy Code

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

5.4.2.3 Follow Up CTA – Page Divider

Incorporates a horizontal divider to create a subtle transition between content blocks, maintaining visual flow while signaling the importance of the CTA.

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

NOTE:

The CTA Description is optional

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="p_4 p-t_6 p-x_5:lg bg_white br-t_1 br_solid br_primary-1 font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="p_4 p-t_6 p-x_5:lg bg_white br-t_1 br_solid br_primary-1 font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

Code Sample

Copy Code

5.4.3 Recipes.Page.Panel

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

5.4.3.1 Image-Text Panel with CTA Link

This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.

Sub.Component.Common.ReadMoreArrow - Read More Arrow Sub.Placeholder.Image.600x400 - 600x400 Image Placeholder

Sub Components in Design:

Example

Default styling

Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)

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. (200 Characters)

FORMAT:

Headline - Max Characters 80

Content - Max Characters 200

NOTE:

Do use when it is a single directing action for the user, and when content would be too much for a card.

Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>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. (200&nbsp;Characters)</p>    </div>
    <footer class="flex flex_row m-t_auto c_accent-n2">
      <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
      <span class="fa-stack font_6 order_2">
              <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
              <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
      </span>  </footer>
  </div>
</div>

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>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. (200&nbsp;Characters)</p>    </div>
    <footer class="flex flex_row m-t_auto c_accent-n2">
      <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
      <span class="fa-stack font_6 order_2">
              <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
              <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
      </span>  </footer>
  </div>
</div>

Code Sample

Copy Code

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

5.4.3.1.1 Image-Text Panel with CTA Link Reverses

This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is formated so the image always stacks above the content when in mobile. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.

Sub.Component.Common.ReadMoreArrow - Read More Arrow Sub.Placeholder.Image.600x400 - 600x400 Image Placeholder

Sub Components in Design:

Example

Default styling

Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)

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. (200 Characters)

FORMAT:

Headline - Max Characters 80

Content - Max Characters 200

NOTE:

Do use when it is a single directing action for the user, and when content would be too much for a card.

Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center order_1 order_2:lg">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
    <div class="font_n1 font_0:lg flex_column flex gap_4 order_1:lg order_2">
      <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>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. (200&nbsp;Characters)</p>
      </div>
      <footer class="flex flex_row m-t_auto c_accent-n2">
        <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
        <span class="fa-stack font_6 order_2">
                <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
        </span>    </footer>
    </div>
</div>

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center order_1 order_2:lg">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
    <div class="font_n1 font_0:lg flex_column flex gap_4 order_1:lg order_2">
      <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>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. (200&nbsp;Characters)</p>
      </div>
      <footer class="flex flex_row m-t_auto c_accent-n2">
        <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
        <span class="fa-stack font_6 order_2">
                <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
        </span>    </footer>
    </div>
</div>

Code Sample

Copy Code

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

5.4.3.2 Small Image-Text Panel with CTA Link

This is the alternate layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.

Sub.Placeholder.Image.375x250 - Image 375w x 250w HTML.Inputs.Button.SM - Small Shade Button

Sub Components in Design:

Example

Default styling

Sed ut perspiciatis unde omnis iste natus er (60 Characters)

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

FORMAT:

Headline - Max Characters 60

Content - Max Characters 150

NOTE:

Do use when it is a single directing action for the user, and when content would be too much for a card.

Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.

! Strict Content Constraints ! this design is very structured and requires strict adhearnce.

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-1:min(100%, 375px); --col-2:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-end_2:lg col_all">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="col-start_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade float_right">btn-shade float_right</button>        </div>
    </div>
</div>

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-1:min(100%, 375px); --col-2:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-end_2:lg col_all">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="col-start_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade float_right">btn-shade float_right</button>        </div>
    </div>
</div>

Code Sample

Copy Code

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

5.4.3.3 Small Image-Text Panel with CTA Link (Alternate)

This is the alternate layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.

Sub.Placeholder.Image.375x250 - Image 375w x 250h HTML.Inputs.Button.SM - Small Shade Button

Sub Components in Design:

Example

Default styling

Sed ut perspiciatis unde omnis iste natus er (60 Characters)

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

FORMAT:

Headline - Max Characters 60

Content - Max Characters 150

NOTE:

Do use when it is a single directing action for the user, and when content would be too much for a card.

Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.

! Strict Content Constraints ! this design is very structured and requires strict adhearnce.

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-2:min(100%, 375px); --col-1:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-start_2:lg col_all row-start_1">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="row-start_1 col-end_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade float_right">btn-shade float_right</button>        </div>
    </div>
</div>

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-2:min(100%, 375px); --col-1:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-start_2:lg col_all row-start_1">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="row-start_1 col-end_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade float_right">btn-shade float_right</button>        </div>
    </div>
</div>

Code Sample

Copy Code

5.4.4 Recipes.Page.Product

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

5.4.4.1 Product Banner

Sub.Placeholder.Image.320x300 - Image 320x300 Sub.Placeholder.Image.600x300 - Image 600x300 Sub.Placeholder.Image.1024x256 - Image 1024x256 Sub.Placeholder.Image.1200x300 - Image 1200x300

Sub Components in Design:

Example

Default styling

ProductNameSAP
Product Description

NOTE:

The color in the product name uses the pathway color codes

<div class="columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 m-t_n4 m-x_n4:lg min-h_20 overflow_hidden relative rows_1">
  <div class="col_all row_all ">
    <picture class="bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42" media="(min-width: 1024px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42" media="(min-width: 768px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" alt="Hero Image" class="bg_cover flex_100">
    </picture>
  </div>
  <div class="col_all columns_1 font-size_up-2 grid inset_0 items_center justify_start p-y_3 p-y_4:md p-y_5:lg row_all self_center">
    <h1 class="c_white font-size_up-2 isolation_isolate lh_1 m_0 relative self_center">
      <span class="inline-block p-x_4 p-y_3 bg_acc-n3" style="box-decoration-break: clone;"><strong class="font_xbold c_special" >ProductName</strong>SAP</span><br>
      <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3" style="box-decoration-break: clone;">Product Description</span>
    </h1>
  </div>
</div>

<div class="columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 m-t_n4 m-x_n4:lg min-h_20 overflow_hidden relative rows_1">
  <div class="col_all row_all ">
    <picture class="bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42" media="(min-width: 1024px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42" media="(min-width: 768px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" alt="Hero Image" class="bg_cover flex_100">
    </picture>
  </div>
  <div class="col_all columns_1 font-size_up-2 grid inset_0 items_center justify_start p-y_3 p-y_4:md p-y_5:lg row_all self_center">
    <h1 class="c_white font-size_up-2 isolation_isolate lh_1 m_0 relative self_center">
      <span class="inline-block p-x_4 p-y_3 bg_acc-n3" style="box-decoration-break: clone;"><strong class="font_xbold c_special" >ProductName</strong>SAP</span><br>
      <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3" style="box-decoration-break: clone;">Product Description</span>
    </h1>
  </div>
</div>

Code Sample

Copy Code

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

5.4.4.2 Product CTA

This call-to-action component highlights a specific product or educational resource, pairing branded imagery with concise promotional content and a prominent button. Use it to drive conversions for key offerings, such as board prep tools or certifications. Place in sidebars, landing pages, or learning resource hubs for maximum visibility.

MarkupClasses:

HTML.Inputs.Button.CTA - CTA Button Sub.Placeholder.Image.320x300 - Image 320x300 Sub.Placeholder.Image.16x9 - Image 455x195

Sub Components in Design:

DATA:

Data Elements:

Example

Default styling

ProductNameSAP
Product Description

Ready to Take the Next Step?

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

NOTE:

The color in the product name uses the pathway color codes

<div label="split-panel" class="bg_primary-5 br_radius columns_1 columns_2:md gap_4 gap_5:md grid m-t_4 m-x_n4 p_4 p_5:md relative">
  <div class="col-end_2:md col_all columns_1 grid isolation_isolate overflow_hidden relative rows_1">
    <picture class="col_all row_all bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" alt="Hero Image" loading="lazy" class="bg_cover flex_100">
    </picture>
    <div class="b_3 col_all font-size_up-2 grid inset_0 justify_start m-y_4 relative row_all self_center">
      <h2 class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
        <span class="inline-block p-x_4 p-y_3 bg_acc-n3 box-decoration_clone"><strong class="font_xbold c_special">ProductName</strong>SAP</span><br>
        <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 box-decoration_clone">Product Description</span>
      </h2>
    </div>
  </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="p-y_4">
      <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display"><strong class="font-size_up m-b_2 block">Ready to Take the Next Step?</strong></h2>
      <p class="font-size_up lh_3">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
      <button class="btn btn-primary btn-lg capitalize">Purchase</button>    </div>
  </div>
</div>

<div label="split-panel" class="bg_primary-5 br_radius columns_1 columns_2:md gap_4 gap_5:md grid m-t_4 m-x_n4 p_4 p_5:md relative">
  <div class="col-end_2:md col_all columns_1 grid isolation_isolate overflow_hidden relative rows_1">
    <picture class="col_all row_all bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" alt="Hero Image" loading="lazy" class="bg_cover flex_100">
    </picture>
    <div class="b_3 col_all font-size_up-2 grid inset_0 justify_start m-y_4 relative row_all self_center">
      <h2 class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
        <span class="inline-block p-x_4 p-y_3 bg_acc-n3 box-decoration_clone"><strong class="font_xbold c_special">ProductName</strong>SAP</span><br>
        <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 box-decoration_clone">Product Description</span>
      </h2>
    </div>
  </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="p-y_4">
      <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display"><strong class="font-size_up m-b_2 block">Ready to Take the Next Step?</strong></h2>
      <p class="font-size_up lh_3">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
      <button class="btn btn-primary btn-lg capitalize">Purchase</button>    </div>
  </div>
</div>

Code Sample

Copy Code

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

5.4.5 Page Break with Headline

This component represents a page break with a headline. It can be used to visually separate sections of a page or document. These Page Breaks are semanticaly an h2 with decorations. This shouldn't be used with other levels of Headlines.

Example

Default styling

asdf fasdfa sd asdf s adffas dfsdasdf Need Help

NOTE:

These are styled heavier then a normal h2 and there are for eaiser understanding that this is a sperator of major content areas.

<h2 class="c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4">
  <span class="flex_auto flex_shrink grid">
    <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
  </span>
  <span class="flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center">asdf fasdfa sd asdf s adffas dfsdasdf
    Need Help
  </span>
  <span class="flex_auto flex_shrink grid">
    <span class="br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center"></span>
  </span>
</h2>

<h2 class="c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4">
  <span class="flex_auto flex_shrink grid">
    <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
  </span>
  <span class="flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center">asdf fasdfa sd asdf s adffas dfsdasdf
    Need Help
  </span>
  <span class="flex_auto flex_shrink grid">
    <span class="br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center"></span>
  </span>
</h2>

Code Sample

Copy Code

5.5 Recipes.PriceTable

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

5.5.1 Price Table

A collection of price points and the various features of each at a glance.

Sub.Recipe.PriceTable.Card.Light - Light Background Card Sub.Recipe.PriceTable.Card.Dark - Dark Background Card

Sub Components in Design:

Sub.ClassList.Grid.TripleLG - Grid Classes Triple @ LG

Data Elements:

Example

Default styling

Basic

$39/Month
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
- Quality-focused
- Phased
- Automated
- Cross-platform
Choose Plan
primary

$99/Month
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
- primary
- Automated
- Cross-platform
Choose Plan
secondary

$99/Month
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
- secondary
- Automated
- Cross-platform
Choose Plan

NOTE:

Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light default">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
                <li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_primary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">primary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>primary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_secondary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">secondary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>secondary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li></ul>

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light default">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
                <li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_primary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">primary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>primary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_secondary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">secondary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>secondary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li></ul>

Code Sample

Copy Code

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

5.5.2 Price Table Simple

A collection of price points at a glance.

Sub.Recipe.PriceTable.Card.Simple.Light - Light Background Card Sub.Recipe.PriceTable.Card.Simple.Dark - Dark Background Card

Sub Components in Design:

Sub.ClassList.Grid.TripleLG - Grid Classes Triple @ LG

Data Elements:

Example

Default styling

default

$860 /Annual Dues
- 150Application Fee
Join Now
USD
secondary

$860 /Annual Dues
- 150 Application Fee
Join Now
USD
accent

$860 /Annual Dues
- 150 Application Fee
Join Now
USD

NOTE:

Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="bg_default-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">default</h2>
        <h3 data-element="table-price" class="font-size_up-2 lh_2">
        <span class="font_bold">$860</span>
        <span>/Annual Dues</span>
        </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_secondary-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">secondary</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_accent-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">accent</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li></ul>

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="bg_default-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">default</h2>
        <h3 data-element="table-price" class="font-size_up-2 lh_2">
        <span class="font_bold">$860</span>
        <span>/Annual Dues</span>
        </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_secondary-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">secondary</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_accent-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">accent</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li></ul>

Code Sample

Copy Code

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

5.5.3 Triple Pricing Bento

In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.

Use this component to display structured pricing options for multiple membership types. It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.

Adapts layout responsively from side-by-side (desktop) to stacked (mobile).
Color-coded backgrounds improve segmentation.
Use when side-by-side price comparisons are needed.
Avoid when only one price is shown — use a simple card instead.

Sub.Recipe.PriceTable.Bento.Card - Price Card

Sub Components in Design:

Example

Default styling

primary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*
secondary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*
accent

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*

<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">primary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_secondary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">secondary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_accent-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">accent</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li></ul>

<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">primary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_secondary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">secondary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_accent-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">accent</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li></ul>

Code Sample

Copy Code

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

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

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

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

5.7 Ordered Cards

Having cards order on page to help users find there way through steps can some times be very helpful.

Example

Default styling

First it is bad

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Then it is not right

This is a card.

It has an easy to override visual style, and is appropriately subdued.

At last it is good

This is a card.

It has an easy to override visual style, and is appropriately subdued.

<div class="flex texture_medium counter_reset p_5">
   <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
            <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">First it is bad</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
            <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">Then it is not right</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
            <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">At last it is good</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
</div>

<div class="flex texture_medium counter_reset p_5">
   <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
            <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">First it is bad</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
            <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">Then it is not right</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
            <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">At last it is good</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
</div>

Code Sample

Copy Code

Recipes

5.1 Recipes.Article

5.1.1 Podcast

Sub Components in Design:

Example

Default styling

Related References:

Twitter Links:

5.2 Grid List

Sub Components in Design:

Data Elements:

Example

Default styling

Icon and Header with Link

NOTE:

5.2.1 Grid List with Grouped List

Sub Components in Design:

Data Elements:

Example

Default styling

Highlighted Grouped List with Category Icon and Header

NOTE:

5.2.2 Grid List with Descriptions

Sub Components in Design:

Data Elements:

Example

Default styling

Highlighted Content with Icon, Header, and Description. Links in descriptions optional

5.2.3 Grid List with Linked Descriptions

Sub Components in Design:

Data Elements:

Example

Default styling

Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional

NOTE:

5.3 Mobile App CTA

Example

Default styling

5.4 Recipes.Page

5.4.1 Recipes.Page.Cards

5.4.1.1 Half Page Card - Dark

Sub Components in Design:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

NOTE:

5.4.1.1.1 Half Page Card - Light

Sub Components in Design:

Data Elements:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

NOTE:

5.4.1.2 Simple Card

Data Elements:

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

NOTE:

5.4.1.2.1 Card with Inset Image

Sub Components in Design:

Data Elements:

Example

Default styling

Rerum libg dero pariatur (40 Characters)

FORMAT:

NOTE:

5.4.2 Recipes.Page.FollowUpCTA

5.4.2.1 Follow Up CTA – Basic

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

NOTE:

5.4.2.2 Follow Up CTA – Beveled Card

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

NOTE:

5.4.2.3 Follow Up CTA – Page Divider

Example

ProductNameSAP
Product Description

ProductNameSAP
Product Description