TRAFFIC ADVISORY:

President Trump is scheduled to be in Philadelphia on Tuesday, September 15, 2020 at The National Constitution Center (NCC) in the Independence Mall area. Increased police presence is anticipated in Center City throughout Tuesday afternoon and evening. Please allow extra time if you are going to Wills Eye. Please be advised of area street closures to vehicles beginning at 1:00PM on Tuesday 9/15. Pedestrian access will also be limited in the area. This is subject to change and area restrictions, which could widen, will be lifted once the President departs the NCC. There are also demonstrations planned for Tuesday 9/15 around Independence Mall as well as City Avenue.

Template Guide

Template Guide

Colors

Theme colors should be defined in settings/_colors.scss.


$red
#e51d39
.color-red
.bg-red


$black
#000000
.color-black
.bg-black


$white
#ffffff
.color-white
.bg-white


$grey
#666666
.color-grey
.bg-grey
Objects

Objects are used for undecorated design of media objects and singular use elements.

Accordion

Interactive panel with nested content

At least two elements are necessary to achieve functionality: .o-accordion__title and .o-accordion__dropdown

If multiple steps are planned, each of them should be wrapped by container: .o-accordion__step

.o-accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu nunc massa. Integer sed arcu sit amet elit fringilla tempor. Nulla pulvinar est vel arcu facilisis quis posuere diam luctus. Aenean eu magna felis, ut ullamcorper est. Suspendisse et nunc orci, id rhoncus erat. Praesent eu lorem tellus, eu facilisis libero. Maecenas arcu libero, fringilla vulputate aliquam in, eleifend varius magna. Vivamus tempus libero non sapien rhoncus sollicitudin.

				
<div class="o-accordion">
	<div class="o-accordion__step">
		<div class="o-accordion__dropdown">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu nunc massa. Integer sed arcu sit amet elit fringilla tempor. Nulla pulvinar est vel arcu facilisis quis posuere diam luctus. Aenean eu magna felis, ut ullamcorper est. Suspendisse et nunc orci, id rhoncus erat. Praesent eu lorem tellus, eu facilisis libero. Maecenas arcu libero, fringilla vulputate aliquam in, eleifend varius magna. Vivamus tempus libero non sapien rhoncus sollicitudin. </p>
		</div>
		<div class="o-accordion__title">
			<a class="o-label o-label--red">Read More</a>
		</div>
	</div>
</div>
				
			
Embed video

Responsive container for embedded video. It stretch inner content to match 16:9 aspect ratio by default.

.o-embed
Grid

Basic 3-column grid with responsive layout.

.o-grid
.o-grid__item
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
				<div class="o-grid">
	<div class="o-grid__item">...</div>
	<div class="o-grid__item">...</div>
	<div class="o-grid__item">...</div>
</div>
			
Headings

Headings to use in your content

.o-heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Labels

Labels are short quick tag-like treatments for providing context

.o-label

Example Label

.o-label--red

Example Label

Components

Article

The article is the basic reference to periodical data on the site, and it used on the majority of templates in the theme.

This component has a variety of modifiers. Each style of the component has a modifier class added to the parent container

.c-article

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some exmplate text to go below a title

					<div class="c-article" onclick="window.location='/template-guide'">
	<img src="/wp-content/themes/wills-eye/dist/images/article-sample7.jpg" class="c-article-img" alt="">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<p class="o-label o-label--red">Example Label</p>
			</div>
			<div>
				<div class="c-article__title">
					<p>Lorem ipsum dolor anerm cisbe ctertur</p>
					<p>Some example text to go below a title</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<i class="fa c-article__arrow-alt" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
				

.c-article--large

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

					<div class="c-article c-article--large" onclick="window.location='/template-guide'">
	<img src="/wp-content/themes/wills-eye/dist/images/post-sample_large.jpg" class="c-article-img" alt="">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<p class="o-label o-label--red">Example Label</p>
			</div>
			<div>
				<div class="c-article__title">
					<p>Lorem ipsum dolor anerm cisbe ctertur</p>
					<p>Some example text to go below a title</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<i class="fa c-article__arrow" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
				

.c-article--reverse

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

					<div class="c-article c-article--reverse" onclick="window.location='/template-guide'">
	<img src="/wp-content/themes/wills-eye/dist/images/article-sample7.jpg" class="c-article-img" alt="">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<p class="o-label o-label--red">Example Label</p>
			</div>
			<div>
				<div class="c-article__title">
					<p>Lorem ipsum dolor anerm cisbe ctertur</p>
					<p>Some example text to go below a title</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<i class="fa c-article__arrow" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
				

