Home News Section

I'm interested in

Featured News Thumbnail

Jane Dow

Business & Corporate Law Faculty

Jane Doe is a partner in the Washington D.C. office of Steptoe & Johnson and chairs the firm’s Campaign Finance and Political Law Practice. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

News Image 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Leverage agile frameworks to provide a robust synopsis for high level overviews…

Really Long Title Tag Tag 2

Publication Title Here Mattis Ullper Velit In Felis Quis Tortor Pretium Velit In

Author 1
Faculty Author Name
Really Long Title Tag Tag 2 Longer Tag
News Image 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Leverage agile frameworks to provide a robust synopsis for high level overviews…

Really Long Title Tag Tag 2

Publication Title Here Mattis Ullper Velit In Felis Quis Tortor Pretium Velit In

Author 1
Faculty Author Name
Really Long Title Tag Tag 2 Longer Tag
Explore this Area of Study Explore All Degree Programs 
<section class="news-filter-section">
		<div class="frame">
			<div class="news-dropdown-wrapper flex-wrapper space-between">
				<div class="news-header-container">
					<h2>I'm interested in</h2>
				</div>
				<div class="news-dropdown-container">
					<select name="" id="">
						<option value="">Administrative Law & Regulation</option>
						<option value="">Business & Corporate Law</option>
						<option value="">Civil Procedure</option>
						<option value="">Constitutional Law</option>
						<option value="">Criminal Law</option>
						<option value="">Environmental Law</option>
						<option value="">Health Law</option>
						<option value="">Intellectual Property & Technology Law</option>
						<option value="">International & Comparative Law</option>
						<option value="">Law & Economics</option>
						<option value="">Legal History</option>
						<option value="">Philosophy</option>
						<option value="">Tax Law & Policy</option>
						<option value="">Women, Leadership & the Law</option>
					</select>
				</div>
			</div>
		</div>
	</section>
	<section class="news-call-section">
		<div class="frame">
			<div class="featured-news-container flex-wrapper flex-end relative">
				<div class="featured-image-wrap link-fill-wrapper">
					<img src="assets/toolkit/images/featured-news.jpg" class="link-fill" alt="Featured News Thumbnail">
				</div>
				<div class="featured-news-content">
					<h3>Jane Dow</h3>
					<h4>Business & Corporate Law Faculty</h4>
					<p class="large-intro-p">Jane Doe is a partner in the Washington D.C. office of Steptoe & Johnson and chairs the firm’s Campaign Finance and Political Law Practice. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
			<div class="news-container flex-wrapper wrap">
				<div class="flex-4 flex-wrapper flex-column space-between relative news-content news-image-container">
					<div>
						<img src="assets/toolkit/images/news-item-1.jpg" alt="News Image 1">
						<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
						<p class="intro-p">Leverage agile frameworks to provide a robust synopsis for high level overviews…</p>
					</div>
					<div class="tag-container">
						<a href="#"><span class="meta-tag">Really Long Title Tag</span></a>
						<a href="#"><span class="meta-tag">Tag 2</span></a>
					</div>
				</div>
				<div class="flex-4 flex-wrapper flex-column space-between relative news-content">
					<div>
						<h3>Publication Title Here Mattis Ullper Velit In Felis Quis Tortor Pretium Velit In</h3>
						<div class="meta flex-wrapper center">
							<div class="news-meta-circle link-fill-wrapper">
								<img src="assets/toolkit/images/author-1.jpg" class="link-fill" alt="Author 1">
							</div>
							<a href="#" class="small-button">Faculty Author Name</a>
						</div>
					</div>
					<div class="tag-container">
						<a href="#"><span class="meta-tag">Really Long Title Tag</span></a>
						<a href="#"><span class="meta-tag">Tag 2</span></a>
						<a href="#"><span class="meta-tag">Longer Tag</span></a>
					</div>
				</div>
				<div class="flex-4 flex-wrapper flex-column space-between relative news-content news-image-container">
					<div>
						<img src="assets/toolkit/images/news-item-2.jpg" alt="News Image 2">
						<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
						<p class="intro-p">Leverage agile frameworks to provide a robust synopsis for high level overviews…</p>
					</div>
					<div class="tag-container">
						<a href="#"><span class="meta-tag">Really Long Title Tag</span></a>
						<a href="#"><span class="meta-tag">Tag 2</span></a>
					</div>
				</div>
				<div class="flex-4 flex-wrapper flex-column space-between relative news-content">
					<div>
						<h3>Publication Title Here Mattis Ullper Velit In Felis Quis Tortor Pretium Velit In</h3>
						<div class="meta flex-wrapper center">
							<div class="news-meta-circle link-fill-wrapper">
								<img src="assets/toolkit/images/author-1.jpg" class="link-fill" alt="Author 1">
							</div>
							<a href="#" class="small-button">Faculty Author Name</a>
						</div>
					</div>
					<div class="tag-container">
						<a href="#"><span class="meta-tag">Really Long Title Tag</span></a>
						<a href="#"><span class="meta-tag">Tag 2</span></a>
						<a href="#"><span class="meta-tag">Longer Tag</span></a>
					</div>
				</div>
			</div>
			<div class="flex-wrapper space-between inner-frame button-container">
				<a href="" class="large-button">Explore this Area of Study</a>
				<a href="" class="large-button">Explore All Degree Programs</a>
			</div>
		</div>
	</section>

