Contact us block

The contact us block is placed in the sidebar for displaying contact information.

Individual contact

To be used for three or fewer contacts
Suggested photo size: 245px by 125px
If a team has a Listserv or dedicated emails for specific use, list this at the top above the individual contact information

Code

If only one contact is needed, please remove mb-2 from the card div. The last card div should also not have mb-2.

	
<h2 class="contact my-0 p-3 text-uppercase">Questions?</h2>
<div class="bg-light p-2">
        <!---General contact info. Optional---->
        <div class="card mb-2">
                        <div class="card-body p-2">
                        <p class="mb-0 small"><strong>General inquiries:</strong><br />
                        Phone number<br />
                        <a href="mailto:email@uw.edu">email@uw.edu</a><br>
                        Office number and location</p>
                </div>
        </div>
        <!---End general contact info---->
        <div class="card mb-2">
                <img alt="#" class="card-img-top" src="img.jpg" />
                <div class="card-body p-2">
                        <p class="mb-0 small"><strong>Name</strong><br />
                        Title<br />
                        Phone number<br />
                        <a href="mailto:email@uw.edu">email@uw.edu</a><br />
                        Office number and location</p>
                </div>
        </div>
        <div class="card mb-2">
                <img alt="#" class="card-img-top" src="img.jpg" />
                <div class="card-body p-2">
                        <p class="mb-0 small"><strong>Name</strong><br />
                        Title<br />
                        Phone number<br />
                        <a href="mailto:email@uw.edu">email@uw.edu</a><br />
                        Office number and location</p>
                </div>
        </div>
        <div class="card">
                <img alt="#" class="card-img-top" src="img.jpg" />
                <div class="card-body p-2">
                        <p class="mb-0 small"><strong>Name</strong><br />
                        Title<br />
                        Phone number<br />
                        <a href="mailto:email@uw.edu">email@uw.edu</a><br />
                        Office number and location</p>
                </div>
        </div>
</div>

Team contact

To be used when a team has more than 3 contacts
Include only the general contact information in this block
If a team is student-facing, include a link that goes to a Meet the Team student-facing, include a link that goes to the corresponding section on Office of the Dean staff directory page

Live example

Code

	
<h2 class="contact my-0 p-3 text-uppercase">Questions?</h2>
<div class="bg-light p-2">
        <div class="card">
                <div class="card-body p-2">
                        <p class="mb-0 small"><strong>Contact the XYZ team</strong><br />
                        Phone number<br />
                        <a href="mailto:email@uw.edu">email@uw.edu</a><br />
                        Office number and location</p>
                        <p class="mb-0"><a class="btn btn-default btn-sm" href="#">Meet the team</a></p>
                </div>
        </div>
</div>