.c-article--btn-dark

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

					<div class="c-article c-article--btn-dark" onclick="window.location='/template-guide'">
	<img src="/wp-content/themes/wills-eye/dist/images/article-sample7.jpg" class="c-article-img" alt="">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<p class="o-label o-label--red">Example Label</p>
			</div>
			<div>
				<div class="c-article__title">
					<p>Lorem ipsum dolor anerm cisbe ctertur</p>
					<p>Some example text to go below a title</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<i class="fa c-article__arrow" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
				

.c-article--theme-light

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

					<div class="c-article c-article--large" onclick="window.location='/template-guide'">
	<img src="/wp-content/themes/wills-eye/dist/images/post-sample_large.jpg" class="c-article-img" alt="">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<p class="o-label o-label--red">Example Label</p>
			</div>
			<div>
				<div class="c-article__title">
					<p>Lorem ipsum dolor anerm cisbe ctertur</p>
					<p>Some example text to go below a title</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<i class="fa c-article__arrow" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
				

.c-article--patient

Patient & Visitors

Lorem ipsum dolor sit amet, conse ctetur adipiscing

					
<div class="c-article c-article--patient" onclick="window.location='/template-guide'">
	<div class="c-article-flex">
		<div class="c-article__text">
			<div>
				<div class="c-article__title">
					<p>Patient & Visitors</p>
					<p>Lorem ipsum dolor sit amet, conse ctetur adipiscing</p>
				</div>
			</div>
			<div>
				<div class="c-article__btn">
					<a href="#" class="o-btn o-btn--red">Plan Your Visit</a>
					<a href="#" class="o-btn o-btn--red">Eye Emergency</a>
				</div>
			</div>
		</div>
	</div>
</div>
					
				
Article Grid

The article grid is uses the flex display property to render articles with proper gutters, and native mobile support. There is no need to create rows, simply add your article components inside of the article grid

.c-article-grid

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some example text to go below a title

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some exmplate text to go below a title

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some exmplate text to go below a title

Example Label

Lorem ipsum dolor anerm cisbe ctertur

Some exmplate text to go below a title

				<div class="c-article-grid">
	<div class="c-article">...</div>
	<div class="c-article">...</div>
	<div class="c-article">...</div>
</div>
			
Article List

The article list component is used for listing out articles, but not in a grid. It had no inherient styling, and it's up to the implementor to style the list.

Must pass items or endpoint.

.c-article-list

Parameters
  • endpoint (optional): URL to receive article data collection
  • endpoint-response-property (optional): Property to choose if endpoint response is an object
  • items (optional): Collection of articles
				<article-list endpoint="'/path/to/endpoint'" endpoint-response-property="'someProp'">
	<div class="c-article-list">
		<div class="c-article">...</div>
		<div class="c-article">...</div>
		<div class="c-article">...</div>
	</div>
</article-list>
			
Condition search

Responsive condition search form

.c-condition-search
			
<div class="c-condition-search">
	<div class="o-inner-content flex-between@tablet">
		<h3 class="c-condition-search__title">Search Diseases & Conditions</h3>
		<form action="" method="" class="c-condition-search__form">
			<div class="c-condition-search__fieldset">
				<div class="c-field">
					<input type="text" class="c-field__input" placeholder="Enter Disease or Condition">
				</div>
			</div>
			<button type="submit" class="c-condition-search__btn o-btn o-btn--red">Search</button>
		</form>
	</div>
</div>
			
		
Doctor

The doctor article is the basic reference to personal data on the site, and it used on the majority of templates in the theme.

.c-doctor
Long First Name and Long Last Name, MD
Specialty: Cataract & Primary Eye Care (CPEC)
			
<div class="c-doctor" onclick="window.location='/template-guide'">
	<div class="c-doctor__img" style="background-image: url('<?php echo get_stylesheet_directory_uri() ?>/dist/images/md1.jpg');"></div>
	<div class="c-doctor__info">
		<div class="c-doctor__title">Long First Name and Long Last Name, MD</div>
		<div class="c-doctor__sub-title">Specialty: Cataract & Primary Eye Care (CPEC)</div>
	</div>
</div>
			
		
Doctor search

Responsive doctor search

.c-doctor-search
			
<find-an-eye-doctor-form 
	subspecialties='[{id:"0", name:"Name0"}, {id:"1", name:"Name1"}, {id:"2", name:"Name2"}]' 
	conditions='[{id:"0", title: {rendered: "Title0"}}, {id:"1", title: {rendered: "Title1"}}, {id:"2", title: {rendered: "Title2"}} ]'>