Homepage Accordion Section

A Cross Disciplinary Curriculum

A Cross
Disciplinary
Curriculum

Career Home Image

We believe the lawyers of tomorrow will also be experts in business, communications, health, technology, international studies, social work, and education. As an essential part of the University of Pennsylvania family, we allow our students to enrich their legal education by offering graduate level courses at one of our sister schools as well as joint degrees or certificates of study.

Explore Joint Degrees
Real World Career Success

Real World
Career Success

Career Home Image

The Law School is the number one law school for career outcomes and placements in the United States. The strength of our programs coupled with our deep alumni network ensure that graduates can enter the market working in the fields they love, writing the future of law both nationally and internationally.

See Our Career Outcomes
A Collegial Environment

A Collegial
Environment

Career Home Image

When you are accepted into the Law School, you are accepted into a greater community that is focused on one common goal: forging the future of law. We invite students, faculty, and staff to challenge the norm in a rigorous but supportive environment. For many in our community, the Law School represents a common ground where warmth, inclusivity, and the pursuit of knowledge are shared values.

Find Yourself in Our Community
Pro Bono & Public Service

Pro Bono &
Public Service

Career Home Image

Service for the public good has always been an essential feature of legal education at the Law School. Our award-winning commitment to public service is a source of pride and a tremendous opportunity for our students to gain valuable experience while doing good for the world.

