Page template

Templates for some of the most common types of content.

News page Awards page Meet the Team page

News page

This template can be used for simple news pieces such as faculty/student award, biography and more. For more news/feature story related blocks, please see blockquote block, call-out block, facts and stats block, related content block and video block.

Live example

Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Caption goes here

Purus sit amet volutpat consequat mauris nunc. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Sit amet cursus sit amet dictum sit. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Enim ut sem viverra aliquet eget sit amet tellus. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Est sit amet facilisis magna etiam tempor orci eu lobortis. Lobortis scelerisque fermentum dui faucibus in ornare quam. Vulputate ut pharetra sit amet aliquam id. Aenean vel elit scelerisque mauris pellentesque. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Bibendum neque egestas congue quisque egestas. Diam quis enim lobortis scelerisque fermentum dui. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum.

Odio facilisis mauris sit amet massa vitae tortor condimentum. Fermentum et sollicitudin ac orci phasellus egestas tellus. Libero enim sed faucibus turpis in eu mi. Mauris a diam maecenas sed enim ut sem viverra. Commodo ullamcorper a lacus vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris sit amet. Luctus accumsan tortor posuere ac. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Tristique senectus et netus et malesuada fames ac. Vitae elementum curabitur vitae nunc. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Netus et malesuada fames ac turpis. Eu facilisis sed odio morbi quis commodo odio. Vitae suscipit tellus mauris a diam maecenas. Sit amet aliquam id diam maecenas. In fermentum et sollicitudin ac orci phasellus egestas. Morbi tristique senectus et netus et malesuada.

Code

<p class="lead">Lead paragraph...</p>

<!---Adjust photo size by updating col-sm-6. A bigger col-sm number makes it larger and a smaller number makes it smaller--->
<div class="col-sm-6 float-right pr-lg-0 mb-3">
        <img src="img.jpg" alt="#">
        <p class="caption">Caption goes here</p>
</div>

<p>Paragraph text...</p>

<p>Paragraph text...</p>

Awards page

This template can also be used for displaying a list of programs, key points, and more.

Live example

Awardee name

Awardee title

Short bio.

Awardee name

Awardee title

Short bio.

Awardee name

Awardee title

Short bio.

Code

<p class="lead">Lead paragraphy.</p>

<div class="row mb-3">
        <div class="col-3">
                <img alt="#" src="img.jpg" />
        </div>

        <div class="col-9">
                <h3 class="my-0">Awardee name</h3>
                <p>Awardee title</p>
                <p>Short bio.</p>
        </div>
</div>

<div class="row mb-3">
        <div class="col-3">
                <img alt="#" src="img.jpg" />
        </div>

        <div class="col-9">
                <h3 class="my-0">Awardee name</h3>
                <p>Awardee title</p>
                <p>Short bio.</p>
        </div>
</div>

<div class="row mb-3">
        <div class="col-3">
                <img alt="#" src="img.jpg" />
        </div>

        <div class="col-9">
                <h3 class="my-0">Awardee name</h3>
                <p>Awardee title</p>
                <p>Short bio.</p>
        </div>
</div>

Meet the Team page

For best display quality, images should be saved in .jpg format. Image width should not exceed 450px for two-column cards, and they should not exceed 400px for three-column cards.

STARS leadership

Eve Riskin
Professor, Electrical & Computer Engineering
Faculty Director, STARS and ADVANCE
Presidential Award for Excellence in Science, Mathematics, and Engineering Mentoring

Sonya Cunningham
Executive Director
206-543-6876
sgc4@uw.edu

Lindi Rubadiri-Mujugira
Director
206-685-9537
lindirm@uw.edu
319 Loew

STARS staff

Carrie Mills
Operations Manager
206-483-4866
cmills4@uw.edu
344 Loew

Kaytie Ohashi
Academic Counselor
kjyp@uw.edu

STEM instructional staff

Charles Camacho
Math/Physics Instructor
206-685-6839
camachoc@uw.edu
013A Loew

Millie Ito
Math/Physics Assistant Instructor
206-221-3991
maneko@uw.edu
013B Loew

Teaching Assistants (TAs)

Pablo Trefftz Posada
Predoctoral Instructor
206-221-3991
ptrefftz@uw.edu
013B Loew

Allyson Stanley
Chemistry TA
206-221-3991
aks39@uw.edu
013B Loew

Code

<h2>Group name</h2>
<!---For best display quality, images should be saved in .jpg format. Image width should not exceed 450px for two-column cards, and they should not exceed 400px for three-column cards.--->
<!---Three members group.--->
<div class="card-deck">
        <div class="card p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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 p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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 p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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>

<h2>Group name</h2>
<!---Two members group. --->
<div class="card-deck">
        <div class="card p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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 p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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="col-4">&nbsp;</div>
</div>

<h2>Group name</h2>
<!---One members group--->
<div class="card-deck">
        <div class="card p-0">
                <img alt="#" src="img.jpg" />
                <div class="card-body p-4">
                        <p class="mb-0"><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="col-4">&nbsp;</div>
        <div class="col-4">&nbsp;</div>
</div>