Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Faculty

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

6 Faculty

Description: Faculty are the people who are responsible for the design and development of the sessions used in an event. They can take many roles in the session or presentation, such as: chair, panelist, presenter, facilitator, or even a author. There can be many faculty members to a single presentation.

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

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

6.2 Full Data with Photo

Description:

This component is used to display full information about faculty members, including a headshot, name, title, location, biography, and social media links.

Sub.Faculty.TwitterButton - Twitter Button
Sub Components in Design:
    Data.Faculty.Photo - Faculty Photo Data.Faculty.FullName - Faculty Full Name Data.Faculty.Title - Faculty Title Data.Faculty.Location - Faculty Location Data.Faculty.Bio - Faculty Bio
    Data Elements:

      Example

      Default styling

      Pepper H. Soda III, MD, FACC

      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.
      NOTE:
      Please ensure that the faculty data, especially the biography, is properly formatted HTML. 
      <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 m-x_0:md m-x_auto max-w_15 w_100 br_radius shadow_overlap-light overflow_hidden m-b_4">
        <img
            class="aspect_1x1 w_100"
            src="https://i.pravatar.cc/300"
            alt="Pepper H. Soda III, MD, FACC"
        />    </div>
    <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">
            <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">
            <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>
      Copy Code

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

      6.3 Full Data with Photo

      Description: The most basic way we represent a faculty.

      br_radius - The border radius of the image. br_round - The border radius of the image. br_circle - The border radius of the image.

      SupComponents: Sub.Faculty.TwitterButton - Twitter Button

      Data.Faculty.Photo - Profile Photo Data.Faculty.FullName - Full Name Data.Faculty.Title - Title Data.Faculty.Bio - Bio
      Data Elements:

        Example

        Default styling

        Pepper H. Soda III, MD, FACC

        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 p-b_4 m-b_4 font_0 gap-x_5:lg gap-x_4"
>
	<div
		class=" flex_auto m-x_0:md m-x_auto max-w_15 w_100 shadow_overlap-light overflow_hidden m-b_4  self_center "
	>
    <img
        class="aspect_1x1 w_100"
        src="https://i.pravatar.cc/300"
        alt="Pepper H. Soda III, MD, FACC"
    />	</div>
	<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_center">
            <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>
        Copy Code