Discover Our Commitment 
<section class="large-accordion-section">
		<div class="large-frame relative">
			<div class="accordion-triggers-header flex-wrapper flex-end center">
				<div class="accordion-triggers dynamic-accordion flex-wrapper flex-end wrap">
					<a href="javascript:void(0);" class="accordion-trigger active-accordion-trigger" data-id="ac-data-1">A Cross Disciplinary Curriculum</a>
					<div class="accordion-content active-accordion-content" data-id="ac-data-1">
						<div class="flex-wrapper">
							<h2 class="h1">A Cross <br />Disciplinary <br />Curriculum</h2>
						</div>
						<div class="accordion-image-wrapper">
							<img src="assets/toolkit/images/home-career-image.jpg" alt="Career Home Image">
						</div>
						<div class="accordion-paragraph">
							<p class="large-intro-p">We believe the lawyers of tomorrow will also be experts in business, communications, health, technology, international studies, social work, and education. As an essential part of the University of Pennsylvania family, we allow our students to enrich their legal education by offering graduate level courses at one of our sister schools as well as joint degrees or certificates of study.</p>
							<a href="https://www.youtube.com/watch?v=2zSFrU4bin4&feature=youtu.be" class="button" data-fancybox>Explore Joint Degrees</a>
						</div>
					</div>
					<a href="javascript:void(0);" class="accordion-trigger" data-id="ac-data-2">Real World Career Success</a>
					<div class="accordion-content" data-id="ac-data-2">
						<div class="flex-wrapper">
							<h2 class="h1">Real World <br />Career Success</h2>
						</div>
						<div class="accordion-image-wrapper">
							<img src="assets/toolkit/images/home-career-image.jpg" alt="Career Home Image">
						</div>
						<div class="accordion-paragraph">
							<p class="large-intro-p">The Law School is the number one law school for career outcomes and placements in the United States. The strength of our programs coupled with our deep alumni network ensure that graduates can enter the market working in the fields they love, writing the future of law both nationally and internationally. </p>
							<a href="" class="button">See Our Career Outcomes</a>
						</div>
					</div>
					<a href="javascript:void(0);" class="accordion-trigger" data-id="ac-data-3">A Collegial Environment</a>
					<div class="accordion-content" data-id="ac-data-3">
						<div class="flex-wrapper">
							<h2 class="h1">A Collegial <br />Environment</h2>
						</div>
						<div class="accordion-image-wrapper">
							<img src="assets/toolkit/images/home-career-image.jpg" alt="Career Home Image">
						</div>
						<div class="accordion-paragraph">
							<p class="large-intro-p">When you are accepted into the Law School, you are accepted into a greater community that is focused on one common goal: forging the future of law. We invite students, faculty, and staff to challenge the norm in a rigorous but supportive environment. For many in our community, the Law School represents a common ground where warmth, inclusivity, and the pursuit of knowledge are shared values.</p>
							<a href="" class="button">Find Yourself in Our Community</a>
						</div>
					</div>
					<a href="javascript:void(0);" class="accordion-trigger" data-id="ac-data-4">Pro Bono & Public Service</a>
					<div class="accordion-content" data-id="ac-data-4">
						<div class="flex-wrapper">
							<h2 class="h1">Pro Bono & <br />Public Service</h2>
						</div>
						<div class="accordion-image-wrapper">
							<img src="assets/toolkit/images/home-career-image.jpg" alt="Career Home Image">
						</div>
						<div class="accordion-paragraph">
							<p class="large-intro-p">Service for the public good has always been an essential feature of legal education at the Law School. Our award-winning commitment to public service is a source of pride and a tremendous opportunity for our students to gain valuable experience while doing good for the world.</p>
							<a href="" class="button">Discover Our Commitment</a>
						</div>
					</div>
				</div>
			</div>
	
		</div>
	</section>

Homepage Banner

Create the
future you
want to lead

Pause IconPlay Icon 
<section class="large-banner-section" id="main" name="main">
		<div class="frame relative">
			<h1>Create the <br />future <u>you</u> <br /><u>want</u> to lead</h1>
			<div class="home-video-wrapper bg-image-wrapper relative" style="background-image:url('assets/toolkit/images/home-video-thumbnail.jpg');">
				<video src="assets/toolkit/images/stock-video-1.mp4" class="link-fill" muted autoplay loop playsinline></video>
				<a href="javascript:void();" aria-label="Pause" class="pause-trigger"><img class="pause-icon" src="assets/toolkit/images/pause-icon.svg" alt="Pause Icon"><img class="play-icon" src="assets/toolkit/images/gif-play-icon.svg" alt="Play Icon"></a>
			</div>
		</div>
	</section>

Homepage Slider

Meet the
Class of
2022

Slide Image Alt

40% Students of Color

Slide Image Alt

49% Women

Slide Image Alt

25 Average Age

Slide Image Alt

170 Median LSAT Score

