Source: dist/css/virtual_boot.css, line 12109

6.1 Full Data Without Photo

Description: The most basic way we represent a faculty.

Example

Default styling

Pepper H. Soda III, MD, FACC

Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital

New York, NY, USA

Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.

Tweat_DrSoda

FORMAT:

This element uses data that has strict data formatting requirements. See the data tab for more information.

<section
	class="flex flex_column flex_row:md p-b_4 m-b_4 font_0 gap-x_5:lg gap-x_4"
>
	<div class="flex_auto flex_column justify_start">
		<h2 class="m-b_0 speaker_name font_display font-size_up-2 lh_2 c_primary"> Pepper H. Soda III, MD, FACC</h2>
		<ul class="speaker_metadata ul_none font_copy font-size_down">
            <!-- This is a repeated snippet -->
            <li class="c_black-8 lh_1 m_0 m-b_2">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</li>
            </ul>
            <span class="block c_black-6 font-size_down-2 lh_0 font_italic">New York, NY, USA</span>
        <div class="speaker_bio reading-typography max-w_50 font-size_down-1">
            <!-- This content can container html -->
            <p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>        </div>
        <div class="grid justify_start">
            <a class="bg_twitter br_radius c_white font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated p-x_4 p_3" 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>        </div>
	</div>
</section>

<section
	class="flex flex_column flex_row:md p-b_4 m-b_4 font_0 gap-x_5:lg gap-x_4"
>
	<div class="flex_auto flex_column justify_start">
		<h2 class="m-b_0 speaker_name font_display font-size_up-2 lh_2 c_primary"> Pepper H. Soda III, MD, FACC</h2>
		<ul class="speaker_metadata ul_none font_copy font-size_down">
            <!-- This is a repeated snippet -->
            <li class="c_black-8 lh_1 m_0 m-b_2">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</li>
            </ul>
            <span class="block c_black-6 font-size_down-2 lh_0 font_italic">New York, NY, USA</span>
        <div class="speaker_bio reading-typography max-w_50 font-size_down-1">
            <!-- This content can container html -->
            <p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>        </div>
        <div class="grid justify_start">
            <a class="bg_twitter br_radius c_white font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated p-x_4 p_3" 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>        </div>
	</div>
</section>

Code Sample

Copy Code