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

7.3.3.2.1.1 Twitter Link List

A list of Twitter profiles, each accompanied by a name. Provides an organized display for multiple Twitter links, which could be useful for events, authors, or featured users.

Sub.Recipe.Article.Podcasts.Twitter.Button - Twitter Button

Sub Components in Design:

Example

Default styling

Twitter Links:

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

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

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

Code Sample

Copy Code