Slide Image Alt 
<section class="meet-section large-slider-section">
		<div class="inner-frame">
			<div class="slider-wrap slick">
				<div class="slide flex-wrapper relative flex-end first-child">
					<h2 class="h1">Meet the <br />Class of <br /> <u>2022</u></h2>
					<div class="slide-image-wrap">
						<img src="assets/toolkit/images/slide-image-1.jpg" alt="Slide Image Alt">
					</div>
				</div>
				<div class="slide flex-wrapper relative flex-end">
					<h2 class="h1">40% <span>Students of Color</span></h2>
					<div class="slide-image-wrap">
						<img src="assets/toolkit/images/slide-image-2.jpg" alt="Slide Image Alt">
					</div>
				</div>
				<div class="slide flex-wrapper relative flex-end">
					<h2 class="h1">49% <span>Women</span></h2>
					<div class="slide-image-wrap">
						<img src="assets/toolkit/images/stat-women.jpg" alt="Slide Image Alt">
					</div>
				</div>
				<div class="slide flex-wrapper relative flex-end">
					<h2 class="h1">25 <span>Average Age</span></h2>
					<div class="slide-image-wrap">
						<img src="assets/toolkit/images/stat-age.jpg" alt="Slide Image Alt">
					</div>
				</div>
				<div class="slide flex-wrapper relative flex-end">
					<h2 class="h1">170 <span>Median LSAT Score</span></h2>
					<div class="slide-image-wrap">
						<img src="assets/toolkit/images/stat-lsat.jpg" alt="Slide Image Alt">
					</div>
				</div>
			</div>
		</div>
	</section>

Homepage Video Section

Current Student: Ask Jane
Video Banner

Video Title

What's it really like here?

Why Did You Choose Law School? What is your course schedule? How would you describe life on campus?
Alumni: Ask John
Video Banner

Video Title

2What's it really like here?

Why Did You Choose Law School? What is your course schedule? How would you describe life on campus?
Faculty Member: Ask Jeff
Video Banner

Video Title

3What's it really like here?