</find-an-eye-doctor-form>
			
		
Link group

A decorated system for a group of links

.c-link-group
			
<div class="c-link-group">
	<a href="" class="c-link-group__item">
		<span class="c-link-group__text">Link Group #1</span>
	</a>
	<a href="" class="c-link-group__item">
		<span class="c-link-group__text">Link Group #2</span>
	</a>
	<a href="" class="c-link-group__item">
		<span class="c-link-group__text">Link Group #3</span>
	</a>
</div>
			
		
Pagination

The pagination bar is used to navigate through article collection.

.c-pagination
			<ul class="c-pagination">
	<li class="c-pagination__item">...</li>
	<li class="c-pagination__item">...</li>
	<li class="c-pagination__item c-pagination__item_next">NEXT</li>
</ul>
			
		
Social Share

Social Share is used to share page or posts depending on parameters given.

					<social-share-links></social-share-links>
				
Parameters
  • theme: white-red | black-red
  • url
  • title
  • image
  • description
  • image-share
  • hide


theme

The theme of the social media links according to the themes template.

theme="'white-red'"
theme="'black-red'"


url

Allows the ability to change the URL shared to social media. If url is not set, this will default to the current page URL

					<social-share-links url="'http://www.example.com"></social-share-links>
				
title

Allows the ability to change the title shared to social media. If title is not set, this will default to the current page title set by Yoast SEO(the wordpress page title)

					<social-share-links title="'Custom Page Title'"></social-share-links>
				
image

Allows the ability to set the image shared to social media. If image is not set, this will default to the current page meta[property='og:image'] that is set by wordpress.

					<social-share-links image="'http://example.com/demoimage.jpg'"></social-share-links>
				
description

Allows the ability to set the description text shared to social media. If description is not set, this will default to the current page meta[property='og:description'] that is set by wordpress.

					<social-share-links description="'Custom Description'"></social-share-links>
				
img-share

Boolean to set the share functionality to just share the image to social media. If image-share is not set, this will default to sharing the page.

					<social-share-links img-share="true"></social-share-links>
				
hide

Sets which social media links to hide from view. Separate media by commas to hide multiple links. If hide is not set, the component display all media links.

					<social-share-links hide="'email,facebook,twitter,youtube,linkedin'"></social-share-links>
				
Select List
.c-field

Custom select, stretches to its container width



.c-select-list
			
<article-filter 
    active-category="$ctrl.category" 
    categories="$ctrl.categories"
    on-category-select="$ctrl.onCategorySelect($event)"
    filter-theme="'select'">
</article-filter>
			
		

<ul class="c-sidebar-menu">
    <li>
      <a>...</a>
      <ul>
          <li>
              <a>...</a>
              <ul>
                  <li>
                      <a>...</a>
                  </li>
              </ul>
          </li>
          <li>...</li>
      </ul>
    </li>
    <li>...</li>
    <li>...</li>
</ul>
		
Slider

Image slider with navigation and swipe functionality

.c-slider
			
<div class="c-slider">
    <div class="c-slider__wrapper">
        <div class="c-slider__slide">
            <img class="c-slider__slide-image" src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/slider-sample1.jpg">
        </div>
        <div class="c-slider__slide">
            <img class="c-slider__slide-image" src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/slider-sample1.jpg">
        </div>
        <div class="c-slider__slide">
            <img class="c-slider__slide-image" src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/slider-sample1.jpg">
        </div>
        <div class="c-slider__slide">
            <img class="c-slider__slide-image" src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/slider-sample1.jpg">
        </div>
    </div>
    <div class="c-slider__control c-slider__control_prev"></div>
    <div class="c-slider__control c-slider__control_next"></div>
    <div class="c-slider__pagination"></div>
</div>
			
		

.c-slider__stories
					
	<div class="c-slider c-slider__stories">
		<div class="c-slider__wrapper">
			<div class="c-slider__slide">
				<img class="c-slider__slide-image" src="https://www.willseye.org/wp-content/themes/wills-eye/dist/images/stories-slide.jpg">
			</div>
			<div class="c-slider__slide">
				<img class="c-slider__slide-image" src="https://www.willseye.org/wp-content/themes/wills-eye/dist/images/stories-slide.jpg">
			</div>
			<div class="c-slider__slide">
				<img class="c-slider__slide-image" src="https://www.willseye.org/wp-content/themes/wills-eye/dist/images/stories-slide.jpg">
			</div>
			<div class="c-slider__slide">
				<img class="c-slider__slide-image" src="https://www.willseye.org/wp-content/themes/wills-eye/dist/images/stories-slide.jpg">
			</div>
		</div>
		<div class="c-slider__control c-slider__control_prev"></div>
		<div class="c-slider__control c-slider__control_next"></div>
		<div class="c-slider__pagination"></div>
	</div>
					
				
Utility Nav

Widget bar with two variations:

  • Fixed: Fixed on scroll
  • Footer: Presents in footer
.c-utility-nav
  • Make Appointment
  • Directions
  • Find an Eye Doctor
			<div class="c-utility-nav c-utility-nav_footer hidden@phone">
	<ul>
		<li>
			<div class="c-utility-nav__item">
				<img src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/icon-calendar.png" alt="">
				<span>Make Appointment</span>
			</div>
		</li>
		<li>
			<div class="c-utility-nav__item">
				<img src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/icon-map.png" alt="">
				<span>Directions</span>
			</div>
		</li>
		<li>
			<div class="c-utility-nav__item">
				<img src="<?php echo get_stylesheet_directory_uri() ?>/dist/images/icon-md.png" alt="">
				<span>Find an Eye Doctor</span>
			</div>
		</li>
	</ul>
</div>
			
		
Description Block

Small description block with background.

.c-description

Patient Stories

Lorem ipsum dolor sit amet, conse ctetur adipiscing. Lom ipsum dolor sit amet, conse ctetur adipiscing elit.



				
<div class="c-description">
	<div>
		<div class="c-description__title">
			<p>Patient Stories</p>
			<p>Lorem ipsum dolor sit amet, conse ctetur adipiscing. Lom ipsum dolor sit amet, conse ctetur adipiscing elit. </p>
		</div>
	</div>
	<div class="c-description__btn">
		<i class="fa c-description__arrow"></i>
	</div>
</div>
				
			

.c-description__large

Lorem ipsum dolor amet, conse ctetur adipiscing elit.



				
<div class="c-description c-description__large">
	<div>
		<div class="c-description__title">
			<p>Lorem ipsum dolor amet, conse ctetur adipiscing elit.</p>
		</div>
	</div>
	<div class="c-description__btn">
		<i class="fa c-description__arrow"></i>
	</div>
</div>
				
			
About Section

About section with description block or without description block.

.c-about

Expert Insights

Leadership

Community

					
<div class="c-about" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-bg.jpg);">
	<div class="o-inner-content">
		<div class="o-grid">
			<div class="o-grid__item">
		     <div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-1.jpg);"></div>
				<div class="c-about__title"><p>Expert Insights</p></div>
			</div>
			<div class="o-grid__item">
				<div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-2.jpg);"></div>
				<div class="c-about__title"><p>Leadership</p></div>
			</div>
			<div class="o-grid__item">
				<div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-3.jpg);"></div>
				<div class="c-about__title"><<p>Community</p></div>
			</div>
		</div>
	</div>
</div>
					
				

.c-about__description

ABOUT WILLS EYE

Lorem ipsum dolor sit amet, conse ctetur adipiscing.

Lorem ipsum dolor sit amet, conse ctetur adipiscing. Lom ipsum dolor sit amet, conse ctetur adipiscing elit.

Expert Insights

Leadership

Community

					
<div class="c-about" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-bg.jpg);">
	<div class="o-inner-content">
		<div class="c-description">
			<div>
				<div class="c-description__title">
					<p>Patient Stories</p>
					<p>Lorem ipsum dolor sit amet, conse ctetur adipiscing.</p>
					<p>Lorem ipsum dolor sit amet, conse ctetur adipiscing. Lom ipsum dolor sit amet, conse ctetur adipiscing elit. </p>
				</div>
			</div>
			<div class="c-description__btn">
				<i class="fa c-description__arrow"></i>
			</div>
		</div>
		<div class="o-grid">
			<div class="o-grid__item">
		     <div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-1.jpg);"></div>
				<div class="c-about__title"><p>Expert Insights</p></div>
			</div>
			<div class="o-grid__item">
				<div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-2.jpg);"></div>
				<div class="c-about__title"><p>Leadership</p></div>
			</div>
			<div class="o-grid__item">
				<div class="c-about__img" style="background-image: url(https://www.willseye.org/wp-content/themes/wills-eye/dist/images/about-3.jpg);"></div>
				<div class="c-about__title"><<p>Community</p></div>
			</div>
		</div>
	</div>
</div>