Why Did You Choose Law School? What is your course schedule? How would you describe life on campus? 
<section class="accordion-video-triggers-section">
		<div class="frame relative">
			<div class="video-accordion-wrapper">
				<div class="accordion-triggers flex-wrapper flex-end relative">
					<a href="javascript:void(0);" class="accordion-trigger active-accordion-trigger" data-id="ac-vid-1">Current Student: Ask Jane</a>
					<div class="accordion-content active-accordion-content" data-id="ac-vid-1">
						<div class="flex-wrapper space-between wrap video-id-container" data-video-id="FQZvmEquTuE" data-iframe="video-1">
							<div class="video-wrapper">
								<div class="link-fill-wrapper">
									<a href="javascript:void(0);" class="link-fill video-play-overlay" aria-label="Video Play"></a>
									<img src="assets/toolkit/images/video-banner-1.jpg" class="link-fill" alt="Video Banner">
									<div class="iframe-container" data-iframe="video-1">
	
									</div>
									<div class="video-meta">
										<svg class="play-icon" width="73px" height="73px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
											<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
												<g transform="translate(-751.000000, -2979.000000)" stroke="#FFFFFF" stroke-width="3">
													<g transform="translate(0.000000, 2398.000000)">
														<g transform="translate(707.000000, 139.000000)">
															<g transform="translate(44.000000, 442.000000)">
																<circle cx="36.5" cy="36.5" r="35"></circle>
																<path d="M39.5,29.8301943 L29.7063715,45.5 L49.2936285,45.5 L39.5,29.8301943 Z" transform="translate(39.500000, 37.000000) rotate(90.000000) translate(-39.500000, -37.000000) "></path>
															</g>
														</g>
													</g>
												</g>
											</g>
										</svg>
										<p>Video Title</p>
									</div>
								</div>
							</div>
							<div class="video-time-triggers">
								<h2>What's it really like here?</h2>
								<div class="video-triggers">
									<a href="javascript:void(0);" data-timestamp="4497">Why Did You Choose Law School?</a>
									<a href="javascript:void(0);" data-timestamp="1122">What is your course schedule?</a>
									<a href="javascript:void(0);" data-timestamp="4563">How would you describe life on campus?</a>
								</div>
							</div>
						</div>
					</div>
					<a href="javascript:void(0);" class="accordion-trigger" data-id="ac-vid-2">Alumni: Ask John</a>
					<div class="accordion-content" data-id="ac-vid-2">
						<div class="flex-wrapper space-between wrap video-id-container" data-video-id="38uEZN5-Hqg" data-iframe="video-2">
							<div class="video-wrapper">
								<div class="link-fill-wrapper">
									<a href="javascript:void(0);" class="link-fill video-play-overlay" aria-label="Video Play"></a>
									<img src="assets/toolkit/images/video-banner-1.jpg" class="link-fill" alt="Video Banner">
									<div class="iframe-container" data-iframe="video-2">
	
									</div>
									<div class="video-meta">
										<svg class="play-icon" width="73px" height="73px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
											<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
												<g transform="translate(-751.000000, -2979.000000)" stroke="#FFFFFF" stroke-width="3">
													<g transform="translate(0.000000, 2398.000000)">
														<g transform="translate(707.000000, 139.000000)">
															<g transform="translate(44.000000, 442.000000)">
																<circle cx="36.5" cy="36.5" r="35"></circle>
																<path d="M39.5,29.8301943 L29.7063715,45.5 L49.2936285,45.5 L39.5,29.8301943 Z" transform="translate(39.500000, 37.000000) rotate(90.000000) translate(-39.500000, -37.000000) "></path>
															</g>
														</g>
													</g>
												</g>
											</g>
										</svg>
										<p>Video Title</p>
									</div>
								</div>
							</div>
							<div class="video-time-triggers">
								<h2>2What's it really like here?</h2>
								<div class="video-triggers">
									<a href="javascript:void(0);" data-timestamp="4497">Why Did You Choose Law School?</a>
									<a href="javascript:void(0);" data-timestamp="1122">What is your course schedule?</a>
									<a href="javascript:void(0);" data-timestamp="4563">How would you describe life on campus?</a>
								</div>
							</div>
						</div>
					</div>
					<a href="javascript:void(0);" class="accordion-trigger" data-id="ac-vid-3">Faculty Member: Ask Jeff</a>
					<div class="accordion-content" data-id="ac-vid-3">
						<div class="flex-wrapper space-between wrap video-id-container" data-video-id="-gDinVAmtA0" data-iframe="video-3">
							<div class="video-wrapper">
								<div class="link-fill-wrapper">
									<a href="javascript:void(0);" class="link-fill video-play-overlay" aria-label="Video Play"></a>
									<img src="assets/toolkit/images/video-banner-1.jpg" class="link-fill" alt="Video Banner">
									<div class="iframe-container" data-iframe="video-3">
	
									</div>
									<div class="video-meta">
										<svg class="play-icon" width="73px" height="73px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
											<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
												<g transform="translate(-751.000000, -2979.000000)" stroke="#FFFFFF" stroke-width="3">
													<g transform="translate(0.000000, 2398.000000)">
														<g transform="translate(707.000000, 139.000000)">
															<g transform="translate(44.000000, 442.000000)">
																<circle cx="36.5" cy="36.5" r="35"></circle>
																<path d="M39.5,29.8301943 L29.7063715,45.5 L49.2936285,45.5 L39.5,29.8301943 Z" transform="translate(39.500000, 37.000000) rotate(90.000000) translate(-39.500000, -37.000000) "></path>
															</g>
														</g>
													</g>
												</g>
											</g>
										</svg>
										<p>Video Title</p>
									</div>
								</div>
							</div>
							<div class="video-time-triggers">
								<h2>3What's it really like here?</h2>
								<div class="video-triggers">
									<a href="javascript:void(0);" data-timestamp="4497">Why Did You Choose Law School?</a>
									<a href="javascript:void(0);" data-timestamp="1122">What is your course schedule?</a>
									<a href="javascript:void(0);" data-timestamp="4563">How would you describe life on campus?</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>